/* ============================================
   ELINOR Y SU DIVÁN - ESTILOS PRINCIPALES
   Paleta: Tonos oscuros de vino tinto
   Estética: Vintage Parisina
   ============================================ */

/* Importación de fuentes elegantes */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d0508 0%, #16080c 50%, #0d0508 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    text-align: center;
    animation: preloaderPulse 2s ease-in-out infinite;
}

.preloader-icon {
    font-size: 6.25rem;
    margin-bottom: 1.5rem;
    animation: preloaderBounce 1.5s ease-in-out infinite;
}

.preloader-text {
    font-family: 'Great Vibes', cursive;
    font-size: 3.125rem;
    color: #a08020;
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(160, 128, 32, 0.3);
}

.preloader-bar {
    width: 200px;
    height: 3px;
    background: rgba(160, 128, 32, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.preloader-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #a08020, #b09030);
    border-radius: 3px;
    animation: preloaderProgress 2s ease-in-out infinite;
}

@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes preloaderBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes preloaderProgress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Reducir motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .preloader {
        display: none;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background: var(--vino-elegante);
    color: var(--crema-vintage);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    z-index: 100000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--dorado-antiguo);
    outline-offset: 2px;
}

/* Focus visible mejorado */
*:focus-visible {
    outline: 3px solid var(--dorado-antiguo);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Focus para elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    box-shadow: 0 0 0 4px rgba(160, 128, 32, 0.3);
}

/* Ocultar elementos visualmente pero mantenerlos para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   VARIABLES DE COLOR - PALETA VINO TINTO
   ============================================ */
:root {
    /* Colores principales - Vino tinto OSCURECIDOS */
    --vino-oscuro: #0d0508;
    --vino-profundo: #16080c;
    --vino-rico: #240a10;
    --vino-elegante: #3d101a;
    --vino-tinto: #521524;
    --vino-claro: #6b1c2e;
    --vino-rosa: #8b3a4d;
    
    /* Tonos dorados y crema para contraste - ATENUADOS */
    --dorado-antiguo: #a08020;
    --dorado-suave: #b09030;
    --crema-vintage: #c9b8a0;
    --crema-oscura: #b0a080;
    
    /* Tonos de texto - OSCURECIDOS */
    --texto-principal: #c9b8a0;
    --texto-secundario: #a08020;
    --texto-muted: #6b5a4a;
    
    /* Sombras y efectos - MÁS INTENSOS */
    --sombra-suave: 0 4px 20px rgba(0, 0, 0, 0.6);
    --sombra-profunda: 0 8px 40px rgba(0, 0, 0, 0.8);
    --sombra-vino: 0 0 30px rgba(61, 16, 26, 0.5);
    
    /* Transiciones */
    --transicion-rapida: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-elegante: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transicion-lenta: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   RESET Y ESTILOS BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cormorant Garamond', serif;
    background-color: var(--vino-oscuro);
    color: var(--texto-principal);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--vino-oscuro);
}

::-webkit-scrollbar-thumb {
    background: var(--vino-rico);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vino-elegante);
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.titulo-elegante {
    font-family: 'Great Vibes', cursive;
    font-size: 4.375rem;
    color: var(--dorado-antiguo);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.texto-pluma {
    font-family: 'Great Vibes', cursive;
    font-size: 1.875rem;
    color: var(--crema-vintage);
    font-style: italic;
    letter-spacing: 0.05em;
}

.cita-poetica {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.625rem;
    color: var(--vino-rosa);
    text-align: center;
    padding: 1.5rem 2rem;
    border-left: 3px solid var(--vino-elegante);
    border-right: 3px solid var(--vino-elegante);
    margin: 2rem auto;
    max-width: 800px;
    position: relative;
}

.cita-poetica::before,
.cita-poetica::after {
    content: '"';
    font-family: 'Playfair Display', serif;
    font-size: 3.75rem;
    color: var(--vino-elegante);
    position: absolute;
    opacity: 0.5;
}

.cita-poetica::before {
    top: -10px;
    left: 10px;
}

.cita-poetica::after {
    bottom: -30px;
    right: 10px;
}

/* ============================================
   HEADER Y NAVEGACIÓN
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(13, 5, 8, 0.85) 0%, rgba(13, 5, 8, 0.6) 60%, transparent 100%);
    backdrop-filter: blur(8px);
    transition: var(--transicion-elegante);
}

.header.scrolled {
    background: rgba(13, 5, 8, 0.99);
    padding: 1rem 3rem;
    box-shadow: var(--sombra-suave);
}

.logo {
    font-family: 'Great Vibes', cursive;
    font-size: 2.75rem;
    color: var(--dorado-antiguo);
    text-decoration: none;
    position: relative;
    transition: var(--transicion-rapida);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dorado-antiguo), var(--vino-rosa));
    transition: var(--transicion-elegante);
}

.logo:hover {
    color: var(--dorado-suave);
    transform: scale(1.05);
}

.logo:hover::after {
    width: 100%;
}

/* Menú de navegación */
.nav-menu {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-link {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--crema-vintage);
    text-decoration: none;
    position: relative;
    padding: 0.5rem 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: var(--transicion-rapida);
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--dorado-antiguo);
    transition: var(--transicion-elegante);
    transform: translateX(-50%);
}

.nav-link::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--dorado-antiguo);
    transition: var(--transicion-elegante);
    transform: translateX(-50%);
}

.nav-link:hover {
    color: var(--dorado-antiguo);
    letter-spacing: 0.15em;
}

.nav-link:hover::before,
.nav-link:hover::after {
    width: 100%;
}

/* ============================================
   SECCIÓN HERO
   ============================================ */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/silueta-divan.png');
    background-size: cover;
    background-position: center center;
    opacity: 1;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(13, 5, 8, 0.1) 0%,
        rgba(22, 8, 12, 0.15) 50%,
        rgba(13, 5, 8, 0.35) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 3rem 4rem;
    animation: fadeInUp 1.5s ease-out;
    background: rgba(13, 5, 8, 0.6);
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(160, 128, 32, 0.15);
}

.hero-title {
    font-family: 'Great Vibes', cursive;
    font-size: 7.5rem;
    color: var(--dorado-antiguo);
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 0, 0, 0.7),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.3s forwards;
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.875rem;
    color: var(--crema-oscura);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.6s forwards;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-indicator i {
    font-size: 2.5rem;
    color: var(--dorado-antiguo);
    opacity: 0.7;
}

/* ============================================
   SECCIÓN ENSAYOS
   ============================================ */
.section-ensayos {
    padding: 6rem 2rem;
    position: relative;
    background: linear-gradient(180deg, var(--vino-oscuro) 0%, var(--vino-profundo) 50%, var(--vino-oscuro) 100%);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.75rem;
    color: var(--dorado-antiguo);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vino-elegante), transparent);
}

.section-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 3rem;
    display: block;
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(160, 128, 32, 0.1);
    transition: var(--transicion-elegante);
    transform: perspective(1000px) rotateX(2deg);
}

.section-image:hover {
    transform: perspective(1000px) rotateX(0deg) scale(1.03);
    box-shadow: 
        0 35px 100px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(160, 128, 32, 0.2),
        0 0 0 2px rgba(160, 128, 32, 0.3);
}

/* Grid de ensayos */
.ensayos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.ensayo-card {
    background: linear-gradient(145deg, var(--vino-profundo) 0%, rgba(36, 10, 16, 0.8) 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: var(--transicion-elegante);
    cursor: pointer;
    position: relative;
    border: 1px solid rgba(61, 16, 26, 0.4);
}

.ensayo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 10, 15, 0.8) 100%);
    opacity: 0;
    transition: var(--transicion-rapida);
    z-index: 1;
}

.ensayo-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: var(--sombra-vino), 0 20px 60px rgba(0, 0, 0, 0.5);
    border-color: var(--dorado-antiguo);
}

.ensayo-card:hover::before {
    opacity: 1;
}

.ensayo-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: var(--transicion-lenta);
}

.ensayo-card:hover .ensayo-image {
    transform: scale(1.15);
    filter: brightness(1.1);
}

.ensayo-content {
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.ensayo-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #c0392b;
    margin-bottom: 1rem;
    transition: var(--transicion-rapida);
    text-shadow: 0 0 10px rgba(192, 57, 43, 0.3);
    font-weight: 600;
}

.ensayo-card:hover .ensayo-title {
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

.ensayo-excerpt {
    font-size: 1.4375rem;
    color: #f5e6d3;
    line-height: 1.9;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

.ensayo-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(107, 28, 46, 0.5);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1875rem;
    color: var(--texto-muted);
    transition: var(--transicion-rapida);
}

.ensayo-card:hover .stat-item {
    color: var(--vino-rosa);
}

.stat-item i {
    font-size: 1.25rem;
    transition: var(--transicion-rapida);
}

.stat-item:hover i {
    color: var(--dorado-antiguo);
    transform: scale(1.2);
}

/* Botón Leer más */
.btn-leer-mas {
    display: inline-block;
    margin-top: 3rem;
    padding: 1.2rem 4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--dorado-antiguo);
    text-decoration: none;
    border: 2px solid var(--vino-elegante);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
    cursor: pointer;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btn-leer-mas::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.3), transparent);
    transition: var(--transicion-lenta);
}

.btn-leer-mas::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(201, 162, 39, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-leer-mas:hover {
    background: linear-gradient(135deg, var(--vino-elegante) 0%, var(--vino-rico) 100%);
    color: var(--crema-vintage);
    border-color: var(--dorado-antiguo);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 20px 40px rgba(107, 28, 46, 0.5),
        0 0 30px rgba(160, 128, 32, 0.3),
        inset 0 0 20px rgba(160, 128, 32, 0.1);
    letter-spacing: 0.2em;
}

.btn-leer-mas:hover::before {
    left: 100%;
}

.btn-leer-mas:hover::after {
    width: 300px;
    height: 300px;
}

.btn-leer-mas:active {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(107, 28, 46, 0.4);
}

/* Efecto de brillo pulsante en el botón */
.btn-leer-mas {
    animation: btn-glow-pulse 3s ease-in-out infinite;
}

@keyframes btn-glow-pulse {
    0%, 100% {
        box-shadow: 
            0 5px 15px rgba(107, 28, 46, 0.3),
            0 0 0 1px rgba(160, 128, 32, 0.1);
    }
    50% {
        box-shadow: 
            0 8px 25px rgba(107, 28, 46, 0.4),
            0 0 20px rgba(160, 128, 32, 0.2),
            0 0 0 1px rgba(160, 128, 32, 0.2);
    }
}

/* ============================================
   Buscador
   ============================================ */
.search-container {
    max-width: 600px;
    margin: 2rem auto 3rem;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--crema-vintage);
    background: rgba(22, 8, 12, 0.9);
    border: 2px solid var(--vino-rico);
    border-radius: 50px;
    outline: none;
    transition: var(--transicion-elegante);
}

.search-input::placeholder {
    color: var(--texto-muted);
}

.search-input:focus {
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.15);
    background: rgba(22, 8, 12, 0.98);
}

.search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--vino-rico);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion-rapida);
}

.search-btn:hover {
    background: var(--dorado-antiguo);
    transform: translateY(-50%) scale(1.1);
}

.search-btn i {
    color: var(--crema-vintage);
    font-size: 1.25rem;
}

/* ============================================
   SECCIÓN AUDIONARRACIONES
   ============================================ */
.section-audio {
    padding: 6rem 2rem;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-audio .section-header {
    width: 100%;
    margin-bottom: 0;
    position: static;
}

.section-audio .section-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: block;
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(160, 128, 32, 0.1);
}

.texto-audio-container {
    background: rgba(13, 5, 8, 0.95);
    padding: 3rem;
    border-radius: 16px;
    margin-top: 3rem;
    max-width: 900px;
    width: 100%;
    border: 1px solid rgba(160, 128, 32, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
    position: relative;
    z-index: 10;
}

.texto-audio-container .section-title {
    margin-bottom: 1.5rem;
}

.texto-audio-container .cita-poetica {
    margin: 0;
}

.audio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.audio-card {
    background: linear-gradient(145deg, rgba(36, 10, 16, 0.9) 0%, var(--vino-profundo) 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: var(--transicion-elegante);
    position: relative;
    border: 1px solid rgba(61, 16, 26, 0.4);
}

.audio-card:hover {
    transform: translateY(-10px) rotate(1deg);
    box-shadow: var(--sombra-vino), 0 15px 50px rgba(0, 0, 0, 0.4);
    border-color: var(--vino-rosa);
}

.audio-image-container {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.audio-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transicion-lenta);
}

.audio-card:hover .audio-image {
    transform: scale(1.2);
    filter: brightness(0.75) contrast(1.1);
}

/* Botón de play */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 70px;
    height: 70px;
    background: rgba(201, 162, 39, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transicion-elegante);
    z-index: 10;
    backdrop-filter: blur(5px);
}

.audio-card:hover .play-button {
    transform: translate(-50%, -50%) scale(1);
}

