* =========================================================
PÁGINA DE RECURSOS
========================================================= */

.resources-page {
padding-top: 90px;
}

/* =========================================================
HERO
========================================================= */

.resources-hero {
min-height: 420px;

display: flex;
justify-content: center;
align-items: center;

text-align: center;

background:
    linear-gradient(
        rgba(0, 0, 0, 0.80),
        rgba(0, 0, 0, 0.80)
    ),
    url("../assets/img/hero.jpg");

background-size: cover;
background-position: center;

}

.resources-hero-content {
width: 100%;
max-width: 850px;
padding: 20px;
}

.resources-hero h2 {
font-family: Cinzel, serif;

font-size: 65px;

color: #d9b96d;

margin-bottom: 25px;

}

.resources-hero p {
font-size: 21px;

line-height: 1.7;

color: #d1c7ac;

}

/* =========================================================
SECCIONES
========================================================= */

.resources-section {
padding: 90px 5%;

text-align: center;

}

.resources-section h2 {
font-family: Cinzel, serif;

font-size: 45px;

color: #d9b96d;

margin-bottom: 20px;

}

.resources-intro {
width: 100%;
max-width: 750px;

margin: 0 auto 50px auto;

color: #bdb7a5;

font-size: 18px;

line-height: 1.7;

}

/* =========================================================
SECCIÓN OSCURA
========================================================= */

.resources-section.dark-section {
background: #090909;
}

/* =========================================================
GRID DE RECURSOS
========================================================= */

.resources-page .resources-grid {
width: 100%;
max-width: 1200px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 30px;

align-items: stretch;

}

/* =========================================================
TARJETAS
========================================================= */

.resources-page .resource-card {
width: 100%;

min-width: 0;

min-height: 330px;

padding: 35px 30px;

background: #181818;

border: 1px solid #2c2c2c;

border-radius: 10px;

text-align: center;

display: flex;

flex-direction: column;

align-items: center;

transition: transform 0.3s ease,
            border-color 0.3s ease;

}

.resources-page .resource-card {
transform: translateY(-8px);

border-color: #7c1111;

}

/* =========================================================
TARJETAS DESTACADAS
========================================================= */

.resources-page .resource-card.featured {
border-top: 3px solid #7c1111;
}

/* =========================================================
NÚMEROS
========================================================= */

.resources-page .resource-number {
font-family: Cinzel, serif;

font-size: 18px;

font-weight: bold;

color: #7c1111;

margin-bottom: 15px;

}

/* =========================================================
TÍTULOS
========================================================= */

.resources-page .resource-card h3 {
font-family: Cinzel, serif;

font-size: 25px;

line-height: 1.3;

color: #d9b96d;

margin-bottom: 20px;

}

/* =========================================================
TEXTO
========================================================= */

.resources-page .resource-card p {
color: #c4c0b5;

font-size: 16px;

line-height: 1.7;

margin-bottom: 30px;

max-width: 430px;

}

/* =========================================================
BOTONES
========================================================= */

/*
Utilizamos el mismo botón .btn del style.css
principal de la página.
*/

.resources-page .resource-card .btn {
margin-top: auto;

align-self: center;

}

/* =========================================================
SECCIÓN FINAL
========================================================= */

.resources-final {
padding: 110px 20px;

text-align: center;

background:
    linear-gradient(
        rgba(0, 0, 0, 0.80),
        rgba(0, 0, 0, 0.80)
    ),
    url("../assets/img/hero.jpg");

background-size: cover;

background-position: center;

}

.resources-final h2 {
font-family: Cinzel, serif;

font-size: 45px;

color: #d9b96d;

margin-bottom: 20px;

}

.resources-final p {
color: #d1c7ac;

font-size: 19px;

margin-bottom: 30px;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {

.resources-page .resources-grid {
    grid-template-columns: repeat(2, 1fr);
}

}

/* =========================================================
MÓVIL
========================================================= */

@media (max-width: 650px) {

.resources-page {
    padding-top: 140px;
}


.resources-hero {
    min-height: 350px;
}


.resources-hero h2 {
    font-size: 45px;
}


.resources-hero p {
    font-size: 18px;
}


.resources-section {
    padding: 70px 20px;
}


.resources-section h2 {
    font-size: 35px;
}


.resources-page .resources-grid {
    grid-template-columns: 1fr;

    gap: 20px;
}


.resources-page .resource-card {
    min-height: 0;

    padding: 30px 25px;
}


.resources-final h2 {
    font-size: 35px;
}

}

/* =========================================================
MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 450px) {

.resources-hero h2 {
    font-size: 38px;
}


.resources-hero p {
    font-size: 16px;
}


.resources-section h2 {
    font-size: 30px;
}


.resources-page .resource-card h3 {
    font-size: 22px;
}

}