@font-face {
    font-family: 'Playfair_Display';
    src: url('../fuentes/Playfair_Display/static/PlayfairDisplay-Regular.ttf');
}

:root {
    /* Variables sin cambios */
    --rojo-primario: #8A0303;
    --rojo-secundario: #C1121F;
    --rojo-intenso: #a01729;
    --rojo-claro: #d63384; 
    --rojo-coral: #c94a65;
    --crema-puro: #fefdfb;
    --blanco-puro: #ffffff;
    --gris-neutro: #6c757d;
    --negro-intenso: #000000;
}

/* ====================================
    RESET Y CONFIGURACIÓN BASE
==================================== */
/* ... (sin cambios) ... */
/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

/* body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
} */

/* ====================================
    ANIMACIONES
==================================== */
/* ... (sin cambios) ... */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ====================================
    SECCIÓN PRINCIPAL (AJUSTADA)
==================================== */
.podcast-preview {
    /* *** AJUSTE SOLICITADO: Subir y Comprimir (Padding reducido de 60px a 40px) *** */
    padding: 40px 20px; 
    min-height: 50vh; 
    background-color: var(--negro-intenso);
    text-align: center;
    position: relative;
    overflow: hidden; 
}

/* ====================================
    ELEMENTOS DECORATIVOS DE FONDO
==================================== */
/* ... (sin cambios) ... */
.bg-decoration {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(80px);
    pointer-events: none;
}

.decoration-1 {
    width: 400px;
    height: 400px;
    background: var(--rojo-primario);
    top: -100px;
    left: -100px;
    animation: float 8s ease-in-out infinite;
}

.decoration-2 {
    width: 350px;
    height: 350px;
    background: var(--rojo-secundario);
    bottom: -80px;
    right: -80px;
    animation: float 10s ease-in-out infinite reverse;
}

.decoration-3 {
    width: 250px;
    height: 250px;
    background: var(--rojo-coral);
    top: 50%;
    right: 10%;
    animation: float 12s ease-in-out infinite;
}

/* ====================================
    CÍRCULOS DECORATIVOS PEQUEÑOS
==================================== */
/* ... (sin cambios) ... */
.circle-accent {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--rojo-secundario);
    border-radius: 50%;
    animation: glow 3s ease-in-out infinite;
    pointer-events: none;
}

.circle-1 { top: 15%; left: 15%; }
.circle-2 { top: 25%; right: 20%; animation-delay: 1s; }
.circle-3 { bottom: 30%; left: 25%; animation-delay: 2s; }
.circle-4 { bottom: 20%; right: 15%; animation-delay: 1.5s; }

/* ====================================
    TÍTULO PRINCIPAL
==================================== */
.preview-title {
    /* *** AJUSTE SOLICITADO: Comprimir (Margin-bottom reducido de 40px a 30px) *** */
    margin-bottom: 30px; 
    color: var(--blanco-puro);
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 30px rgba(193, 18, 31, 0.5); 
}

/* ... (Resplandor detrás del título sin cambios) ... */
.preview-title::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--rojo-primario);
    border-radius: 50%;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.2;
    filter: blur(40px);
    z-index: -1;
}

/* ====================================
    TARJETA DEL PODCAST
==================================== */
.podcast-card {
    max-width: 750px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(193, 18, 31, 0.3);
    /* *** AJUSTE SOLICITADO: Comprimir (Padding reducido de 40px a 30px) *** */
    padding: 30px; 
    border: 1px solid rgba(193, 18, 31, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
}

/* ... (Barra superior decorativa sin cambios) ... */
.podcast-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rojo-primario), var(--rojo-secundario), var(--rojo-coral), var(--rojo-secundario), var(--rojo-primario));
    border-radius: 20px 20px 0 0;
    background-size: 200% 100%;
}

/* ====================================
    CONTENIDO DE LA TARJETA
==================================== */
.card-content {
    font-family: 'Playfair_Display';
    text-align: center;
    /* *** AJUSTE SOLICITADO: Comprimir (Margin-bottom reducido de 30px a 20px) *** */
    margin-bottom: 20px; 
}