.play-button:hover {
    background: var(--dorado-antiguo);
    transform: translate(-50%, -50%) scale(1.1) !important;
    box-shadow: 0 0 30px rgba(201, 162, 39, 0.5);
}

.play-button i {
    color: var(--vino-oscuro);
    font-size: 2.25rem;
    margin-left: 5px;
}

/* Barra de progreso del audio */
.audio-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: var(--transicion-rapida);
}

.audio-card:hover .audio-progress {
    opacity: 1;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--dorado-antiguo), var(--vino-rosa));
    transition: width 0.3s ease;
}

.audio-content {
    padding: 1.5rem;
}

.audio-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: #c0392b;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 10px rgba(192, 57, 43, 0.3);
    font-weight: 600;
}

.audio-card:hover .audio-title {
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

.audio-description {
    font-size: 1.3125rem;
    color: #f5e6d3;
    line-height: 1.7;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

.audio-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 1.125rem;
    color: var(--texto-muted);
}

.audio-stats .stat-item {
    gap: 0.4rem;
}

/* ============================================
   SECCIÓN SOBRE ELINOR
   ============================================ */
.section-sobre {
    padding: 6rem 2rem;
    background: linear-gradient(180deg, var(--vino-oscuro) 0%, var(--vino-profundo) 50%, var(--vino-oscuro) 100%);
    position: relative;
    overflow: hidden;
}

.sobre-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.sobre-imagen {
    flex: 0 0 480px;
    position: relative;
}

.sobre-imagen img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(160, 128, 32, 0.15);
    transition: var(--transicion-elegante);
    border: 4px solid transparent;
}

.sobre-imagen:hover img {
    transform: scale(1.05) rotate(-1deg);
    border-color: var(--dorado-antiguo);
    box-shadow: 
        var(--sombra-vino), 
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(160, 128, 32, 0.25);
}

.sobre-imagen::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid var(--vino-elegante);
    border-radius: 16px;
    z-index: -1;
    transition: var(--transicion-elegante);
}

.sobre-imagen:hover::before {
    top: -20px;
    left: -20px;
    right: 20px;
    bottom: 20px;
    border-color: var(--dorado-antiguo);
}

.sobre-content {
    flex: 1;
    min-width: 300px;
}

.sobre-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.125rem;
    color: var(--dorado-antiguo);
    margin-bottom: 2rem;
    position: relative;
}

.sobre-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--vino-elegante);
}

.sobre-descripcion {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    color: var(--crema-vintage);
    line-height: 2;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: 4rem 2rem 2rem;
    background: linear-gradient(180deg, var(--vino-profundo) 0%, var(--vino-oscuro) 100%);
    border-top: 1px solid rgba(61, 16, 26, 0.5);
    text-align: center;
}

.footer-title {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5rem;
    color: var(--dorado-antiguo);
    margin-bottom: 2rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.social-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--crema-vintage);
    font-size: 1.625rem;
    text-decoration: none;
    transition: var(--transicion-elegante);
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--dorado-antiguo);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transicion-elegante);
    z-index: -1;
}

.social-link:hover {
    border-color: var(--dorado-antiguo);
    color: var(--vino-oscuro);
    transform: translateY(-5px) rotate(360deg);
}

.social-link:hover::before {
    width: 100%;
    height: 100%;
}

.footer-copy {
    font-size: 1.1875rem;
    color: var(--texto-muted);
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(107, 28, 46, 0.2);
}

/* ============================================
   MODAL PARA LEER ENSAYOS
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 5, 8, 0.98);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-elegante);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: linear-gradient(145deg, var(--vino-profundo) 0%, var(--vino-rico) 100%);
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 3rem;
    position: relative;
    border: 2px solid var(--vino-elegante);
    box-shadow: var(--sombra-vino), 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.8) translateY(50px);
    transition: var(--transicion-lenta);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: transparent;
    color: var(--crema-vintage);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion-rapida);
}

.modal-close:hover {
    background: var(--vino-elegante);
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: rotate(90deg);
}

.modal-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dorado-antiguo);
    margin-bottom: 1rem;
}

.modal-date {
    font-size: 1.1875rem;
    color: var(--texto-muted);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-text {
    font-size: 1.4375rem;
    line-height: 2;
    color: var(--crema-oscura);
    column-count: 1;
}

.modal-text p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Clases de animación */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: var(--transicion-lenta);
}

/* Las imágenes deben ser visibles siempre */
.ensayo-image,
.audio-image,
.section-image,
.sobre-imagen img {
    opacity: 1 !important;
}

/* Efecto de escritura */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--dorado-antiguo);
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
    display: inline-block;
    width: auto;
    opacity: 1;
}

@keyframes typing {
    from { max-width: 0; }
    to { max-width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--dorado-antiguo); }
}

/* ============================================
   EFECTOS ESPECIALES
   ============================================ */
/* Efecto de viñeta */
.vignette {
    position: relative;
}

.vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(26, 10, 15, 0.6) 100%);
    pointer-events: none;
}

/* Efecto de brillo en hover */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(201, 162, 39, 0.1) 50%,
        transparent 60%
    );
    transform: rotate(45deg);
    transition: var(--transicion-lenta);
    opacity: 0;
}

.shine-effect:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(50%, 50%);
}

/* Partículas de vino (decorativo) */
.wine-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--vino-elegante);
    border-radius: 50%;
    opacity: 0.3;
    animation: float 15s infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .header {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-menu {
        gap: 1.5rem;
    }
    
    .nav-link {
        font-size: 1.1875rem;
    }
    
    .hero-title {
        font-size: 4.375rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .ensayos-grid,
    .audio-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .sobre-container {
        flex-direction: column;
        gap: 2rem;
    }
    
    .sobre-imagen {
        flex: 0 0 auto;
        max-width: 300px;
    }
    
    .modal-content {
        padding: 2rem 1.5rem;
        width: 95%;
    }
    
    .modal-title {
        font-size: 1.875rem;
    }
    
    .cita-poetica {
        font-size: 1.375rem;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 3.125rem;
    }
    
    .logo {
        font-size: 2.25rem;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .titulo-elegante {
        font-size: 3.125rem;
    }
}

/* ============================================
   BOTONES DE ORDENAMIENTO
   ============================================ */
.sort-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem auto 3rem;
    flex-wrap: wrap;
}

.sort-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--crema-vintage);
    margin-right: 0.5rem;
}

.sort-btn {
    padding: 0.8rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    color: var(--crema-vintage);
    background: rgba(36, 10, 16, 0.8);
    border: 2px solid var(--vino-rico);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transicion-elegante);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-btn:hover {
    background: var(--vino-rico);
    border-color: var(--vino-elegante);
    transform: translateY(-2px);
}

.sort-btn.active {
    background: var(--vino-elegante);
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
}

.sort-btn i {
    font-size: 1.125rem;
}

/* ============================================
   CONTROLES DE FILTRADO
   ============================================ */
.filtros-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem auto 3rem;
    max-width: 1000px;
    padding: 0 1rem;
}

.search-wrapper {
    display: flex;
    width: 100%;
    max-width: 500px;
    position: relative;
}

.search-wrapper .search-input {
    width: 100%;
    padding: 1rem 3.5rem 1rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--crema-vintage);
    background: rgba(22, 8, 12, 0.9);
    border: 2px solid var(--vino-rico);
    border-radius: 50px;
    outline: none;
    transition: var(--transicion-elegante);
}

.search-wrapper .search-input:focus {
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.15);
}

.search-wrapper .search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--vino-rico);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion-rapida);
}

.search-wrapper .search-btn:hover {
    background: var(--dorado-antiguo);
    transform: translateY(-50%) scale(1.1);
}

.sort-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
}

.sort-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--crema-vintage);
    margin-right: 0.5rem;
}

/* ============================================
   COLORES DE ICONOS
   ============================================ */
.stat-item .fa-eye,
.stat-item .fa-play-circle {
    color: #5dade2;
    transition: var(--transicion-rapida);
}

.stat-item:hover .fa-eye,
.stat-item:hover .fa-play-circle {
    color: #85c1e9;
    transform: scale(1.2);
}

.stat-item .fa-heart {
    color: #e74c3c;
    transition: var(--transicion-rapida);
}

.stat-item:hover .fa-heart {
    color: #ec7063;
    transform: scale(1.2);
}

.stat-item .fa-comment {
    color: #58d68d;
    transition: var(--transicion-rapida);
}

.stat-item:hover .fa-comment {
    color: #82e0aa;
    transform: scale(1.2);
}

/* ============================================
   UTILIDADES
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 3rem; }

.hidden { display: none !important; }
.visible { visibility: visible !important; }

/* Efecto de parallax suave */
.parallax {
    will-change: transform;
}

/* ============================================
   MEJORAS 2024 - EFECTOS PREMIUM
   ============================================ */

/* ============================================
   1. EFECTO MÁQUINA DE ESCRIBIR EN TÍTULOS
   ============================================ */
.typewriter-title {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--dorado-antiguo);
    animation: 
        typing-title 2s steps(30, end) forwards,
        blink-caret-title 0.8s step-end infinite;
    width: 0;
}

@keyframes typing-title {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret-title {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--dorado-antiguo); }
}

/* Cursor de máquina de escribir para elementos */
.typing-cursor::after {
    content: '|';
    color: var(--dorado-antiguo);
    animation: cursor-blink 1s infinite;
    margin-left: 2px;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ============================================
   2. ORNAMENTOS DECORATIVOS VINTAGE
   ============================================ */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem auto;
    max-width: 400px;
}

.ornament-divider::before,
.ornament-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dorado-antiguo), transparent);
}

.ornament-divider i {
    color: var(--dorado-antiguo);
    font-size: 1.5rem;
    margin: 0 1rem;
    animation: ornament-pulse 3s ease-in-out infinite;
}

@keyframes ornament-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* ESQUINAS ORNAMENTADAS PREMIUM */
.corner-ornament {
    position: relative;
}

.corner-ornament::before,
.corner-ornament::after,
.corner-ornament-bottom::before,
.corner-ornament-bottom::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--dorado-antiguo);
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.corner-ornament::before {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 10px;
}

.corner-ornament::after {
    top: -5px;
    right: -5px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 10px;
}

.corner-ornament-bottom::before {
    bottom: -5px;
    left: -5px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 10px;
}

.corner-ornament-bottom::after {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 10px;
}

.ensayo-card:hover .corner-ornament::before,
.ensayo-card:hover .corner-ornament::after,
.ensayo-card:hover .corner-ornament-bottom::before,
.ensayo-card:hover .corner-ornament-bottom::after {
    opacity: 1;
    width: 60px;
    height: 60px;
    border-color: var(--dorado-suave);
    border-width: 3px;
    box-shadow: 0 0 15px rgba(160, 128, 32, 0.4);
}

/* Sello de cera */
.wax-seal {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--vino-tinto), var(--vino-elegante));
    border: 3px solid rgba(160, 128, 32, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
    position: relative;
    box-shadow: 
        inset -5px -5px 15px rgba(0,0,0,0.3),
        inset 5px 5px 15px rgba(255,255,255,0.05),
        0 5px 20px rgba(0,0,0,0.5);
}

.wax-seal::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    border: 1px dashed rgba(160, 128, 32, 0.3);
}

.wax-seal i {
    font-size: 2.5rem;
    color: var(--dorado-antiguo);
    opacity: 0.8;
}

/* ============================================
   3. EFECTO PERGAMINO EN MODAL
   ============================================ */
.modal-content.pergamino {
    background: 
        linear-gradient(135deg, rgba(201, 184, 160, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #1a1410 0%, #0f0c09 100%);
    border: 2px solid rgba(160, 128, 32, 0.3);
    box-shadow: 
        inset 0 0 100px rgba(0,0,0,0.5),
        0 20px 60px rgba(0,0,0,0.8);
    position: relative;
}

.modal-content.pergamino::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(160, 128, 32, 0.02) 28px,
            rgba(160, 128, 32, 0.02) 29px
        );
    pointer-events: none;
    border-radius: 20px;
}

.modal-content.pergamino::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(160, 128, 32, 0.15);
    border-radius: 12px;
    pointer-events: none;
}

/* Bordes desgastados del pergamino */
.pergamino-edge {
    position: relative;
}

.pergamino-edge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            rgba(160, 128, 32, 0.3) 10%, 
            rgba(160, 128, 32, 0.3) 90%, 
            transparent 100%
        );
    filter: blur(1px);
}

/* ============================================
   4. BRILLO DORADO ANIMADO EN BORDES
   ============================================ */
.golden-glow {
    position: relative;
    overflow: hidden;
}

.golden-glow::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(160, 128, 32, 0.4) 50%,
        transparent 60%
    );
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    animation: golden-shimmer 3s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.golden-glow:hover::before {
    opacity: 1;
}

@keyframes golden-shimmer {
    0% { background-position: 200% 200%; }
    100% { background-position: -200% -200%; }
}

/* Brillo en tarjetas */
.card-glow {
    position: relative;
}

.card-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(160, 128, 32, 0.1),
        transparent
    );
    transition: left 0.8s ease;
    pointer-events: none;
}

