/* ── HERO ── */
.recursos-hero {
    /* Sustituir por: background-image: url('img/hero-recursos.webp'); */
    background-color: #2a1a10;
}

/* ── INTRODUCCIÓN ── */
.recursos-intro {
    background: var(--dark);
    padding: 70px 8%;
}

.recursos-intro-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.recursos-intro-inner p {
    font-family: 'Cardo', Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: var(--sand);
    line-height: 1.85;
}

/* ── BLOQUES GENERALES ── */
.recursos-bloque {
    padding: 90px 8%;
}

.recursos-bloque-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.recursos-bloque-desc {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 0.97rem;
    line-height: 1.85;
    color: var(--dark);
    margin-bottom: 50px;
    max-width: 720px;
}

.dark-bg { background: var(--dark); }

/* ── GRID DE CARDS ── */
.recursos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.recurso-card {
    background: var(--crema);
    padding: 30px;
    border-bottom: 3px solid var(--gold);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dark-card {
    background: var(--dark-mid);
    border-bottom-color: var(--gold);
}

.dark-card h3 {
    color: var(--crema);
}

.dark-card p {
    color: var(--sand);
    opacity: 0.85;
}

.recurso-icon {
    font-size: 1.8rem;
    color: var(--gold);
}

.recurso-card h3 {
    font-family: 'Cinzel';
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--terracotta);
    line-height: 1.4;
}

.recurso-card p {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--dark-mid);
    flex: 1;
}

.recurso-autor {
    font-family: 'Cinzel' !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px;
    color: var(--gold) !important;
    text-transform: uppercase;
}

/* ── BOTONES ── */
.recurso-btn {
    display: inline-block;
    font-family: 'Cinzel';
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--crema);
    background: var(--terracotta);
    padding: 12px 24px;
    transition: background 0.2s;
    align-self: flex-start;
    margin-top: auto;
}

.recurso-btn:hover { background: var(--terracotta-dark); }

.recurso-btn-light {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}

.recurso-btn-light:hover {
    background: var(--gold);
    color: var(--dark);
}

/* ── LIBROS ── */
.recurso-libro-img {
    width: 100%;
    height: 200px;
    background: var(--dark-mid);
    margin-bottom: 6px;
    /* Sustituir por: background-image: url('img/libro-X.webp'); background-size: cover; */
}

/* ── YOUTUBE ── */
.recursos-youtube {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

.youtube-card {
    display: flex;
    gap: 30px;
    align-items: center;
    background: rgba(43,29,22,0.4);
    padding: 20px;
}

.youtube-thumb {
    flex: 0 0 280px;
    height: 160px;
    background: var(--dark-mid);
    /* Sustituir por: background-image: url('img/thumb-X.webp'); background-size: cover; */
}

.youtube-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.youtube-info h3 {
    font-family: 'Cinzel';
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: var(--crema);
}

.youtube-info p {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 0.9rem;
    color: var(--sand);
    opacity: 0.85;
    line-height: 1.6;
}

.youtube-cta {
    text-align: center;
    margin-top: 20px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .recursos-grid {
        grid-template-columns: 1fr;
    }

    .youtube-card {
        flex-direction: column;
    }

    .youtube-thumb {
        flex: none;
        width: 100%;
    }
}