/* ============================================================
   RECURSOS — ARCHIVO / CATÁLOGO
   ============================================================ */

.recursos-archivo {
    background: #f7f4ee;
    color: #241f1b;
}

/* ============================================================
   HERO — RECURSOS
   Sistema común de páginas interiores
   ============================================================ */

.recursos-hero {

    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    box-sizing: border-box;

    background: #f3efe7;

    padding-top: 9rem;
    padding-bottom: 76px;
}

.recursos-hero .contenedor {

    width: min(1200px, calc(100% - 80px));

    max-width: 1200px;

    margin: 0 auto;

    padding: 0;
}

/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */

.recursos-kicker {

    display: block;

    margin: 0 0 16px;

    font-family: var(
        --pads-font-sans,
        "Source Sans 3",
        sans-serif
    );

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #5f6d6b;
}

/* ------------------------------------------------------------
   TÍTULO
   ------------------------------------------------------------ */

.recursos-hero h1 {

    max-width: 900px;

    margin: 0;

    font-family: var(
        --pads-font-heading,
        "Cormorant Garamond",
        serif
    );

    font-size: clamp(48px, 5vw, 72px);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.025em;

    color: #241f1b;
}


/* ============================================================
   ÍNDICE / CONTADOR
   ============================================================ */

.recursos-indice {
    border-bottom: 1px solid #cfc8bf;
}

.recursos-indice .contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}

.recursos-indice-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.5rem 0;
}

.recursos-indice-inner span {
    font-family: var(--prosig-font-sans, sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;

    color: #777068;
}

.recursos-indice-inner strong {
    font-family: var(--prosig-font-sans, sans-serif);
    font-size: .9rem;
    font-weight: 500;

    color: #241f1b;
}

/* ============================================================
   CATÁLOGO
   ============================================================ */

.recursos-catalogo {
    padding: 5.5rem 0 20rem;
}

.recursos-catalogo .contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}

.recursos-grid {
    display: grid;

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

    column-gap: 2.5rem;
    row-gap: 5.5rem;
}


/* ============================================================
   TARJETA
   ============================================================ */

.recurso-card {
    min-width: 0;
}


/* ============================================================
   IMAGEN
   ============================================================ */

.recurso-card-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease,
        opacity .5s ease;
}

.recurso-card:hover .recurso-card-imagen img {
    transform: scale(1.025);
    opacity: .94;
}



/* ============================================================
   CONTENIDO
   ============================================================ */

.recurso-card-contenido {
    padding-top: 1.35rem;
}


/* ============================================================
   CATEGORÍA / TIPO
   ============================================================ */

.recurso-card-taxonomia {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    margin-bottom: .75rem;
}

.recurso-card-taxonomia span {
    font-family: var(--prosig-font-sans, sans-serif);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.4;
    text-transform: uppercase;

    color: #777068;
}

.recurso-card-taxonomia span + span::before {
    content: "·";
    margin-left: .05rem;
    margin-right: .5rem;

    color: #aaa39b;
}


/* ============================================================
   TÍTULO
   ============================================================ */

.recurso-card-titulo {
    margin: 0;
}

.recurso-card-titulo a {
    font-family: var(--prosig-font-serif, Georgia, serif);
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.15;

    color: #241f1b;
    text-decoration: none;
}

.recurso-card-titulo a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}


/* ============================================================
   DESCRIPCIÓN
   ============================================================ */

.recurso-card-descripcion {
    max-width: 95%;

    margin: 1rem 0 0;

    font-family: var(--prosig-font-sans, sans-serif);
    font-size: .94rem;
    line-height: 1.7;

    color: #5e5852;
}


/* ============================================================
   INSTITUCIÓN
   ============================================================ */

.recurso-card-institucion {
    margin-top: 1.15rem;

    font-family: var(--prosig-font-sans, sans-serif);
    font-size: .76rem;
    line-height: 1.5;
    letter-spacing: .01em;

    color: #777068;
}


/* ============================================================
   ENLACE
   ============================================================ */

.recurso-card-enlace {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    margin-top: 1.4rem;

    font-family: var(--prosig-font-sans, sans-serif);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .01em;

    color: #241f1b;
    text-decoration: none;
}

.recurso-card-enlace span {
    font-size: 1rem;
    line-height: 1;

    transition: transform .2s ease;
}

.recurso-card-enlace:hover {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.recurso-card-enlace:hover span {
    transform: translate(.15rem, -.15rem);
}


/* ============================================================
   SIN RECURSOS
   ============================================================ */

.recursos-vacio {
    padding: 5rem 0;

    border-top: 1px solid #d2cbc2;
}

.recursos-vacio h2 {
    max-width: 700px;

    margin: 0;

    font-family: var(--prosig-font-serif, Georgia, serif);
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.1;
}

.recursos-vacio p {
    max-width: 600px;

    margin-top: 1rem;

    font-family: var(--prosig-font-sans, sans-serif);
    line-height: 1.7;

    color: #5e5852;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 950px) {

    .recursos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 4rem;
    }

}


@media (max-width: 650px) {

    .recursos-hero {

        padding: 4.5rem 0 4rem;
    }

    .recursos-hero .contenedor {

        width: min(
            100% - 2rem,
            1200px
        );

        padding: 0;
    }

    .recursos-hero h1 {

        font-size: clamp(
            3rem,
            13vw,
            4.5rem
        );

        line-height: .98;
    }

    .recursos-kicker {

        margin-bottom: 16px;
    }
}