.card-glow:hover::after {
    left: 150%;
}

/* ============================================
   5. MOTAS DE POLVO/LUZ FLOTANTES
   ============================================ */
.dust-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.dust-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 100, 0.9) 0%, rgba(160, 128, 32, 0.4) 40%, transparent 70%);
    box-shadow: 0 0 10px rgba(255, 215, 100, 0.5);
    opacity: 0;
    animation: dust-float 15s infinite ease-in-out;
}

.dust-particle:nth-child(1) { width: 4px; height: 4px; left: 8%; animation-delay: 0s; animation-duration: 12s; }
.dust-particle:nth-child(2) { width: 3px; height: 3px; left: 18%; animation-delay: 1s; animation-duration: 15s; }
.dust-particle:nth-child(3) { width: 5px; height: 5px; left: 28%; animation-delay: 2s; animation-duration: 18s; }
.dust-particle:nth-child(4) { width: 3px; height: 3px; left: 38%; animation-delay: 3s; animation-duration: 14s; }
.dust-particle:nth-child(5) { width: 4px; height: 4px; left: 48%; animation-delay: 4s; animation-duration: 16s; }
.dust-particle:nth-child(6) { width: 3px; height: 3px; left: 58%; animation-delay: 5s; animation-duration: 13s; }
.dust-particle:nth-child(7) { width: 5px; height: 5px; left: 68%; animation-delay: 6s; animation-duration: 17s; }
.dust-particle:nth-child(8) { width: 3px; height: 3px; left: 78%; animation-delay: 7s; animation-duration: 15s; }
.dust-particle:nth-child(9) { width: 4px; height: 4px; left: 88%; animation-delay: 8s; animation-duration: 14s; }
.dust-particle:nth-child(10) { width: 3px; height: 3px; left: 13%; animation-delay: 9s; animation-duration: 16s; }
.dust-particle:nth-child(11) { width: 4px; height: 4px; left: 23%; animation-delay: 10s; animation-duration: 12s; }
.dust-particle:nth-child(12) { width: 3px; height: 3px; left: 33%; animation-delay: 11s; animation-duration: 18s; }
.dust-particle:nth-child(13) { width: 4px; height: 4px; left: 43%; animation-delay: 12s; animation-duration: 14s; }
.dust-particle:nth-child(14) { width: 3px; height: 3px; left: 53%; animation-delay: 13s; animation-duration: 16s; }
.dust-particle:nth-child(15) { width: 5px; height: 5px; left: 63%; animation-delay: 14s; animation-duration: 13s; }

@keyframes dust-float {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    25% {
        transform: translateY(75vh) translateX(30px) rotate(90deg) scale(1);
    }
    50% {
        transform: translateY(50vh) translateX(-20px) rotate(180deg) scale(1.3);
        opacity: 1;
    }
    75% {
        transform: translateY(25vh) translateX(25px) rotate(270deg) scale(1);
    }
    95% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(-10vh) translateX(0) rotate(360deg) scale(0);
        opacity: 0;
    }
}

/* ============================================
   6. INDICADOR DE PROGRESO DE LECTURA
   ============================================ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dorado-antiguo), var(--dorado-suave));
    z-index: 10000;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(160, 128, 32, 0.5);
}

.reading-progress-container {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 200px;
    background: rgba(61, 16, 26, 0.5);
    border-radius: 2px;
    z-index: 999;
    overflow: hidden;
}

.reading-progress-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--dorado-antiguo), var(--vino-rosa));
    border-radius: 2px;
    transition: height 0.1s ease-out;
    box-shadow: 0 0 8px rgba(160, 128, 32, 0.4);
}

/* ============================================
   7. EFECTO PÁGINA VOLTEADA PREMIUM
   ============================================ */
.page-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(225deg, var(--vino-rico) 50%, transparent 50%);
    z-index: 10;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top right;
    cursor: pointer;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
}

.page-corner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(225deg, rgba(160, 128, 32, 0.3) 50%, transparent 50%);
    transition: all 0.4s ease;
}

.ensayo-card:hover .page-corner,
.audio-card:hover .page-corner {
    transform: rotateY(-45deg) rotateX(15deg) translateZ(10px);
    width: 70px;
    height: 70px;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.4);
}

.page-corner-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent var(--dorado-antiguo) transparent transparent;
    opacity: 0.4;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ensayo-card:hover .page-corner-fold,
.audio-card:hover .page-corner-fold {
    border-width: 0 60px 60px 0;
    opacity: 0.7;
    filter: drop-shadow(0 0 10px rgba(160, 128, 32, 0.5));
}

/* ============================================
   8. MEJOR TIPOGRAFÍA EN SOBRE ELINOR
   ============================================ */
.sobre-descripcion {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.625rem;
    color: var(--crema-vintage);
    line-height: 2;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    padding: 2rem;
    background: rgba(22, 8, 12, 0.4);
    border-radius: 12px;
    border-left: 3px solid var(--dorado-antiguo);
}

.sobre-descripcion::before {
    content: '"';
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    color: var(--dorado-antiguo);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: 10px;
    line-height: 1;
}

.sobre-descripcion::after {
    content: '"';
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    color: var(--dorado-antiguo);
    opacity: 0.3;
    position: absolute;
    bottom: -30px;
    right: 10px;
    line-height: 1;
}

/* ============================================
   9. TRANSICIONES ENTRE PÁGINAS
   ============================================ */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--vino-oscuro);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.page-transition.active {
    opacity: 1;
}

.page-transition-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;
}

.page-transition-curtain::before,
.page-transition-curtain::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--vino-oscuro);
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

.page-transition-curtain::before {
    left: 0;
    transform: translateX(-100%);
}

.page-transition-curtain::after {
    right: 0;
    transform: translateX(100%);
}

.page-transition-curtain.active::before {
    transform: translateX(0);
}

.page-transition-curtain.active::after {
    transform: translateX(0);
}

/* Efecto de fundido al cargar */
.fade-in-page {
    animation: fadeInPage 1s ease-out;
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   EFECTOS ADICIONALES PREMIUM
   ============================================ */

/* Efecto de sombra de texto dorado */
.golden-text-shadow {
    text-shadow: 
        0 0 5px rgba(160, 128, 32, 0.3),
        0 0 10px rgba(160, 128, 32, 0.2),
        0 0 20px rgba(160, 128, 32, 0.1);
}

/* Efecto de profundidad en imágenes */
.image-depth {
    position: relative;
    overflow: hidden;
}

.image-depth::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(13, 5, 8, 0.6) 100%
    );
    pointer-events: none;
}

/* Efecto de iluminación al hover */
.hover-illuminate {
    transition: var(--transicion-elegante);
}

.hover-illuminate:hover {
    filter: brightness(1.1);
}

/* Líneas decorativas animadas */
.animated-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dorado-antiguo), transparent);
    background-size: 200% 100%;
    animation: line-shimmer 3s linear infinite;
}

@keyframes line-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Efecto de latido sutil */
.subtle-pulse {
    animation: subtle-pulse 4s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Efecto de reflejo en tarjetas */
.card-reflection {
    position: relative;
}

.card-reflection::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 5%;
    right: 5%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, transparent 70%);
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.card-reflection:hover::before {
    opacity: 1;
}

/* ============================================
   BOTONES DE INTERACCIÓN (LIKE, ETC.)
   ============================================ */

.btn-like {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-like:hover {
    background: rgba(231, 76, 60, 0.1);
    transform: scale(1.2);
}

.btn-like:active {
    transform: scale(0.95);
}

.btn-like.liked {
    animation: heartBeat 0.5s ease;
}

.btn-like.liked i {
    color: #e74c3c;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Contador de estadísticas animado */
.stat-item span {
    transition: all 0.3s ease;
}

.stat-item span.updated {
    animation: countUpdate 0.5s ease;
    color: #58d68d;
}

@keyframes countUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #58d68d; }
    100% { transform: scale(1); }
}

/* ============================================
   MEJORAS DE HOVER PREMIUM
   ============================================ */

/* Efecto MAGNÉTICO en tarjetas */
.ensayo-card, .audio-card {
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.ensayo-card::before, .audio-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(160, 128, 32, 0.3) 50%,
        transparent 70%
    );
    background-size: 200% 200%;
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: borderShine 3s linear infinite;
}

@keyframes borderShine {
    0% { background-position: 200% 200%; }
    100% { background-position: -200% -200%; }
}

.ensayo-card:hover::before, .audio-card:hover::before {
    opacity: 1;
}

.ensayo-card:hover, .audio-card:hover {
    transform: translateY(-25px) scale(1.03) rotateX(5deg);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(160, 128, 32, 0.25),
        inset 0 0 30px rgba(160, 128, 32, 0.05);
}

/* Efecto de brillo interno en hover */
.ensayo-card::after, .audio-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transition: left 0.8s ease;
    pointer-events: none;
}

.ensayo-card:hover::after, .audio-card:hover::after {
    left: 150%;
}

/* EFECTOS DE IMÁGENES PREMIUM */
.ensayo-image, .audio-image, .section-image {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.ensayo-card:hover .ensayo-image {
    transform: scale(1.12) rotate(1deg);
    filter: brightness(1.2) contrast(1.1) saturate(1.1);
}

.audio-card:hover .audio-image {
    transform: scale(1.18) rotate(-1deg);
    filter: brightness(0.9) contrast(1.15);
}

.section-image:hover {
    transform: scale(1.05) rotate(0deg);
    filter: brightness(1.1);
}

/* EFECTO DE ZOOM EN IMÁGENES */
.ensayo-image-container, .audio-image-container {
    overflow: hidden;
    position: relative;
}

.ensayo-image-container::after,
.audio-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 50%,
        rgba(13, 5, 8, 0.6) 100%
    );
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.ensayo-card:hover .ensayo-image-container::after,
.audio-card:hover .audio-image-container::after {
    opacity: 0.4;
}

/* Efecto RIPPLE PREMIUM en botones */
.btn-leer-mas, .sort-btn, .search-btn, .nav-link, .social-link {
    position: relative;
    overflow: hidden;
}

.btn-leer-mas::after, .sort-btn::after, .search-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.btn-leer-mas:hover::after, .sort-btn:hover::after, .search-btn:hover::after {
    width: 300px;
    height: 300px;
    opacity: 1;
}

.btn-leer-mas:active::after, .sort-btn:active::after, .search-btn:active::after {
    width: 400px;
    height: 400px;
    opacity: 0.5;
    transition: width 0.2s ease, height 0.2s ease;
}

/* Efecto de focus mejorado para inputs */
.search-input:focus {
    box-shadow: 
        0 0 0 3px rgba(160, 128, 32, 0.2),
        0 0 20px rgba(160, 128, 32, 0.15);
    border-color: var(--dorado-antiguo);
}

/* Indicador visual de elemento seleccionado */
.ensayo-card:active, .audio-card:active {
    transform: translateY(-10px) scale(0.98);
}

/* Efecto de loading skeleton */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--vino-profundo) 25%, var(--vino-rico) 50%, var(--vino-profundo) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* TOOLTIPS ELEGANTES */
.stat-item, .nav-link, .social-link, .btn-leer-mas {
    position: relative;
}

.stat-item::before, 
[data-tooltip]::before {
    content: attr(data-label) attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, var(--vino-elegante) 0%, var(--vino-rico) 100%);
    color: var(--crema-vintage);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(160, 128, 32, 0.3);
    z-index: 100;
}

.stat-item::after,
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 8px solid transparent;
    border-top-color: var(--vino-elegante);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-item:hover::before,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.stat-item:hover::after,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Efecto de parallax suave en scroll */
.parallax-element {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* MODAL PREMIUM */
.modal-content {
    animation: modalSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(145deg, #1a1410 0%, #0f0c09 100%);
    border: 2px solid rgba(160, 128, 32, 0.3);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(160, 128, 32, 0.1),
        inset 0 0 40px rgba(160, 128, 32, 0.03);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(50px) rotateX(10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0);
    }
}

.modal-close {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-close:hover {
    background: var(--vino-elegante);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.4);
}

/* Efecto de hover en los iconos de stats */
.stat-item {
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-3px);
}

/* Efecto de gradiente animado en bordes */
@keyframes borderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-border {
    position: relative;
    background: var(--vino-profundo);
    border-radius: 12px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--dorado-antiguo), var(--vino-tinto), var(--dorado-antiguo));
    background-size: 200% 200%;
    border-radius: 14px;
    z-index: -1;
    animation: borderGradient 3s ease infinite;
}

/* Efecto de pulso en elementos interactivos */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(160, 128, 32, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(160, 128, 32, 0); }
}

.pulse-effect:hover {
    animation: pulse-glow 1.5s infinite;
}

/* Mejoras en navegación */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dorado-antiguo), var(--vino-rosa));
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* GLASSMORPHISM PREMIUM */
.glass-effect {
    background: linear-gradient(
        135deg,
        rgba(13, 5, 8, 0.75) 0%,
        rgba(22, 8, 12, 0.65) 50%,
        rgba(13, 5, 8, 0.75) 100%
    );
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(160, 128, 32, 0.15);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 20px 50px rgba(0, 0, 0, 0.4);
}