/* ... (Títulos, descripción y divisor sin cambios significativos) ... */
.episode-title {
    /* color: var(--blanco-puro); */
    color: #8A0303;
    font-size: 1.9em;
    margin-bottom: 15px; /* Reducción de 20px a 15px */
    font-weight: 700;
}

.highlightPodcast {
    color: var(--blanco-puro);
    font-family: 'Playfair_Display';
}

.divider {
    width: 100px;
    height: 7px;
    background: linear-gradient(90deg, transparent, var(--rojo-secundario), transparent);
    margin: 15px auto; /* Reducción de 20px a 15px */
    border-radius: 2px;
    box-shadow: 0 0 10px var(--rojo-secundario);
}

.episode-description {
    color: var(--rojo-intenso);
    font-size: 1.80em;
    line-height: 1.8; /* Reducción de 1.9 a 1.8 para comprimir texto */
    max-width: 650px;
    margin: 0 auto 10px auto; /* Añadido margin-bottom de 10px para empujar el embed */
    opacity: 0.9;
}


/* ====================================
    CONTENEDOR DEL EMBED DE SPOTIFY (MINIATURA MÁS GRANDE)
==================================== */
.spotify-embed-container {
    /* *** AJUSTE SOLICITADO: Subir y Comprimir (Margin reducido de 30px a 20px) *** */
    margin: 20px 0; 
    width: 100%;
    overflow: hidden; 
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(193, 18, 31, 0.4); 
    border: 1px solid rgba(193, 18, 31, 0.3);
}

/* *** AJUSTE SOLICITADO: Aumentar la Altura del Reproductor (Miniatura más grande) *** */
.spotify-embed-container iframe {
    /* Altura original en el HTML era 232px. La aumentamos a 350px para hacerlo más grande. */
    height: 350px !important; /* Usamos !important para asegurar que sobrescriba el 'height="232"' del HTML, si lo mantienes. */
    border-radius: 12px;
    border: none; 
}

/* ====================================
    BOTÓN CTA (CALL TO ACTION)
==================================== */
.cta-button {
    /* *** AJUSTE SOLICITADO: Comprimir (Margin-top implícito eliminado al reducir el margen del contenedor superior) *** */
    display: inline-block;
    background: linear-gradient(135deg, var(--rojo-primario) 0%, var(--rojo-secundario) 100%);
    color: var(--blanco-puro);
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.05em;
    transition: all 0.4s ease;
    border: none;
    box-shadow: 0 5px 20px rgba(138, 3, 3, 0.3);
    position: relative;
    overflow: hidden;
}

/* ... (Estilos de Hover sin cambios) ... */

/* ====================================
    ICONO DECORATIVO DE MICRÓFONO
==================================== */
.mic-icon {
    /* *** AJUSTE SOLICITADO: Comprimir (Margin-bottom reducido de 15px a 10px) *** */
    font-size: 3.5em; 
    margin-bottom: 10px; 
    filter: drop-shadow(0 0 20px rgba(193, 18, 31, 0.6)); 
}

/* ====================================
    DISEÑO RESPONSIVE PARA MÓVILES
==================================== */
@media (max-width: 768px) {
    .podcast-preview {
        /* *** AJUSTE SOLICITADO: Comprimir (Padding reducido de 40px a 30px) *** */
        padding: 30px 15px;
        min-height: auto; 
        max-height: none; 
    }

    /* ... (Otros ajustes de texto sin cambios) ... */
    .preview-title {
        font-size: 2.2em;
        margin-bottom: 20px; /* Reducción de 30px a 20px */
    }
    
    .podcast-card {
        padding: 25px 20px; /* Reducción de padding de la tarjeta */
    }

    /* *** AJUSTE SOLICITADO: Asegurar miniatura grande en móviles también *** */
    .spotify-embed-container iframe {
        height: 250px !important; /* Altura más grande que la original, pero menor que en desktop para móviles */
    }

    /* ... (Ocultar decoraciones sin cambios) ... */
    .decoration-1, .decoration-2, .decoration-3, .circle-accent {
        display: none;
    }
}

/* ====================================
    RESPONSIVE PARA TABLETS
==================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    .podcast-preview {
        padding: 40px 20px; /* Reducción de 50px a 40px */
    }

    .preview-title {
        font-size: 2.5em;
    }
}