/*
Theme Name: Paseo Nocturno
Theme URI: https://paseonocturno.com
Author: Alexis Alegre
Author URI: https://paseonocturno.com
Description: Tema oficial para Paseo Nocturno, blog de terror y misterio.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paseo-nocturno
Tags: dark, one-column, custom-menu, featured-images, blog
*/

/* ============================================================
   1. RESET & CONFIGURACIONES BÁSICAS
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: rgba(139, 0, 0, 0.6); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2D0000; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4A0000; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #000; color: #e7e5e4; overflow-x: hidden; position: relative; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   2. TEXTURA DE FONDO (GRANO SEGURO Y LIGERO)
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.admin-bar::before, body.admin-bar .scanline-overlay, body.admin-bar .vignette { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar::before, body.admin-bar .scanline-overlay, body.admin-bar .vignette { top: 46px; } }

/* ============================================================
   3. ANIMACIONES (EFECTOS DE TERROR)
   ============================================================ */
@keyframes flicker { 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; } 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.33; } }
@keyframes slowFlicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.6; } 43% { opacity: 1; } 45% { opacity: 0.3; } 46% { opacity: 1; } }
@keyframes fogDrift { 0% { transform: translateX(-100%) translateY(0); opacity: .3; } 50% { opacity: .15; } 100% { transform: translateX(100%) translateY(-20px); opacity: 0; } }
@keyframes fogDrift2 { 0% { transform: translateX(100%) translateY(0); opacity: .2; } 50% { opacity: .1; } 100% { transform: translateX(-100%) translateY(20px); opacity: 0; } }
@keyframes bloodDrip { 0% { height: 0; opacity: 0; } 10% { opacity: 1; } 100% { height: 80px; opacity: .6; } }
@keyframes pulse-red { 0%, 100% { box-shadow: 0 0 20px rgba(139,0,0,.3), 0 0 60px rgba(139,0,0,.1); } 50% { box-shadow: 0 0 30px rgba(204,0,0,.5), 0 0 80px rgba(139,0,0,.2); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   4. CAPAS ATMOSFÉRICAS Y SOBRECAPAS
   ============================================================ */
.slow-flicker { animation: slowFlicker 8s linear infinite; }
.fog-layer { position: absolute; width: 200%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(139,0,0,.03) 0%, transparent 70%); }
.fog-1 { animation: fogDrift 25s ease-in-out infinite; top: 60%; }
.fog-2 { animation: fogDrift2 30s ease-in-out infinite; top: 40%; }
.blood-line { position: absolute; width: 2px; background: linear-gradient(to bottom, #8B0000, #CC0000, transparent); animation: bloodDrip 6s ease-in infinite; }
.scanline-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px); }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%); }
#particles-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ============================================================
   5. COMPONENTES DE INTERFAZ & TARJETAS
   ============================================================ */