/* EFECTO SPOTLIGHT en secciones */
.section-ensayos::after,
.section-audio::after,
.section-sobre::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 100%;
    background: radial-gradient(
        ellipse at center top,
        rgba(160, 128, 32, 0.03) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

/* EFECTO DE LUZ DORADA PULSANTE */
@keyframes goldenPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(160, 128, 32, 0.1),
            0 0 40px rgba(160, 128, 32, 0.05);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(160, 128, 32, 0.2),
            0 0 60px rgba(160, 128, 32, 0.1);
    }
}

.section-title {
    animation: goldenPulse 4s ease-in-out infinite;
}

/* Transiciones suaves entre páginas */
.page-transition {
    animation: pageFadeIn 0.5s ease-out;
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   MEJORAS VISUALES ADICIONALES 2024
   ============================================ */

/* Efecto de iluminación dorada en hover para títulos */
.section-title {
    text-shadow: 
        0 0 10px rgba(160, 128, 32, 0.1),
        0 0 20px rgba(160, 128, 32, 0.05);
}

.section-title:hover {
    text-shadow: 
        0 0 15px rgba(160, 128, 32, 0.3),
        0 0 30px rgba(160, 128, 32, 0.15);
}

/* CITAS POÉTICAS PREMIUM */
.cita-poetica {
    font-size: 1.875rem;
    padding: 2.5rem 3.5rem;
    background: linear-gradient(
        135deg, 
        rgba(160, 128, 32, 0.08) 0%, 
        rgba(22, 8, 12, 0.5) 30%,
        rgba(22, 8, 12, 0.5) 70%,
        rgba(160, 128, 32, 0.08) 100%
    );
    border-radius: 16px;
    box-shadow: 
        inset 0 0 40px rgba(160, 128, 32, 0.08),
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(160, 128, 32, 0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.cita-poetica::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 6.25rem;
    color: rgba(160, 128, 32, 0.2);
    line-height: 1;
}

.cita-poetica::after {
    content: '"';
    position: absolute;
    bottom: -10px;
    right: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 6.25rem;
    color: rgba(160, 128, 32, 0.2);
    line-height: 1;
}

.cita-poetica:hover {
    transform: translateY(-5px);
    box-shadow: 
        inset 0 0 50px rgba(160, 128, 32, 0.12),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(160, 128, 32, 0.15);
}

/* Efecto de profundidad en las tarjetas */
.ensayo-card, .audio-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.ensayo-card:hover, .audio-card:hover {
    transform: translateY(-15px) rotateX(2deg);
}

/* BOTÓN DE PLAY PREMIUM */
.play-button {
    width: 85px;
    height: 85px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.95) 0%, rgba(160, 128, 32, 0.95) 100%);
    box-shadow: 
        0 0 0 5px rgba(160, 128, 32, 0.3),
        0 15px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(201, 162, 39, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: playPulse 2s ease-in-out infinite;
}

@keyframes playPulse {
    0%, 100% {
        box-shadow: 
            0 0 0 5px rgba(160, 128, 32, 0.3),
            0 15px 40px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(201, 162, 39, 0.3);
    }
    50% {
        box-shadow: 
            0 0 0 8px rgba(160, 128, 32, 0.4),
            0 20px 50px rgba(0, 0, 0, 0.6),
            0 0 50px rgba(201, 162, 39, 0.5);
    }
}

.play-button:hover {
    background: linear-gradient(135deg, rgba(212, 184, 74, 0.98) 0%, rgba(201, 162, 39, 0.98) 100%);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 
        0 0 0 8px rgba(160, 128, 32, 0.5),
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(201, 162, 39, 0.6);
}

.play-button:active {
    transform: translate(-50%, -50%) scale(1.05);
}

.play-button i {
    font-size: 2.75rem;
    transition: transform 0.3s ease;
}

.play-button:hover i {
    transform: scale(1.1);
}

/* HEADER PREMIUM */
.header {
    padding: 2rem 4rem;
    transition: all 0.4s ease;
}

.header:hover {
    background: linear-gradient(to bottom, rgba(13, 5, 8, 0.95) 0%, rgba(13, 5, 8, 0.8) 100%);
}

.logo {
    font-size: 3.125rem;
    text-shadow: 
        0 0 10px rgba(160, 128, 32, 0.3),
        0 0 30px rgba(160, 128, 32, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo:hover {
    text-shadow: 
        0 0 20px rgba(160, 128, 32, 0.5),
        0 0 40px rgba(160, 128, 32, 0.3),
        0 0 60px rgba(160, 128, 32, 0.15);
    transform: scale(1.05);
}

/* NAVEGACIÓN PREMIUM */
.nav-link {
    font-size: 1.5rem;
    padding: 0.8rem 0;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dorado-antiguo), transparent);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateX(-50%);
}

.nav-link:hover::before {
    width: 100%;
}

.nav-link:hover {
    color: var(--dorado-suave);
    letter-spacing: 0.15em;
}

/* Hero sin viñeta para mejor visibilidad de la imagen */

/* Mejorar el scroll indicator */
.scroll-indicator {
    bottom: 4rem;
}

.scroll-indicator i {
    font-size: 3.125rem;
    animation: bounce 2s infinite, glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(160, 128, 32, 0.3);
        opacity: 0.7;
    }
    50% { 
        text-shadow: 0 0 20px rgba(160, 128, 32, 0.6), 0 0 40px rgba(160, 128, 32, 0.3);
        opacity: 1;
    }
}

/* FOOTER PREMIUM */
.footer {
    padding: 5rem 2rem 3rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 128, 32, 0.4), transparent);
}

.footer-title {
    font-size: 3.125rem;
    text-shadow: 
        0 0 20px rgba(160, 128, 32, 0.3),
        0 0 40px rgba(160, 128, 32, 0.15);
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(160, 128, 32, 0.3),
            0 0 40px rgba(160, 128, 32, 0.15);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(160, 128, 32, 0.5),
            0 0 60px rgba(160, 128, 32, 0.25);
    }
}

/* ENLACES SOCIALES PREMIUM */
.social-link {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--dorado-antiguo) 0%, var(--vino-tinto) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
}

.social-link:hover {
    transform: translateY(-8px) scale(1.15) rotate(360deg);
    border-color: var(--dorado-antiguo);
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(160, 128, 32, 0.4);
}

.social-link:hover::before {
    opacity: 1;
}

.social-link:hover i {
    color: var(--vino-oscuro);
}

.social-link i {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

/* Efecto de iluminación en las secciones */
.section-ensayos::before,
.section-audio::before,
.section-sobre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 128, 32, 0.3), transparent);
}

/* Mejorar el buscador */
.search-container {
    max-width: 700px;
}

.search-input {
    padding: 1.2rem 4rem 1.2rem 2rem;
    font-size: 1.5rem;
}

.search-btn {
    width: 45px;
    height: 45px;
}

/* Mejorar el modal */
.modal-content {
    padding: 4rem;
}

.modal-image {
    height: 400px;
    border-radius: 16px;
}

.modal-title {
    font-size: 3.125rem;
}

/* SELLO DE CERA PREMIUM */
.wax-seal {
    width: 100px;
    height: 100px;
    animation: seal-glow 3s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wax-seal:hover {
    transform: scale(1.1) rotate(10deg);
    animation: seal-glow-fast 1s ease-in-out infinite;
}

@keyframes seal-glow {
    0%, 100% { 
        box-shadow: 
            inset -5px -5px 15px rgba(0,0,0,0.3),
            inset 5px 5px 15px rgba(255,255,255,0.05),
            0 5px 20px rgba(0,0,0,0.5),
            0 0 20px rgba(139, 38, 58, 0.2);
    }
    50% { 
        box-shadow: 
            inset -5px -5px 15px rgba(0,0,0,0.3),
            inset 5px 5px 15px rgba(255,255,255,0.05),
            0 5px 20px rgba(0,0,0,0.5),
            0 0 50px rgba(139, 38, 58, 0.5);
    }
}

@keyframes seal-glow-fast {
    0%, 100% { 
        box-shadow: 
            inset -5px -5px 15px rgba(0,0,0,0.3),
            inset 5px 5px 15px rgba(255,255,255,0.05),
            0 5px 20px rgba(0,0,0,0.5),
            0 0 30px rgba(139, 38, 58, 0.3);
    }
    50% { 
        box-shadow: 
            inset -5px -5px 15px rgba(0,0,0,0.3),
            inset 5px 5px 15px rgba(255,255,255,0.05),
            0 5px 20px rgba(0,0,0,0.5),
            0 0 60px rgba(139, 38, 58, 0.6);
    }
}

.wax-seal i {
    font-size: 3.125rem;
    transition: all 0.3s ease;
}

.wax-seal:hover i {
    transform: scale(1.1);
}

/* ESTADÍSTICAS PREMIUM */
.ensayo-stats, .audio-stats {
    gap: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(160, 128, 32, 0.15);
}

.stat-item {
    font-size: 1.375rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: rgba(13, 5, 8, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.stat-item:hover {
    background: rgba(160, 128, 32, 0.15);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.stat-item i {
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.stat-item:hover i {
    transform: scale(1.2);
}

.stat-item.stat-views:hover i { color: #85c1e9; }
.stat-item.stat-likes:hover i { color: #ec7063; }
.stat-item.stat-comments:hover i { color: #82e0aa; }

/* ORNAMENTOS PREMIUM */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem auto;
    max-width: 400px;
    position: relative;
}

.ornament-divider::before,
.ornament-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dorado-antiguo), transparent);
    animation: lineShimmer 3s linear infinite;
    background-size: 200% 100%;
}

@keyframes lineShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ornament-divider i {
    font-size: 2.25rem;
    color: var(--dorado-antiguo);
    margin: 0 1.5rem;
    animation: ornament-glow 2s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes ornament-glow {
    0%, 100% { 
        text-shadow: 
            0 0 5px rgba(160, 128, 32, 0.4),
            0 0 10px rgba(160, 128, 32, 0.2);
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        text-shadow: 
            0 0 15px rgba(160, 128, 32, 0.7),
            0 0 30px rgba(160, 128, 32, 0.4);
        opacity: 1;
        transform: scale(1.2);
    }
}

.ornament-divider:hover i {
    transform: scale(1.4) rotate(15deg);
    color: var(--dorado-suave);
}

/* Mejorar el botón "Leer más" */
.btn-leer-mas {
    padding: 1.2rem 4rem;
    font-size: 1.625rem;
    letter-spacing: 0.15em;
}

/* Efecto de profundidad en el contenedor sobre Elinor */
.sobre-container {
    gap: 5rem;
    max-width: 1200px;
}

/* Mejorar la descripción de Elinor */
.sobre-descripcion {
    font-size: 1.75rem;
    padding: 2.5rem;
}

/* Divisor del hero */
.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    gap: 1rem;
}

.hero-divider span {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dorado-antiguo), transparent);
}

.hero-divider i {
    color: var(--dorado-antiguo);
    font-size: 1.875rem;
    animation: feather-float 3s ease-in-out infinite;
}

@keyframes feather-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

/* ============================================
   MEJORAS 2024 - NUEVAS FUNCIONALIDADES
   ============================================ */

/* ============================================
   1. BUSCADOR GLOBAL EN HEADER
   ============================================ */
.header-search {
    position: relative;
    margin-left: auto;
    margin-right: 1.5rem;
}

.search-toggle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: rgba(22, 8, 12, 0.8);
    color: var(--crema-vintage);
    font-size: 1.375rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-toggle:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.3);
}

.search-panel {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 350px;
    background: linear-gradient(145deg, rgba(22, 8, 12, 0.98) 0%, rgba(13, 5, 8, 0.98) 100%);
    border: 2px solid var(--vino-elegante);
    border-radius: 16px;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1001;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(160, 128, 32, 0.15);
}

.search-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.search-panel::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 15px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--vino-elegante);
}

.search-input-global {
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--crema-vintage);
    background: rgba(36, 10, 16, 0.8);
    border: 2px solid var(--vino-rico);
    border-radius: 50px;
    outline: none;
    transition: all 0.3s ease;
}

.search-input-global:focus {
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.2);
}

.search-input-global::placeholder {
    color: var(--texto-muted);
}

.search-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--vino-rico);
    color: var(--crema-vintage);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close:hover {
    background: var(--dorado-antiguo);
    color: var(--vino-oscuro);
    transform: rotate(90deg);
}

.search-results {
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(160, 128, 32, 0.1);
}

.search-result-item:hover {
    background: rgba(160, 128, 32, 0.1);
    transform: translateX(5px);
}

.search-result-item h4 {
    color: var(--dorado-antiguo);
    font-size: 1.375rem;
    margin-bottom: 0.3rem;
}

.search-result-item p {
    color: var(--texto-muted);
    font-size: 1.125rem;
}

/* ============================================
   2. MENÚ HAMBURGUESA MÓVIL
   ============================================ */
