/* Estilos para episodios */
.recoo-episodios-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.recoo-episodio {
    display: grid;
    grid-template-columns: 250px auto 1fr 150px;
    gap: 2rem;
    align-items: center;
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform .2s ease;
}

.recoo-episodio:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.recoo-left {
    grid-column: 1;
    width: 100%;
}

.recoo-video-embed {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px;
}

.recoo-video-embed iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

.recoo-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.recoo-episode-number {
    grid-column: 2;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    justify-self: center;
    align-self: center;
    white-space: nowrap;
    
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ccc;
}

.recoo-center {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recoo-date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.recoo-center h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #222;
    line-height: 1.4;
    flex-grow: 1;
}

.recoo-excerpt {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.recoo-bottom-links {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    align-items: center;
}

.recoo-right {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

.recoo-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.recoo-read-more,
.recoo-download {
    background: transparent;
    padding: 0;
    border-radius: 0;
    text-align: left;
    color: #333;
    font-weight: 600;
    font-size: 0.9em;
    opacity: 0.8;
}

.recoo-read-more {
    text-decoration: underline;
}

.recoo-download {
    text-decoration: none;
}

.recoo-read-more:hover,
.recoo-download:hover {
    opacity: 1;
    transform: none;
    background: transparent;
}

.recoo-watch {
    background: transparent;
    color: #333;
    font-size: 0.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: normal;
}

.recoo-watch:hover {
    opacity: 0.7;
    transform: none;
    background: transparent;
}

.recoo-watch-icon {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M8 5v14l11-7z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -0.1em; /* Fine-tune vertical alignment */
}

.recoo-listen {
    background: #28a745;
    color: #fff;
}

.recoo-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 1024px) {
    .recoo-episodio {
        grid-template-columns: 200px auto 1fr 120px;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .recoo-episodio {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .recoo-left {
        grid-column: 1;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .recoo-episode-number {
        grid-column: 1;
        writing-mode: horizontal-tb;
        justify-self: start;
        margin-bottom: 1rem;
        color: #888;
    }
    
    .recoo-center {
        grid-column: 1;
    }
    
    .recoo-right {
        grid-column: 1;
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .recoo-bottom-links {
        flex-direction: column;
    }
}

/* Service Filter Styles */
.recoo-service-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.recoo-service-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    background: white;
    color: #495057;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recoo-service-btn:hover {
    background: #e9ecef;
}

.recoo-service-btn.active {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.recoo-service-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.recoo-service-icon.youtube {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
}

.recoo-service-icon.spotify {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>');
}

.recoo-service-icon.apple {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.997 6.124c0-.738-.065-1.47-.24-2.19-.317-1.31-1.062-2.31-2.18-3.043C21.003.517 20.373.285 19.7.164c-.517-.093-1.038-.137-1.563-.132-.91-.022-1.613.119-2.322.335-1.086.33-2.056.854-2.836 1.743-.098.147-.161.343-.161.35-.152.19-.275.42-.275.65.004.067.02.135.038.2.006.107.044.21.117.3.19.193.545.29.974.29.503 0 .897-.087 1.154-.23.733-.37 1.463-.554 2.185-.554.69 0 1.355.14 1.994.416 1.02.44 1.85 1.11 2.49 1.99.586.79.979 1.66 1.18 2.61.152.71.228 1.44.228 2.19 0 .81-.096 1.58-.286 2.31-.344 1.08-.907 2.04-1.694 2.88-.786.85-1.72 1.51-2.8 1.98-.964.42-1.963.63-2.993.63-.722 0-1.327-.08-1.815-.24-.567-.18-1.073-.45-1.52-.81-.452-.37-.83-.81-1.32-.303-.51-.537-1.05-.7-1.62-.135-.47-.21-.95-.21-1.44 0-.66.098-1.29.294-1.89.197-.61.504-1.17.924-1.68.393-.48.876-.88 1.45-1.19.574-.31 1.215-.47 1.92-.47.625 0 1.21.12 1.754.35.545.23 1.02.55 1.424.94.41.4.733.86.97 1.38.234.52.35 1.06.35 1.63 0 .45-.06.87-.174 1.26-.115.39-.31.75-.583 1.08-.273.33-.595.6-.97.81-.375.21-.773.31-1.197.31-.47 0-.875-.1-1.215-.29-.34-.19-.615-.47-.823-.83-.147-.26-.25-.54-.307-.84-.057-.3-.08-.59-.08-.87 0-.2.02-.39.06-.57.055-.29.13-.56.224-.82.19-.52.49-.97.9-1.34.41-.37.885-.63 1.43-.78.545-.15 1.11-.23 1.688-.23.517 0 1.016.06 1.495.18.479.12.935.29 1.367.51.432.22.827.48 1.185.79.36.31.67.65.93 1.02.26.37.463.77.607 1.2.145.43.23.87.257 1.32.027.45.023.89-.012 1.32-.035.43-.102.85-.203 1.26-.1.41-.235.8-.404 1.17-.168.37-.37.72-.605 1.04-.234.32-.503.62-.807.89-.304.27-.643.49-1.016.68-.373.19-.774.34-1.2.44-.428.1-.88.15-1.355.15-.76 0-1.466-.13-2.118-.39-.652-.26-1.24-.63-1.767-1.11-.526-.48-.977-1.05-1.353-1.72-.375-.67-.655-1.4-.84-2.19-.183-.79-.276-1.59-.276-2.4 0-1.43.263-2.78.79-4.05.527-1.27 1.253-2.37 2.18-3.31.925-.94 2.005-1.67 3.235-2.2C20.4.41 21.744.14 23.23.14c.38 0 .76.02 1.14.07.38.05.76.12 1.13.21.37.09.73.2 1.09.33.36.13.705.28 1.04.45l.915-1.38L23.934.94 23.997 6.124z"/></svg>');
}

.recoo-service-icon.instagram {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>');
}

/* Active button icon colors */
.recoo-service-btn.active .recoo-service-icon.youtube {
    filter: brightness(0) invert(1);
}

.recoo-service-btn.active .recoo-service-icon.spotify {
    filter: brightness(0) invert(1);
}

.recoo-service-btn.active .recoo-service-icon.apple {
    filter: brightness(0) invert(1);
}

.recoo-service-btn.active .recoo-service-icon.instagram {
    filter: brightness(0) invert(1);
}

/* Responsive styles for service filters */
@media (max-width: 768px) {
    .recoo-service-filters {
        justify-content: center;
    }
    
    .recoo-service-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}