.hero-title { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .15em; text-shadow: 0 0 40px rgba(139,0,0,.5), 0 0 80px rgba(139,0,0,.2), 0 2px 4px rgba(0,0,0,.8); }
.nav-link { position: relative; transition: color .3s; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #CC0000; transition: width .4s cubic-bezier(.16,1,.3,1); }
.nav-link:hover { color: #CC0000; }
.nav-link:hover::after { width: 100%; }

.btn-blood { position: relative; background: linear-gradient(135deg, #8B0000, #6B0000); border: 1px solid rgba(204,0,0,.3); overflow: hidden; transition: all .5s; cursor: pointer; display: inline-block; }
.btn-blood::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #CC0000, #8B0000); opacity: 0; transition: opacity .5s; }
.btn-blood:hover::before { opacity: 1; }
.btn-blood:hover { box-shadow: 0 0 30px rgba(204,0,0,.4), 0 0 60px rgba(139,0,0,.2); transform: translateY(-2px); }
.btn-blood span { position: relative; z-index: 1; }

.btn-ghost { position: relative; border: 1px solid rgba(139,0,0,.3); background: transparent; transition: all .5s; cursor: pointer; display: inline-block; }
.btn-ghost:hover { border-color: rgba(204,0,0,.6); background: rgba(139,0,0,.1); box-shadow: 0 0 20px rgba(139,0,0,.15); }

.route-card { position: relative; background: linear-gradient(135deg, rgba(15,15,15,.9), rgba(10,10,10,.95)); border: 1px solid rgba(139,0,0,.15); transition: all .6s cubic-bezier(.16,1,.3,1); overflow: hidden; }
.route-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(204,0,0,.4), transparent); opacity: 0; transition: opacity .6s; }
.route-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--mx,50%) var(--my,50%), rgba(139,0,0,.08), transparent 60%); opacity: 0; transition: opacity .6s; }
.route-card:hover::before { opacity: 1; }
.route-card:hover::after { opacity: 1; }
.route-card:hover { border-color: rgba(139,0,0,.4); transform: translateY(-4px); box-shadow: 0 20px 60px -15px rgba(139,0,0,.2), 0 0 40px rgba(139,0,0,.05); }
.route-card:hover .route-number { color: #CC0000; text-shadow: 0 0 20px rgba(204,0,0,.5); }
.route-card:hover .route-arrow { transform: translateX(4px); opacity: 1; }
.route-card:hover .route-img { transform: scale(1.05); filter: brightness(.7) contrast(1.1); }
.route-img { transition: all .8s cubic-bezier(.16,1,.3,1); filter: brightness(.5) contrast(1.1) saturate(.8); }

.post-card { position: relative; overflow: hidden; transition: all .6s cubic-bezier(.16,1,.3,1); }
.post-card:hover { transform: translateY(-6px); }
.post-card:hover .post-img { transform: scale(1.08); filter: brightness(.6) contrast(1.1); }
.post-card:hover .post-overlay { opacity: 1; }
.post-img { transition: all .8s cubic-bezier(.16,1,.3,1); filter: brightness(.5); }
.post-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 50%, transparent 100%); opacity: .8; transition: opacity .6s; }