.menu-toggle {
    display: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: rgba(22, 8, 12, 0.8);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1002;
}

.menu-toggle:hover {
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.3);
}

.menu-bar {
    width: 20px;
    height: 2px;
    background: var(--crema-vintage);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.active .menu-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: var(--dorado-antiguo);
}

.menu-toggle.active .menu-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .menu-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
    background: var(--dorado-antiguo);
}

/* ============================================
   3. NOTIFICACIONES TOAST
   ============================================ */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

.toast {
    background: linear-gradient(145deg, rgba(22, 8, 12, 0.98) 0%, rgba(13, 5, 8, 0.98) 100%);
    border: 2px solid var(--vino-elegante);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    min-width: 300px;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(160, 128, 32, 0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    flex-shrink: 0;
}

.toast-icon.success {
    background: rgba(88, 214, 141, 0.2);
    color: #58d68d;
}

.toast-icon.error {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.toast-icon.info {
    background: rgba(93, 173, 226, 0.2);
    color: #5dade2;
}

.toast-icon.warning {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.375rem;
    color: var(--dorado-antiguo);
    margin-bottom: 0.3rem;
}

.toast-message {
    font-size: 1.1875rem;
    color: var(--crema-vintage);
}

.toast-close {
    background: none;
    border: none;
    color: var(--texto-muted);
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    padding: 0.3rem;
}

.toast-close:hover {
    color: var(--dorado-antiguo);
    transform: rotate(90deg);
}

/* ============================================
   4. BOTÓN VOLVER ARRIBA
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--vino-elegante) 0%, var(--vino-rico) 100%);
    border: 2px solid var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    font-size: 1.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 999;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(160, 128, 32, 0.2);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(160, 128, 32, 0.4);
    background: linear-gradient(145deg, var(--vino-tinto) 0%, var(--vino-elegante) 100%);
}

.back-to-top i {
    animation: bounce-up 2s infinite;
}

@keyframes bounce-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ============================================
   5. SKELETON LOADING
   ============================================ */
.skeleton-card {
    background: linear-gradient(145deg, var(--vino-profundo) 0%, rgba(36, 10, 16, 0.8) 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(61, 16, 26, 0.4);
}

.skeleton-image {
    width: 100%;
    height: 320px;
    background: linear-gradient(90deg, var(--vino-rico) 25%, var(--vino-elegante) 50%, var(--vino-rico) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-content {
    padding: 2rem;
}

.skeleton-title {
    height: 24px;
    width: 70%;
    background: linear-gradient(90deg, var(--vino-rico) 25%, var(--vino-elegante) 50%, var(--vino-rico) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.skeleton-text {
    height: 16px;
    width: 100%;
    background: linear-gradient(90deg, var(--vino-rico) 25%, var(--vino-elegante) 50%, var(--vino-rico) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.skeleton-text:nth-child(3) { width: 90%; }
.skeleton-text:nth-child(4) { width: 80%; }

.skeleton-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(107, 28, 46, 0.5);
}

.skeleton-stat {
    height: 16px;
    width: 60px;
    background: linear-gradient(90deg, var(--vino-rico) 25%, var(--vino-elegante) 50%, var(--vino-rico) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   6. EFECTO DE CURSOR PERSONALIZADO
   ============================================ */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--dorado-antiguo);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.1s ease, opacity 0.3s ease;
    mix-blend-mode: difference;
}

.custom-cursor.hover {
    transform: scale(2);
    background: rgba(160, 128, 32, 0.1);
}

.custom-cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--dorado-antiguo);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.05s ease;
}

/* ============================================
   7. EFECTO DE NIEBLA/VAPOR
   ============================================ */
.fog-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.fog-layer {
    position: absolute;
    width: 200%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cdefs%3E%3ClinearGradient id='fog' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:0'/%3E%3Cstop offset='50%25' style='stop-color:%23ffffff;stop-opacity:0.03'/%3E%3Cstop offset='100%25' style='stop-color:%23ffffff;stop-opacity:0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1000' height='500' fill='url(%23fog)'/%3E%3C/svg%3E") repeat-x;
    animation: fog-move 30s linear infinite;
    opacity: 0.5;
}

.fog-layer:nth-child(2) {
    animation: fog-move 25s linear infinite reverse;
    opacity: 0.3;
    top: 20%;
}

.fog-layer:nth-child(3) {
    animation: fog-move 35s linear infinite;
    opacity: 0.2;
    top: 40%;
}

@keyframes fog-move {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ============================================
   8. MINI REPRODUCTOR FLOTANTE
   ============================================ */
.mini-player {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    background: linear-gradient(145deg, rgba(22, 8, 12, 0.98) 0%, rgba(13, 5, 8, 0.98) 100%);
    border: 2px solid var(--vino-elegante);
    border-radius: 50px;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 998;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(160, 128, 32, 0.15);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mini-player.active {
    transform: translateX(-50%) translateY(0);
}

.mini-player-info {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.mini-player-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: var(--dorado-antiguo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-player-duration {
    font-size: 1.0625rem;
    color: var(--texto-muted);
}

.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mini-player-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: transparent;
    color: var(--crema-vintage);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-player-btn:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: scale(1.1);
}

.mini-player-btn.play {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--dorado-antiguo) 0%, var(--vino-tinto) 100%);
    border-color: var(--dorado-antiguo);
    color: var(--vino-oscuro);
}

.mini-player-btn.play:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.4);
}

.mini-player-progress {
    width: 150px;
    height: 4px;
    background: rgba(160, 128, 32, 0.2);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

.mini-player-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--dorado-antiguo), var(--vino-rosa));
    border-radius: 2px;
    transition: width 0.1s linear;
}

.mini-player-close {
    background: none;
    border: none;
    color: var(--texto-muted);
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    margin-left: 0.5rem;
}

.mini-player-close:hover {
    color: var(--dorado-antiguo);
    transform: rotate(90deg);
}

/* ============================================
   9. BOTONES DE COMPARTIR
   ============================================ */
.share-buttons {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: transparent;
    color: var(--crema-vintage);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.share-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.share-btn.twitter:hover {
    border-color: #1da1f2;
    color: #1da1f2;
    box-shadow: 0 10px 20px rgba(29, 161, 242, 0.3);
}

.share-btn.facebook:hover {
    border-color: #4267B2;
    color: #4267B2;
    box-shadow: 0 10px 20px rgba(66, 103, 178, 0.3);
}

.share-btn.whatsapp:hover {
    border-color: #25d366;
    color: #25d366;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.share-btn.copy:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    box-shadow: 0 10px 20px rgba(160, 128, 32, 0.3);
}

/* ============================================
   10. TIEMPO DE LECTURA
   ============================================ */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    color: var(--texto-muted);
    padding: 0.5rem 1rem;
    background: rgba(22, 8, 12, 0.6);
    border-radius: 20px;
    border: 1px solid rgba(160, 128, 32, 0.2);
}

.reading-time i {
    color: var(--dorado-antiguo);
}

/* ============================================
   11. BOTÓN FAVORITO
   ============================================ */
.btn-favorite {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: transparent;
    color: var(--crema-vintage);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.btn-favorite:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    transform: scale(1.1);
}

.btn-favorite.active {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
    animation: favorite-pulse 0.5s ease;
}

.btn-favorite.active:hover {
    background: #c0392b;
    border-color: #c0392b;
}

@keyframes favorite-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ============================================
   12. PAGINACIÓN
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.pagination-btn {
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--vino-elegante);
    background: transparent;
    color: var(--crema-vintage);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: translateY(-3px);
}

.pagination-btn.active {
    background: linear-gradient(135deg, var(--dorado-antiguo) 0%, var(--vino-tinto) 100%);
    border-color: var(--dorado-antiguo);
    color: var(--vino-oscuro);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   13. FILTROS POR CATEGORÍA
   ============================================ */
.category-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem auto;
    max-width: 800px;
}

.category-btn {
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    border: 2px solid var(--vino-elegante);
    background: rgba(22, 8, 12, 0.6);
    color: var(--crema-vintage);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-btn:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.category-btn.active {
    background: linear-gradient(135deg, var(--vino-elegante) 0%, var(--vino-rico) 100%);
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
}

/* ============================================
   14. NEWSLETTER
   ============================================ */
.newsletter-section {
    padding: 4rem 2rem;
    background: linear-gradient(180deg, var(--vino-profundo) 0%, var(--vino-oscuro) 100%);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 128, 32, 0.3), transparent);
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--dorado-antiguo);
    margin-bottom: 1rem;
}

.newsletter-description {
    font-size: 1.375rem;
    color: var(--crema-vintage);
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.newsletter-input {
    flex: 1;
    min-width: 250px;
    padding: 1rem 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--crema-vintage);
    background: rgba(36, 10, 16, 0.8);
    border: 2px solid var(--vino-rico);
    border-radius: 50px;
    outline: none;
    transition: all 0.3s ease;
}

.newsletter-input:focus {
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.2);
}

.newsletter-input::placeholder {
    color: var(--texto-muted);
}

.newsletter-btn {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    border: 2px solid var(--dorado-antiguo);
    background: linear-gradient(135deg, var(--dorado-antiguo) 0%, var(--vino-tinto) 100%);
    color: var(--vino-oscuro);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.newsletter-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 30px rgba(160, 128, 32, 0.3);
}

/* ============================================
   15. CONTADOR ANIMADO
   ============================================ */
.counter {
    font-family: 'Playfair Display', serif;
    font-size: 3.75rem;
    color: var(--dorado-antiguo);
    text-shadow: 0 0 20px rgba(160, 128, 32, 0.3);
}