.tag { border: 1px solid rgba(139,0,0,.25); background: rgba(139,0,0,.08); transition: all .3s; }
.tag:hover { border-color: rgba(204,0,0,.5); background: rgba(139,0,0,.15); }
.divider-blood { height: 1px; background: linear-gradient(90deg, transparent, rgba(139,0,0,.4), rgba(204,0,0,.2), rgba(139,0,0,.4), transparent); }
.section-reveal { opacity: 0; transform: translateY(40px); transition: all .8s cubic-bezier(.16,1,.3,1); }
.section-reveal.visible { opacity: 1; transform: translateY(0); }
.quote-mark { font-family: 'Playfair Display', serif; color: rgba(139,0,0,.2); line-height: 1; }
.mobile-menu { transform: translateX(100%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.mobile-menu.open { transform: translateX(0); }
.toast { position: fixed; bottom: 30px; right: 30px; z-index: 10000; background: rgba(15,15,15,.95); border: 1px solid rgba(139,0,0,.3); backdrop-filter: blur(12px); transform: translateY(120%); opacity: 0; transition: all .5s cubic-bezier(.16,1,.3,1); border-radius: 12px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: .75rem; max-width: 24rem; }
.toast.show { transform: translateY(0); opacity: 1; }

/* ============================================================
   6. ELEMENTOS PRINCIPALES DE WORDPRESS
   ============================================================ */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal!important; }
.comment-body { background: #111; border: 1px solid rgba(139,0,0,.08); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
.comment-form input, .comment-form textarea { background: #111; border: 1px solid rgba(139,0,0,.15); color: #e7e5e4; padding: .75rem 1rem; border-radius: 8px; width: 100%; font-family: 'Inter', sans-serif; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: rgba(139,0,0,.4); }
.nav-links { display: flex; gap: .5rem; justify-content: center; margin-top: 3rem; }
.nav-links a, .nav-links span { padding: .5rem 1rem; border: 1px solid rgba(139,0,0,.15); border-radius: 8px; color: #a8a29e; font-size: .875rem; transition: all .3s; }
.nav-links .current, .nav-links a:hover { border-color: rgba(204,0,0,.5); background: rgba(139,0,0,.15); color: #CC0000; }
.single .content-paragraph { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.single .content-paragraph.revealed { opacity: 1; transform: translateY(0); }

/* ============================================================
   7. FALLBACKS DE TAILWIND (Fuentes y Colores Críticos)
   ============================================================ */
.font-cinzel { font-family: 'Cinzel', serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-inter { font-family: 'Inter', sans-serif !important; }
.text-blood-500 { color: #CC0000 !important; }
.text-blood-600 { color: #8B0000 !important; }
.text-blood-400 { color: #f87171 !important; }
.text-bone-50 { color: #f5f5f4 !important; }
.text-bone-100 { color: #e7e5e4 !important; }
.text-bone-200 { color: #d6d3d1 !important; }
.text-bone-300 { color: #a8a29e !important; }
.text-bone-400 { color: #78716c !important; }
.text-bone-500 { color: #57534e !important; }
.text-white { color: #ffffff !important; }
.text-bone-50\/85 { color: rgba(245,245,244,0.85) !important; }
.text-bone-100\/80 { color: rgba(231,229,228,0.8) !important; }
.text-bone-100\/85 { color: rgba(231,229,228,0.85) !important; }
.text-bone-200\/60 { color: rgba(214,211,209,0.6) !important; }
.text-bone-200\/65 { color: rgba(214,211,209,0.65) !important; }
.text-bone-200\/70 { color: rgba(214,211,209,0.7) !important; }
.text-bone-300\/50 { color: rgba(168,162,158,0.5) !important; }
.text-bone-300\/60 { color: rgba(168,162,158,0.6) !important; }
.text-bone-400\/35 { color: rgba(120,113,108,0.35) !important; }
.text-bone-400\/40 { color: rgba(120,113,108,0.4) !important; }
.text-bone-400\/45 { color: rgba(120,113,108,0.45) !important; }
.text-bone-400\/50 { color: rgba(120,113,108,0.5) !important; }
.text-bone-400\/55 { color: rgba(120,113,108,0.55) !important; }
.text-bone-400\/60 { color: rgba(120,113,108,0.6) !important; }
.text-bone-500\/15 { color: rgba(87,83,78,0.15) !important; }
.text-bone-500\/20 { color: rgba(87,83,78,0.2) !important; }
.text-bone-500\/25 { color: rgba(87,83,78,0.25) !important; }
.text-bone-500\/30 { color: rgba(87,83,78,0.3) !important; }
.text-blood-500\/70 { color: rgba(204,0,0,0.7) !important; }
.text-blood-600\/40 { color: rgba(139,0,0,0.4) !important; }
.text-blood-600\/60 { color: rgba(139,0,0,0.6) !important; }
.bg-black { background-color: #000000 !important; }
.bg-abyss-400 { background-color: #0a0a0a !important; }
.border-blood-600\/10 { border-color: rgba(139,0,0,0.1) !important; }
.border-blood-600\/15 { border-color: rgba(139,0,0,0.15) !important; }
.border-blood-600\/20 { border-color: rgba(139,0,0,0.2) !important; }
.border-blood-600\/25 { border-color: rgba(139,0,0,0.25) !important; }
.border-blood-600\/40 { border-color: rgba(139,0,0,0.4) !important; }
[style*="text-shadow:0 0 60px rgba(204,0,0"] { text-shadow: 0 0 60px rgba(204,0,0,0.4), 0 0 120px rgba(139,0,0,0.2) !important; }
[style*="text-shadow:0 0 30px rgba(139,0,0"] { text-shadow: 0 0 30px rgba(139,0,0,0.15) !important; }
[style*="text-shadow:0 0 20px rgba(139,0,0"] { text-shadow: 0 0 20px rgba(139,0,0,0.1) !important; }
input::placeholder, textarea::placeholder { color: rgba(87,83,78,0.35) !important; }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.animate-spin { animation: spin 1s linear infinite; }
[style*="animation:pulse-red"] { animation: pulse-red 3s ease-in-out infinite !important; }
[style*="animation:pulse-red 2s"] { animation: pulse-red 2s ease-in-out infinite !important; }

/* ============================================================
   8. ESTILOS AUTOMÁTICOS PARA CONTENIDO DE POSTS
   Formatea lo que pegues en el editor sin usar clases
   ============================================================ */

/* Contenedor general del post */
.single article .text-bone-50\/85 { line-height: 1.85 !important; }

/* --- PÁRRAFOS --- */
.single article .text-bone-50\/85 p { margin-bottom: 1.5rem !important; color: rgba(214, 211, 209, 0.75) !important; font-size: 1.1rem !important; }

/* --- TÍTULOS (H2, H3, H4) --- */
.single article .text-bone-50\/85 h2 { font-family: 'Cinzel', serif !important; font-size: 1.75rem !important; font-weight: 700 !important; color: #e7e5e4 !important; margin-top: 3rem !important; margin-bottom: 1.5rem !important; text-shadow: 0 0 20px rgba(139,0,0,0.15) !important; letter-spacing: 0.02em !important; }
.single article .text-bone-50\/85 h3 { font-family: 'Cinzel', serif !important; font-size: 1.35rem !important; font-weight: 600 !important; color: #d6d3d1 !important; margin-top: 2.5rem !important; margin-bottom: 1.2rem !important; text-shadow: 0 0 15px rgba(139,0,0,0.1) !important; }
.single article .text-bone-50\/85 h4 { font-family: 'Cinzel', serif !important; font-size: 1.1rem !important; font-weight: 600 !important; color: #a8a29e !important; margin-top: 2rem !important; margin-bottom: 1rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

/* --- NEGRITAS Y CURSIVAS --- */
.single article .text-bone-50\/85 strong, .single article .text-bone-50\/85 b { color: #CC0000 !important; font-weight: 600 !important; text-shadow: 0 0 10px rgba(204,0,0,0.2) !important; }
.single article .text-bone-50\/85 em, .single article .text-bone-50\/85 i { font-family: 'Playfair Display', serif !important; color: rgba(168, 162, 158, 0.9) !important; font-style: italic !important; }

/* --- ENLACES DENTRO DEL TEXTO --- */
.single article .text-bone-50\/85 a { color: #f87171 !important; text-decoration: none !important; border-bottom: 1px solid rgba(204,0,0,0.3) !important; transition: all 0.3s ease !important; padding: 0 2px !important; }
.single article .text-bone-50\/85 a:hover { color: #CC0000 !important; border-bottom-color: #CC0000 !important; text-shadow: 0 0 8px rgba(204,0,0,0.4) !important; }

/* --- LISTAS (Viñetas) --- */
.single article .text-bone-50\/85 ul { list-style: none !important; padding-left: 0 !important; margin-bottom: 1.5rem !important; }
.single article .text-bone-50\/85 ul li { position: relative !important; padding-left: 1.8rem !important; margin-bottom: 0.75rem !important; color: rgba(214, 211, 209, 0.75) !important; font-size: 1.05rem !important; }
.single article .text-bone-50\/85 ul li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0.6em !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #8B0000 !important; box-shadow: 0 0 8px rgba(139,0,0,0.4) !important; }

/* Listas ordenadas (1, 2, 3...) */
.single article .text-bone-50\/85 ol { list-style: none !important; padding-left: 0 !important; margin-bottom: 1.5rem !important; counter-reset: blood-counter !important; }
.single article .text-bone-50\/85 ol li { position: relative !important; padding-left: 2.5rem !important; margin-bottom: 0.75rem !important; color: rgba(214, 211, 209, 0.75) !important; font-size: 1.05rem !important; counter-increment: blood-counter !important; }
.single article .text-bone-50\/85 ol li::before { content: counter(blood-counter, decimal-leading-zero) !important; position: absolute !important; left: 0 !important; top: 0.1em !important; font-family: 'Cinzel', serif !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #8B0000 !important; text-shadow: 0 0 10px rgba(139,0,0,0.3) !important; }

/* --- CITAS (Blockquote) --- */
.single article .text-bone-50\/85 blockquote { position: relative !important; margin: 2.5rem 0 !important; padding: 1.5rem 2rem !important; background: rgba(139, 0, 0, 0.05) !important; border-left: 3px solid #8B0000 !important; border-radius: 0 8px 8px 0 !important; }
.single article .text-bone-50\/85 blockquote p { font-family: 'Playfair Display', serif !important; font-size: 1.25rem !important; font-style: italic !important; color: rgba(168, 162, 158, 0.9) !important; margin-bottom: 0 !important; line-height: 1.7 !important; }
.single article .text-bone-50\/85 blockquote cite { display: block !important; margin-top: 1rem !important; font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; font-style: normal !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: rgba(120, 113, 108, 0.6) !important; }

/* --- SEPARADORES (<hr>) --- */
.single article .text-bone-50\/85 hr { border: none !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(139,0,0,0.4), rgba(204,0,0,0.2), rgba(139,0,0,0.4), transparent) !important; margin: 3rem 0 !important; }

/* --- CÓDIGO FUENTE (<code> y <pre>) --- */
.single article .text-bone-50\/85 code { background: rgba(139, 0, 0, 0.1) !important; color: #f87171 !important; padding: 0.15rem 0.5rem !important; border-radius: 4px !important; font-family: 'Courier New', Courier, monospace !important; font-size: 0.9em !important; border: 1px solid rgba(139, 0, 0, 0.15) !important; }
.single article .text-bone-50\/85 pre { background: #0a0a0a !important; border: 1px solid rgba(139, 0, 0, 0.2) !important; border-radius: 8px !important; padding: 1.5rem !important; overflow-x: auto !important; margin-bottom: 1.5rem !important; }
.single article .text-bone-50\/85 pre code { background: transparent !important; border: none !important; padding: 0 !important; color: #d6d3d1 !important; }

/* --- IMÁGENES INSERTADAS --- */
.single article .text-bone-50\/85 img { border-radius: 12px !important; border: 1px solid rgba(139, 0, 0, 0.1) !important; margin: 2rem 0 !important; filter: brightness(0.85) contrast(1.1) !important; transition: filter 0.5s ease !important; }
.single article .text-bone-50\/85 img:hover { filter: brightness(1) contrast(1.1) !important; }

/* --- TABLAS --- */
.single article .text-bone-50\/85 table { width: 100% !important; border-collapse: collapse !important; margin: 2rem 0 !important; font-size: 0.95rem !important; }
.single article .text-bone-50\/85 th, .single article .text-bone-50\/85 td { padding: 0.8rem 1rem !important; border: 1px solid rgba(139, 0, 0, 0.15) !important; text-align: left !important; }
.single article .text-bone-50\/85 th { font-family: 'Cinzel', serif !important; font-weight: 600 !important; color: #e7e5e4 !important; background: rgba(139, 0, 0, 0.08) !important; text-transform: uppercase !important; font-size: 0.85rem !important; letter-spacing: 0.05em !important; }
.single article .text-bone-50\/85 td { color: rgba(214, 211, 209, 0.7) !important; background: rgba(10, 10, 10, 0.5) !important; }
/* ============================================================
   9. ESTILOS DEL POPUP EMERGENTE
   ============================================================ */
#pn-popup-overlay {
  transition: opacity 0.4s ease;
}
#pn-popup-overlay .relative.w-full {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}