.counter-label {
    font-size: 1.25rem;
    color: var(--crema-vintage);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ============================================
   16. LAZY LOADING
   ============================================ */
.lazy-image {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

/* ============================================
   RESPONSIVE PARA NUEVAS MEJORAS
   ============================================ */
@media (max-width: 768px) {
    /* HEADER COMPLETAMENTE TRANSPARENTE EN MÓVIL */
    .header {
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 0.5rem 0.8rem;
        position: absolute;
    }
    
    .header.scrolled {
        background: rgba(13, 5, 8, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        position: fixed;
    }
    
    .logo {
        font-size: 1.5rem;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    }

    .nav-menu {
        padding-top: 4rem;
    }

    .nav-link {
        font-size: 1.375rem;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .header-search {
        margin-right: 0.5rem;
    }

    .search-toggle {
        width: 38px;
        height: 38px;
    }

    /* HERO EN MÓVIL - MUCHO ESPACIO ARRIBA PARA EL MENÚ */
    .hero {
        padding-top: 10rem;
        min-height: auto;
        height: auto;
        padding-bottom: 3rem;
    }

    .hero-content {
        padding: 1.5rem 0.8rem;
        margin: 0 0.3rem;
        background: rgba(13, 5, 8, 0.9);
        border-radius: 12px;
    }

    .hero-title {
        font-size: 3.125rem;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.8125rem;
        letter-spacing: 0.08em;
    }
    
    .section-image {
        max-width: 100%;
        border-radius: 12px;
    }
    
    .sobre-imagen {
        flex: 0 0 100%;
        max-width: 400px;
    }
    
    .ensayo-image {
        height: 200px;
    }

    /* CORRECCIÓN: Layout de ensayos en móvil */
    .ensayo-content {
        padding: 1rem;
    }

    .ensayo-content > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .ensayo-title {
        font-size: 1.625rem;
        width: 100%;
        padding-right: 0;
    }

    .btn-favorite {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }

    .ensayo-excerpt {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .ensayo-stats {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 0.4rem;
        padding-top: 0.6rem;
        flex-wrap: nowrap;
        width: 100%;
        overflow: hidden;
    }

    .stat-item {
        font-size: 0.875rem;
        gap: 0.2rem;
        display: flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .stat-item i {
        font-size: 0.9375rem;
    }

    .reading-time {
        font-size: 0.8125rem;
        padding: 0.15rem 0.35rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ensayos-grid {
        gap: 1.5rem;
    }

    .ensayo-card {
        position: relative;
    }

    .audio-image-container {
        height: 220px;
    }

    .cita-poetica {
        font-size: 1.5rem;
        padding: 1.5rem;
    }

    /* Responsive para buscador */
    .search-panel {
        width: 300px;
        right: -50px;
    }

    /* Responsive para menú hamburguesa */
    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: linear-gradient(180deg, rgba(13, 5, 8, 0.98) 0%, rgba(22, 8, 12, 0.98) 100%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1001;
        border-left: 2px solid var(--vino-elegante);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.625rem;
    }

    /* Responsive para mini player */
    .mini-player {
        width: 90%;
        padding: 0.8rem 1.5rem;
    }

    .mini-player-progress {
        width: 80px;
    }

    /* Responsive para toast */
    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }

    /* Responsive para newsletter */
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input {
        width: 100%;
    }

    /* Ocultar cursor personalizado en móvil */
    .custom-cursor,
    .custom-cursor-dot {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-search {
        margin-right: 0.5rem;
    }

    .search-toggle {
        width: 40px;
        height: 40px;
    }

    .search-panel {
        width: 280px;
        right: -80px;
    }

    .back-to-top {
        width: 45px;
        height: 45px;
        font-size: 1.375rem;
    }

    /* SECCIÓN AUDIONARRACIONES EN MÓVIL - COMPLETAMENTE REESTRUCTURADA */
    .section-audio {
        padding: 0.5rem 0.8rem;
        display: flex;
        flex-direction: column;
    }

    .section-audio .section-header {
        width: 100%;
        padding: 0;
        margin: 0;
        order: 1;
    }

    .section-audio .section-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        transform: none;
        margin: 0 0 0.3rem 0;
        box-shadow: none;
        display: block;
    }

    .texto-audio-container {
        padding: 0.8rem 1rem;
        margin: 0;
        border-radius: 8px;
        order: 2;
        background: rgba(13, 5, 8, 0.9);
    }

    .texto-audio-container .section-title {
        font-size: 1.875rem;
        margin-bottom: 0.5rem;
    }

    .texto-audio-container .cita-poetica {
        font-size: 1.125rem;
        padding: 0.5rem;
        margin: 0;
        border-left: 2px solid var(--vino-elegante);
        border-right: 2px solid var(--vino-elegante);
    }

    .texto-audio-container .cita-poetica::before,
    .texto-audio-container .cita-poetica::after {
        font-size: 1.875rem;
    }

    .ornament-divider {
        order: 3;
        margin: 0.5rem 0;
        font-size: 1.5rem;
    }

    .audio-grid {
        order: 4;
        gap: 1rem;
    }

    .audio-card {
        border-radius: 10px;
    }

    .audio-image-container {
        height: 180px;
    }

    .audio-content {
        padding: 1rem;
    }

    .audio-title {
        font-size: 1.375rem;
    }

    .audio-description {
        font-size: 1.0625rem;
    }
}

/* ============================================

/* ============================================
   ESTILOS UNIFICADOS v6
   Coherentes con la estética Vintage Parisina
   del sitio: mismas variables, transiciones,
   efectos card-glow, corner-ornament, etc.
   ============================================ */

/* --- FIX: Stats spacing in all cards --- */
.ensayo-stats {
    gap: 0.6rem !important;
    flex-wrap: wrap;
    align-items: center;
}

.stat-item {
    font-size: 1.0625rem !important;
    gap: 0.25rem !important;
    white-space: nowrap;
}

.reading-time {
    font-size: 0.975rem !important;
    padding: 0.25rem 0.55rem !important;
    margin-left: auto;
}

/* --- Grid 2 columnas para index --- */
.ensayos-grid-2 {
    max-width: 920px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 768px) {
    .ensayos-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* --- Card link wrapper --- */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.card-link:hover { text-decoration: none; color: inherit; }

/* --- Categoría badge en tarjetas --- */
.ensayo-categoria {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dorado-antiguo);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
    opacity: 0.7;
    transition: var(--transicion-rapida);
}
.ensayo-card:hover .ensayo-categoria {
    opacity: 1;
    color: var(--dorado-suave);
}

/* --- Fecha en tarjetas --- */
.ensayo-fecha {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.025rem;
    color: var(--texto-muted);
    margin-bottom: 0.5rem;
    transition: var(--transicion-rapida);
}
.ensayo-fecha i {
    margin-right: 0.3rem;
    color: var(--dorado-antiguo);
    opacity: 0.5;
}
.ensayo-card:hover .ensayo-fecha {
    color: var(--vino-rosa);
}

/* --- Contador de relatos --- */
.relatos-count {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    color: var(--texto-muted);
    font-style: italic;
}

/* --- Sort buttons como links --- */
a.sort-btn {
    text-decoration: none;
    display: inline-flex;
}

/* --- Filtros container mejorado --- */
.filtros-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    max-width: 1200px !important;
    margin: 2rem auto !important;
    padding: 1rem 2rem !important;
    background: rgba(13, 5, 8, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(61, 16, 26, 0.3);
}

/* ============================================
   PÁGINA INDIVIDUAL DE RELATO
   Misma paleta, transiciones y efectos
   ============================================ */

.relato-page {
    padding-top: 5rem;
    background: linear-gradient(180deg, var(--vino-oscuro) 0%, var(--vino-profundo) 100%);
    min-height: 100vh;
}

/* Hero del relato */
.relato-hero {
    max-width: 920px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.relato-hero-image {
    flex: 0 0 280px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--vino-elegante);
    box-shadow: var(--sombra-profunda), var(--sombra-vino);
    transition: var(--transicion-elegante);
    position: relative;
}

.relato-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(160, 128, 32, 0.1), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.relato-hero-image:hover::after {
    left: 150%;
}

.relato-hero-image:hover {
    transform: scale(1.03);
    box-shadow: var(--sombra-profunda), 0 0 40px rgba(61, 16, 26, 0.6);
}

.relato-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transicion-lenta);
}

.relato-hero-image:hover img {
    transform: scale(1.08);
}

.relato-hero-info {
    flex: 1;
    padding: 0.5rem 0;
}

/* Categoría badge */
.relato-categoria {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--dorado-antiguo);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    padding: 0.35rem 1.2rem;
    border: 1px solid rgba(160, 128, 32, 0.25);
    border-radius: 20px;
    background: rgba(160, 128, 32, 0.06);
    transition: var(--transicion-rapida);
}

.relato-categoria:hover {
    border-color: var(--dorado-antiguo);
    background: rgba(160, 128, 32, 0.12);
}

/* Título */
.relato-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--crema-vintage);
    line-height: 1.3;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Meta info */
.relato-meta {
    display: flex;
    gap: 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1875rem;
    color: var(--texto-muted);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.relato-meta i {
    color: var(--dorado-antiguo);
    margin-right: 0.4rem;
    opacity: 0.6;
}

/* Stats en hero */
.relato-stats-hero {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.relato-stats-hero .stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1875rem;
    color: var(--texto-muted);
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    background: rgba(13, 5, 8, 0.6);
    border: 1px solid rgba(61, 16, 26, 0.3);
    transition: var(--transicion-rapida);
}

.relato-stats-hero .stat-item:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(61, 16, 26, 0.3);
}

.relato-stats-hero .stat-item i {
    transition: var(--transicion-rapida);
}

.relato-stats-hero .stat-item:hover i {
    transform: scale(1.2);
}

/* Contenido del relato */
.relato-contenido {
    max-width: 750px;
    margin: 3rem auto;
    padding: 3rem 2.5rem;
    background: rgba(13, 5, 8, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(61, 16, 26, 0.2);
    position: relative;
}

/* Corner ornaments para el contenido (como las tarjetas) */
.relato-contenido::before {
    content: '❧';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 1.5rem;
    color: var(--dorado-antiguo);
    opacity: 0.25;
}

.relato-contenido::after {
    content: '❧';
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--dorado-antiguo);
    opacity: 0.25;
    transform: rotate(180deg);
}

.relato-texto {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    line-height: 2;
    color: var(--crema-vintage);
}

.relato-texto p {
    margin-bottom: 1.5rem;
    text-align: justify;
    hyphens: auto;
}

.relato-texto em {
    color: var(--dorado-suave);
    font-style: italic;
}

.relato-texto strong {
    color: var(--vino-rosa);
    font-weight: 600;
}

.relato-texto hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--vino-elegante), var(--dorado-antiguo), var(--vino-elegante), transparent);
    margin: 3rem 0;
    opacity: 0.5;
}

.relato-texto h3 {
    font-family: 'Playfair Display', serif;
    color: var(--dorado-antiguo);
    font-size: 1.875rem;
    margin: 2.5rem 0 1rem;
    text-align: center;
}

/* Compartir - misma estética */
.relato-compartir {
    max-width: 750px;
    margin: 2rem auto;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-top: 1px solid rgba(61, 16, 26, 0.3);
    border-bottom: 1px solid rgba(61, 16, 26, 0.3);
    color: var(--texto-muted);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    flex-wrap: wrap;
}

.share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(61, 16, 26, 0.4);
    background: rgba(13, 5, 8, 0.5);
    color: var(--crema-vintage);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion-rapida);
    font-size: 1.0625rem;
}

.share-btn:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 15px rgba(160, 128, 32, 0.2);
}

/* ============================================
   COMENTARIOS - estética unificada
   ============================================ */
.relato-comentarios {
    max-width: 750px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.comentarios-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 1.875rem;
    color: var(--dorado-antiguo);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1rem;
}

.comentarios-titulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, var(--dorado-antiguo), transparent);
}

.comentarios-titulo i {
    margin-right: 0.5rem;
    opacity: 0.7;
}

.comentario-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 1.8rem;
    background: rgba(22, 8, 12, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(61, 16, 26, 0.3);
    transition: var(--transicion-elegante);
}

.comentario-form:focus-within {
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 20px rgba(160, 128, 32, 0.08);
}

.comentario-input,
.comentario-textarea {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3125rem;
    padding: 0.8rem 1.2rem;
    background: rgba(13, 5, 8, 0.6);
    border: 1px solid rgba(61, 16, 26, 0.3);
    border-radius: 8px;
    color: var(--crema-vintage);
    transition: var(--transicion-rapida);
}

.comentario-input::placeholder,
.comentario-textarea::placeholder {
    color: var(--texto-muted);
    opacity: 0.7;
}

.comentario-input:focus,
.comentario-textarea:focus {
    outline: none;
    border-color: var(--dorado-antiguo);
    box-shadow: 0 0 10px rgba(160, 128, 32, 0.1);
}

.comentario-textarea {
    min-height: 100px;
    resize: vertical;
}

.comentario-btn {
    align-self: flex-end;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.7rem 2.2rem;
    background: transparent;
    color: var(--dorado-antiguo);
    border: 2px solid var(--vino-elegante);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.comentario-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(160, 128, 32, 0.15), transparent);
    transition: left 0.6s ease;
}

.comentario-btn:hover {
    border-color: var(--dorado-antiguo);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(139, 38, 58, 0.3);
}

.comentario-btn:hover::before {
    left: 150%;
}

.comentario-btn i {
    margin-right: 0.4rem;
}

.comentarios-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comentario-item {
    padding: 1.2rem 1.5rem;
    background: rgba(22, 8, 12, 0.4);
    border-radius: 10px;
    border-left: 3px solid var(--vino-elegante);
    transition: var(--transicion-rapida);
}

.comentario-item:hover {
    border-left-color: var(--dorado-antiguo);
    background: rgba(22, 8, 12, 0.6);
    transform: translateX(4px);
}

.comentario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.comentario-usuario {
    color: var(--dorado-antiguo);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3125rem;
}

.comentario-usuario i {
    margin-right: 0.4rem;
    opacity: 0.6;
}

.comentario-fecha {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--texto-muted);
}

.comentario-texto {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3125rem;
    color: var(--crema-vintage);
    line-height: 1.7;
}

.sin-comentarios {
    text-align: center;
    color: var(--texto-muted);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    padding: 2.5rem;
    border: 1px dashed rgba(61, 16, 26, 0.3);
    border-radius: 12px;
}

/* Navegación entre relatos */
.relato-nav {
    max-width: 750px;
    margin: 3rem auto;
    padding: 0 2rem;
    text-align: center;
}

/* ============================================
   RESPONSIVE - páginas de relato
   ============================================ */
@media (max-width: 768px) {
    .relato-hero {
        flex-direction: column;
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }
    
    .relato-hero-image {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    
    .relato-titulo {
        font-size: 2rem;
    }
    
    .relato-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .relato-stats-hero {
        gap: 0.6rem;
    }
    
    .relato-stats-hero .stat-item {
        font-size: 1.0625rem;
        padding: 0.3rem 0.7rem;
    }
    
    .relato-contenido {
        padding: 2rem 1.2rem;
        margin: 2rem 0.5rem;
    }
    
    .relato-texto {
        font-size: 1.3125rem;
        line-height: 1.85;
    }
    
    .relato-compartir {
        padding: 1rem;
        margin: 1.5rem 0.5rem;
    }
    
    .relato-comentarios {
        padding: 0 1rem;
    }
    
    .comentario-form {
        padding: 1.2rem;
    }
    
    .filtros-container {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

@media (max-width: 480px) {
    .relato-titulo {
        font-size: 1.6875rem;
    }
    
    .relato-contenido {
        padding: 1.5rem 1rem;
    }
    
    .relato-texto {
        font-size: 1.25rem;
        line-height: 1.75;
    }
    
    .ensayo-stats {
        gap: 0.4rem !important;
    }
    
    .reading-time {
        font-size: 0.9rem !important;
        padding: 0.2rem 0.45rem !important;
    }
}

/* ============================================
   NAVEGACIÓN PREV/NEXT ENTRE RELATOS
   ============================================ */
.relato-nav-between {
    max-width: 750px;
    margin: 3rem auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
}

.nav-prev, .nav-next {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.2rem 1.5rem;
    background: rgba(22, 8, 12, 0.4);
    border: 1px solid rgba(61, 16, 26, 0.3);
    border-radius: 10px;
    text-decoration: none;
    color: var(--crema-vintage);
    transition: var(--transicion-elegante);
}

.nav-prev { text-align: left; }
.nav-next { text-align: right; }

.nav-prev:hover, .nav-next:hover {
    border-color: var(--dorado-antiguo);
    background: rgba(22, 8, 12, 0.7);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(61, 16, 26, 0.3);
    text-decoration: none;
    color: var(--crema-vintage);
}

.nav-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dorado-antiguo);
    opacity: 0.7;
}

.nav-prev:hover .nav-label,
.nav-next:hover .nav-label {
    opacity: 1;
}

.nav-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--crema-vintage);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    background: rgba(22, 8, 12, 0.4);
    border: 1px solid rgba(61, 16, 26, 0.3);
    border-radius: 10px;
    color: var(--dorado-antiguo);
    font-size: 1.5rem;
    text-decoration: none;
    transition: var(--transicion-rapida);
}

.nav-all:hover {
    border-color: var(--dorado-antiguo);
    background: rgba(160, 128, 32, 0.1);
    transform: scale(1.08);
}

.nav-disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 600px) {
    .relato-nav-between {
        padding: 0 1rem;
    }
    .nav-prev, .nav-next {
        padding: 0.8rem 1rem;
    }
    .nav-title {
        font-size: 1.0625rem;
        -webkit-line-clamp: 1;
    }
}

/* ============================================
   BOTÓN VOLVER ARRIBA
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(61, 16, 26, 0.85);
    border: 2px solid var(--vino-rosa);
    color: var(--dorado-antiguo);
    font-size: 1.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transicion-elegante);
    z-index: 100;
    backdrop-filter: blur(8px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--vino-tinto);
    border-color: var(--dorado-antiguo);
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 20px rgba(160, 128, 32, 0.3);
}

/* ============================================
   SERIES/SAGAS EN RELATOS.PHP
   ============================================ */
.serie-section {
    max-width: 1200px;
    margin: 3rem auto 2rem;
    padding: 2rem;
    background: rgba(13, 5, 8, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(61, 16, 26, 0.3);
    position: relative;
}

.serie-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.serie-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(160, 128, 32, 0.12);
    border: 1px solid rgba(160, 128, 32, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dorado-antiguo);
    font-size: 1.25rem;
}

.serie-nombre {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: var(--dorado-antiguo);
}

.serie-descripcion {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    color: var(--texto-muted);
    margin-bottom: 1.5rem;
    padding-left: 3.5rem;
    font-style: italic;
    line-height: 1.6;
}

.serie-relatos {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--vino-elegante) transparent;
}

.serie-relato-card {
    flex: 0 0 250px;
    display: flex;
    gap: 0.8rem;
    padding: 0.8rem;
    background: rgba(22, 8, 12, 0.5);
    border: 1px solid rgba(61, 16, 26, 0.3);
    border-radius: 10px;
    text-decoration: none;
    color: var(--crema-vintage);
    transition: var(--transicion-rapida);
    align-items: center;
}

.serie-relato-card:hover {
    border-color: var(--dorado-antiguo);
    background: rgba(22, 8, 12, 0.8);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(61, 16, 26, 0.3);
    text-decoration: none;
    color: var(--crema-vintage);
}

.serie-relato-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(160, 128, 32, 0.15);
    border: 1px solid rgba(160, 128, 32, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    color: var(--dorado-antiguo);
    flex-shrink: 0;
}

.serie-relato-info {
    flex: 1;
    min-width: 0;
}

.serie-relato-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.serie-relato-tiempo {
    font-size: 0.9375rem;
    color: var(--texto-muted);
    margin-top: 0.2rem;
}

@media (max-width: 768px) {
    .serie-section {
        padding: 1.2rem;
        margin: 2rem 1rem;
    }
    .serie-descripcion {
        padding-left: 0;
    }
    .serie-relato-card {
        flex: 0 0 220px;
    }
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
    max-width: 920px;
    margin: 0 auto;
    padding: 0.8rem 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    color: var(--texto-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--texto-muted);
    text-decoration: none;
    transition: var(--transicion-rapida);
}

.breadcrumbs a:hover {
    color: var(--dorado-antiguo);
}

.breadcrumb-sep {
    font-size: 0.75rem;
    opacity: 0.4;
}

.breadcrumb-current {
    color: var(--dorado-antiguo);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* ============================================
   FASE 2: HERRAMIENTAS DE LECTURA
   ============================================ */

/* Barra de herramientas de lectura (modo lectura + tipografía + bookmark) */
.reading-tools {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-elegante);
}

.reading-tools.visible {
    opacity: 1;
    visibility: visible;
}

.reading-tool-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(22, 8, 12, 0.88);
    border: 1px solid rgba(107, 28, 46, 0.4);
    color: var(--dorado-antiguo);
    font-size: 1.0625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion-elegante);
    backdrop-filter: blur(12px);
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0.75;
}

.reading-tool-btn:hover {
    opacity: 1;
    background: rgba(61, 16, 26, 0.9);
    border-color: var(--dorado-antiguo);
    transform: scale(1.1);
    box-shadow: 0 4px 18px rgba(160, 128, 32, 0.2);
}

.reading-tool-btn.active {
    opacity: 1;
    background: rgba(160, 128, 32, 0.2);
    color: var(--dorado-antiguo);
    border-color: var(--dorado-antiguo);
}

.reading-tool-btn .tooltip {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    background: rgba(13, 5, 8, 0.95);
    color: var(--crema-vintage);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.975rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    border: 1px solid rgba(107, 28, 46, 0.3);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.reading-tool-btn:hover .tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Font size controls popup */
.font-size-controls {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13, 5, 8, 0.95);
    border: 1px solid rgba(107, 28, 46, 0.3);
    border-radius: 10px;
    padding: 0.4rem;
    display: none;
    gap: 0.25rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.font-size-controls.show {
    display: flex;
}

.font-size-controls button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(61, 16, 26, 0.25);
    color: var(--crema-vintage);
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.125rem;
    transition: var(--transicion-rapida);
    opacity: 0.8;
}

.font-size-controls button:hover {
    opacity: 1;
    background: rgba(160, 128, 32, 0.12);
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: scale(1.05);
}

/* Reading mode */
body.reading-mode .header,
body.reading-mode .breadcrumbs,
body.reading-mode .relato-hero,
body.reading-mode .ornament-divider,
body.reading-mode .relato-compartir,
body.reading-mode .relato-nav-between,
body.reading-mode .relato-comentarios,
body.reading-mode .footer,
body.reading-mode .dust-particles,
body.reading-mode .back-to-top {
    display: none !important;
}

body.reading-mode {
    background: #0d0508;
}

body.reading-mode .relato-contenido {
    max-width: 680px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    background: rgba(13, 5, 8, 0.95);
    border: none;
    border-radius: 0;
}

body.reading-mode .relato-texto {
    font-size: 1.5625rem;
    line-height: 2.1;
}

body.reading-mode .reading-tools {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Reading progress specific to article */
.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, var(--vino-elegante), var(--dorado-antiguo));
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(160, 128, 32, 0.4);
}

/* Bookmark indicator */
.bookmark-indicator {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    background: rgba(13, 5, 8, 0.92);
    border: 1px solid rgba(160, 128, 32, 0.4);
    color: var(--dorado-antiguo);
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    z-index: 95;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.35s ease;
    pointer-events: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.bookmark-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

/* Table of contents floating */
.toc-floating {
    position: fixed;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    max-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(13, 5, 8, 0.9);
    border: 1px solid rgba(61, 16, 26, 0.3);
    border-radius: 10px;
    padding: 1rem;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-elegante);
    scrollbar-width: thin;
    scrollbar-color: var(--vino-elegante) transparent;
}

.toc-floating.visible {
    opacity: 1;
    visibility: visible;
}

.toc-floating h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dorado-antiguo);
    margin-bottom: 0.8rem;
    opacity: 0.7;
}

.toc-floating a {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.025rem;
    color: var(--texto-muted);
    text-decoration: none;
    padding: 0.35rem 0;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    transition: var(--transicion-rapida);
    line-height: 1.3;
}

.toc-floating a:hover,
.toc-floating a.active {
    color: var(--dorado-antiguo);
    border-left-color: var(--dorado-antiguo);
}

/* Responsive: hide TOC and move tools on mobile */
@media (max-width: 1200px) {
    .toc-floating {
        display: none;
    }
}

@media (max-width: 768px) {
    .reading-tools {
        right: 0.6rem;
        gap: 0.35rem;
    }
    .reading-tool-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9375rem;
        opacity: 0.65;
    }
    .reading-tool-btn:hover {
        opacity: 1;
    }
    .reading-tool-btn .tooltip {
        display: none;
    }
    .font-size-controls {
        right: 42px;
    }
    body.reading-mode .relato-contenido {
        padding: 2rem 1.2rem;
    }
    .breadcrumbs {
        padding: 0.6rem 1rem;
        font-size: 0.975rem;
    }
    .breadcrumb-current {
        max-width: 150px;
    }
}

/* ============================================
   FASE 3: SOCIAL TOOLS
   ============================================ */

/* Text selection share popup */
.share-selection-popup {
    position: absolute;
    transform: translateX(-50%);
    background: rgba(13, 5, 8, 0.95);
    border: 1px solid var(--dorado-antiguo);
    border-radius: 25px;
    padding: 0.4rem;
    display: flex;
    gap: 0.3rem;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.share-selection-popup.visible {
    opacity: 1;
    visibility: visible;
}

.share-selection-popup button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--dorado-antiguo);
    cursor: pointer;
    font-size: 1.0625rem;
    transition: var(--transicion-rapida);
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-selection-popup button:hover {
    background: rgba(160, 128, 32, 0.2);
    transform: scale(1.15);
}

/* +18 Adult warning overlay */
.adult-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 5, 8, 0.97);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(20px);
}

.adult-warning-overlay.visible {
    opacity: 1;
}

.adult-warning-box {
    text-align: center;
    max-width: 450px;
    padding: 3rem;
}

.adult-warning-icon {
    font-size: 3.75rem;
    color: var(--dorado-antiguo);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.adult-warning-box h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    color: var(--crema-vintage);
    margin-bottom: 1rem;
}

.adult-warning-box p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--texto-muted);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.adult-warning-sub {
    font-size: 1.1875rem !important;
    opacity: 0.7;
}

.adult-warning-buttons {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.adult-btn-accept {
    padding: 0.9rem 2.5rem;
    background: var(--vino-elegante);
    border: 2px solid var(--vino-rosa);
    color: var(--dorado-antiguo);
    border-radius: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}

.adult-btn-accept:hover {
    background: var(--vino-tinto);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 38, 58, 0.4);
}

.adult-btn-back {
    color: var(--texto-muted);
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1875rem;
    transition: color 0.3s ease;
}

.adult-btn-back:hover {
    color: var(--dorado-antiguo);
}

/* Floating hearts animation for likes */
.floating-heart {
    pointer-events: none;
    position: absolute;
    z-index: 100;
}

/* ============================================
   FASE 4: SEARCH RESULTS
   ============================================ */
.search-result-item {
    display: flex;
    gap: 0.8rem;
    padding: 0.8rem;
    text-decoration: none;
    color: var(--crema-vintage);
    border-bottom: 1px solid rgba(61, 16, 26, 0.2);
    transition: var(--transicion-rapida);
    align-items: flex-start;
}

.search-result-item:hover {
    background: rgba(61, 16, 26, 0.2);
}

.search-result-item i {
    color: var(--dorado-antiguo);
    margin-top: 0.3rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.search-result-item strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    color: var(--crema-vintage);
    margin-bottom: 0.2rem;
}

.search-result-meta {
    font-size: 0.9375rem;
    color: var(--texto-muted);
    display: block;
}

.search-result-snippet {
    font-size: 1.025rem;
    color: var(--texto-muted);
    line-height: 1.4;
    margin-top: 0.3rem;
}

.search-result-snippet mark {
    background: rgba(160, 128, 32, 0.3);
    color: var(--dorado-antiguo);
    padding: 0 0.15rem;
    border-radius: 2px;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: var(--texto-muted);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

.search-more {
    padding: 0.6rem;
    text-align: center;
    color: var(--dorado-antiguo);
    font-size: 1.0625rem;
    opacity: 0.7;
}

/* ============================================
   FASE 4: MODO MARATÓN
   ============================================ */
.marathon-banner {
    max-width: 750px;
    margin: 2rem auto;
    padding: 1.2rem 1.5rem;
    background: rgba(160, 128, 32, 0.08);
    border: 1px solid rgba(160, 128, 32, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transicion-rapida);
}

.marathon-banner:hover {
    border-color: var(--dorado-antiguo);
    background: rgba(160, 128, 32, 0.12);
}

.marathon-banner i {
    font-size: 1.875rem;
    color: var(--dorado-antiguo);
    opacity: 0.7;
}

.marathon-banner-text {
    flex: 1;
    font-family: 'Cormorant Garamond', serif;
}

.marathon-banner-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dorado-antiguo);
}

.marathon-banner-desc {
    font-size: 1.0625rem;
    color: var(--texto-muted);
}

.marathon-btn {
    padding: 0.5rem 1.2rem;
    background: transparent;
    border: 1px solid var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    border-radius: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transicion-rapida);
    white-space: nowrap;
}

.marathon-btn:hover {
    background: rgba(160, 128, 32, 0.15);
    transform: translateY(-2px);
}

/* ============================================
   FASE 5: PRINT STYLES
   ============================================ */
.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(61, 16, 26, 0.3);
    color: var(--texto-muted);
    border-radius: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: var(--transicion-rapida);
}

.print-btn:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
}

@media print {
    .header, .footer, .breadcrumbs, .reading-tools,
    .back-to-top, .relato-compartir, .relato-nav-between,
    .relato-comentarios, .dust-particles, .ornament-divider,
    .relato-stats-hero, .article-progress, .print-btn,
    .adult-warning-overlay, .share-selection-popup,
    .toc-floating, .bookmark-indicator, .marathon-banner { 
        display: none !important; 
    }
    
    body {
        background: white !important;
        color: #1a1a1a !important;
    }
    
    .relato-page { padding-top: 0; }
    
    .relato-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .relato-hero-image {
        max-width: 250px;
        margin: 0 auto;
        border: 1px solid #ccc;
        box-shadow: none;
    }
    
    .relato-titulo {
        color: #1a1a1a !important;
        font-size: 2.5rem;
    }
    
    .relato-categoria {
        color: #666 !important;
        border-color: #ccc !important;
    }
    
    .relato-meta span {
        color: #666 !important;
    }
    
    .relato-contenido {
        background: none !important;
        border: none !important;
        padding: 1rem 0 !important;
        max-width: 100%;
    }
    
    .relato-contenido::before,
    .relato-contenido::after {
        display: none;
    }
    
    .relato-texto {
        color: #1a1a1a !important;
        font-size: 12pt !important;
        line-height: 1.8 !important;
    }
    
    .relato-texto em { color: #333 !important; }
    .relato-texto strong { color: #000 !important; }
    .relato-texto hr { background: #ccc !important; }
    
    @page {
        margin: 2cm;
        @bottom-center {
            content: "Elinor y su Diván — Venus Disonante";
            font-size: 8pt;
            color: #999;
        }
    }
}

/* ============================================
   FASE 4: ¿POR DÓNDE EMPEZAR? section
   ============================================ */
.empezar-section {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 2.5rem;
    background: rgba(13, 5, 8, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(160, 128, 32, 0.15);
    position: relative;
    overflow: hidden;
}

.empezar-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--dorado-antiguo), transparent);
    opacity: 0.4;
}

.empezar-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.875rem;
    color: var(--dorado-antiguo);
    text-align: center;
    margin-bottom: 0.5rem;
}

.empezar-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    color: var(--texto-muted);
    text-align: center;
    margin-bottom: 2rem;
    font-style: italic;
}

.empezar-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
}

.empezar-path {
    padding: 1.5rem;
    background: rgba(22, 8, 12, 0.5);
    border: 1px solid rgba(61, 16, 26, 0.3);
    border-radius: 12px;
    text-decoration: none;
    color: var(--crema-vintage);
    transition: var(--transicion-elegante);
    display: block;
}

.empezar-path:hover {
    border-color: var(--dorado-antiguo);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(61, 16, 26, 0.3);
    color: var(--crema-vintage);
    text-decoration: none;
}

.empezar-path-icon {
    font-size: 2.5rem;
    color: var(--dorado-antiguo);
    opacity: 0.6;
    margin-bottom: 0.8rem;
}

.empezar-path h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.375rem;
    color: var(--dorado-antiguo);
    margin-bottom: 0.4rem;
}

.empezar-path p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    color: var(--texto-muted);
    line-height: 1.5;
}

/* Pagination */
.paginacion-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(22, 8, 12, 0.5);
    border: 1px solid rgba(61, 16, 26, 0.3);
    color: var(--crema-vintage);
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    transition: var(--transicion-rapida);
}

.paginacion-btn:hover {
    border-color: var(--dorado-antiguo);
    color: var(--dorado-antiguo);
    transform: translateY(-2px);
}

.paginacion-btn.active {
    background: var(--dorado-antiguo);
    color: var(--vino-oscuro);
    border-color: var(--dorado-antiguo);
    font-weight: 700;
}


/* === ASTRO Y CATRE VISUALES CENTRALIZADOS === */
.astro-preview-image,
.astro-card-image,
.astro-hero-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #1a1731, #442a5d 48%, #6b486d 100%);
}

.astro-preview-image {
    height: 240px;
    border-radius: 1.4rem 1.4rem 0 0;
    border-bottom: 1px solid rgba(212,175,55,.18);
}

.astro-card-image {
    height: 220px;
    border-radius: 1.4rem 1.4rem 0 0;
    border-bottom: 1px solid rgba(212,175,55,.18);
}

.astro-preview-image::before, .astro-preview-image::after,
.astro-card-image::before, .astro-card-image::after,
.astro-hero-image::before, .astro-hero-image::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.astro-preview-image::before,
.astro-card-image::before,
.astro-hero-image::before {
    inset: 0;
    background:
        radial-gradient(circle at 22% 22%, rgba(255,255,255,.18), transparent 22%),
        radial-gradient(circle at 80% 22%, rgba(244,211,94,.28), transparent 18%),
        radial-gradient(circle at 18% 74%, rgba(120,180,255,.14), transparent 18%),
        radial-gradient(circle at 44% 38%, rgba(255,255,255,.14), transparent 1.8%),
        radial-gradient(circle at 68% 58%, rgba(255,255,255,.12), transparent 1.6%),
        radial-gradient(circle at 83% 72%, rgba(255,255,255,.12), transparent 1.7%);
}

.astro-preview-image::after,
.astro-card-image::after,
.astro-hero-image::after {
    width: 180px;
    height: 180px;
    right: -30px;
    top: -28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,238,173,.72), rgba(255,214,102,.16) 42%, transparent 68%);
}

.astro-preview-glyph, .astro-card-symbol, .astro-hero-glyph {
    position: absolute;
    left: 1.2rem;
    bottom: 1rem;
    font-family: 'Playfair Display', serif;
    color: rgba(255,248,225,.93);
    text-shadow: 0 10px 22px rgba(0,0,0,.32);
}
.astro-preview-glyph { font-size: 3rem; left: 1.4rem; }
.astro-card-symbol { font-size: 3.2rem; }
.astro-hero-glyph { font-size: 5rem; left: 2rem; bottom: 1.5rem; }

.astro-preview-label, .astro-card-kicker, .astro-hero-kicker {
    position: absolute;
    top: 1.1rem;
    left: 1.2rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,245,220,.74);
}
.astro-preview-label { left: 1.5rem; top: 1.3rem; font-size: .78rem; }
.astro-card-kicker, .astro-hero-kicker { font-size: .74rem; }
.astro-hero-kicker { left: 2rem; top: 1.6rem; font-size: .82rem; }

.astro-preview-sub, .astro-card-caption, .astro-hero-caption {
    position: absolute;
    color: rgba(255,245,220,.82);
}
.astro-preview-sub { left: 1.5rem; right: 5.2rem; bottom: 1.2rem; font-size: .92rem; line-height: 1.4; }
.astro-card-caption { left: 1.2rem; right: 4.8rem; bottom: 1rem; font-size: .94rem; line-height: 1.35; }
.astro-hero-caption { left: 2rem; right: 2rem; bottom: 2rem; font-size: 1.02rem; line-height: 1.5; max-width: 22rem; }

.astro-hero-image {
    flex: 0 0 320px;
    min-height: 420px;
    border-radius: 18px;
    border: 1px solid rgba(212,175,55,.22);
    box-shadow: var(--sombra-profunda), var(--sombra-vino);
}

.astro-placeholder-visual {
    min-height: 320px;
    padding: 2.2rem;
    border-radius: 18px;
    border: 1px solid rgba(212,175,55,.16);
    background: linear-gradient(135deg, rgba(30,19,43,.95), rgba(59,39,78,.9) 45%, rgba(105,74,111,.84));
    box-shadow: var(--sombra-suave);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.astro-placeholder-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 16% 24%, rgba(255,255,255,.18), transparent 20%),
      radial-gradient(circle at 84% 18%, rgba(255,224,138,.22), transparent 19%),
      radial-gradient(circle at 78% 78%, rgba(123,173,255,.16), transparent 16%),
      radial-gradient(circle at 28% 72%, rgba(255,255,255,.12), transparent 1.6%),
      radial-gradient(circle at 52% 44%, rgba(255,255,255,.12), transparent 1.4%),
      radial-gradient(circle at 68% 58%, rgba(255,255,255,.12), transparent 1.4%);
}
.astro-placeholder-copy { position: relative; z-index: 1; max-width: 34rem; }
.astro-placeholder-copy i { font-size: 2.8rem; color: rgba(255,244,210,.88); display:block; margin-bottom:1rem; }
.astro-placeholder-copy strong { display:block; font-size: 1.6rem; color: var(--crema-vintage); margin-bottom: .55rem; }
.astro-placeholder-copy span { display:block; font-size: 1.05rem; color: rgba(255,245,220,.78); line-height: 1.7; }

/* Variantes cromáticas */
.preview-asc, .astro-art--astro-ascendente-aries, .astro-hero--astro-ascendente-aries {background:linear-gradient(135deg,#24152e 0%,#6b213e 48%,#d26a45 100%);}
.astro-art--astro-ascendente-tauro, .astro-hero--astro-ascendente-tauro {background:linear-gradient(135deg,#192822 0%,#31553d 46%,#8e7a45 100%);}
.astro-art--astro-ascendente-geminis, .astro-hero--astro-ascendente-geminis {background:linear-gradient(135deg,#17253b 0%,#2b4d70 45%,#8a75b8 100%);}
.astro-art--astro-ascendente-cancer, .astro-hero--astro-ascendente-cancer {background:linear-gradient(135deg,#15223d 0%,#244a63 46%,#7a8fb2 100%);}
.preview-fund, .astro-art--astro-casas-guia, .astro-hero--astro-casas-guia, .astro-art--astro-que-son-casas, .astro-hero--astro-que-son-casas {background:linear-gradient(135deg,#16152e 0%,#43306c 50%,#8da6d9 100%);}
.astro-art--astro-el-ascendente, .astro-hero--astro-el-ascendente {background:linear-gradient(135deg,#24152d 0%,#5a2c56 44%,#b67777 100%);}
.astro-art--astro-los-planetas, .astro-hero--astro-los-planetas {background:linear-gradient(135deg,#16142b 0%,#334162 42%,#9f7c4b 100%);}
.astro-art--astro-4-elementos, .astro-hero--astro-4-elementos {background:linear-gradient(135deg,#281626 0%,#5b2a37 34%,#935d33 68%,#3f6c72 100%);}
.astro-art--astro-modalidades, .astro-hero--astro-modalidades {background:linear-gradient(135deg,#1b1930 0%,#34456e 48%,#7c5b93 100%);}
.astro-art--astro-astrologia-millennial, .astro-hero--astro-astrologia-millennial {background:linear-gradient(135deg,#24142a 0%,#5f2749 42%,#db7d62 100%);}
.astro-art--astro-luna-escorpio, .astro-hero--astro-luna-escorpio {background:linear-gradient(135deg,#140f22 0%,#34192d 42%,#702948 100%);}
.astro-art--astro-destellos-mil, .astro-hero--astro-destellos-mil {background:linear-gradient(135deg,#15152c 0%,#3b3767 44%,#8677bf 100%);}
.astro-art--astro-canciones-mujeristas, .astro-hero--astro-canciones-mujeristas {background:linear-gradient(135deg,#2a1432 0%,#7a265c 45%,#dd8a4f 100%);}
.astro-art--astro-fomeque-calentona, .astro-hero--astro-fomeque-calentona {background:linear-gradient(135deg,#221220 0%,#6a1f39 46%,#d04f4f 100%);}
.astro-art--astro-moodboards-1, .astro-hero--astro-moodboards-1 {background:linear-gradient(135deg,#18152b 0%,#513d73 48%,#b48692 100%);}
.astro-art--astro-moodboards-2, .astro-hero--astro-moodboards-2 {background:linear-gradient(135deg,#151c31 0%,#35507d 44%,#a67ab7 100%);}
.astro-art--astro-signos-31-minutos, .astro-hero--astro-signos-31-minutos {background:linear-gradient(135deg,#281728 0%,#6a2e63 42%,#f0a24e 100%);}

@media (max-width: 900px) {
  .astro-hero-image { flex-basis: 100%; min-height: 280px; width: 100%; }
  .astro-hero-glyph { font-size: 4rem; }
}


.astro-categoria-meta {
    margin-top: .6rem;
    color: rgba(201, 184, 160, 0.76);
    font-size: 1.05rem;
    letter-spacing: .04em;
}

.astro-categoria-meta i {
    color: var(--dorado-antiguo);
    margin-right: .35rem;
}