.button, .footer-social a {
    transition: .2s ease-in-out
}

.button, .resources-hero .subtext p {
    font-family: var(--font-family-family)
}

.resource-card, .resources-hero {
    position: relative;
    overflow: hidden
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    text-decoration: none;
    gap: var(--spacing-xs);
    cursor: pointer
}

.button--lg, .button--md {
    border: none;
    background: 0 0
}

.button--md {
    font-size: var(--font-size-button-medium);
    line-height: var(--font-size-button-medium);
    display: flex;
    min-height: 36px;
    height: 36px;
    padding: var(--spacing-md) var(--spacing-lg)
}

.button--lg, .resource-download {
    min-height: 48px;
    line-height: var(--font-size-button-large)
}

.button--lg {
    font-size: var(--font-size-button-large);
    padding: var(--spacing-sm) var(--spacing-xl);
    height: 48px
}

.button--filled {
    background-color: var(--act-fill-bg);
    color: var(--act-fill-fg);
    border: 1px solid var(--act-fill-border)
}

.button--filled:hover {
    background-color: var(--act-fill-bg-hover)
}

.button--filled:focus {
    background-color: var(--act-fill-bg-focused);
    outline: 2px solid var(--act-fill-bg-focused);
    outline-offset: 2px
}

.button--filled:active {
    background-color: var(--act-fill-bg-pressed)
}

.button--filled:disabled {
    background-color: var(--act-fill-bg-disabled);
    color: var(--act-fill-fg-disabled);
    cursor: not-allowed
}

.button .arrow-long-left {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("https://rankioz.com/wp-content/themes/rankioz/assets/images/arrow-long-left.svg") center/contain no-repeat;
    margin-left: var(--spacing-xs);
    vertical-align: middle
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end
}

.footer-social a {
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.footer-social a:hover {
    background: var(--primary-500);
    transform: translateY(-2px)
}

.footer-social a svg {
    width: 20px;
    height: 20px;
    fill: var(--black-500)
}

.footer-social a:hover svg {
    fill: #fff
}

.resources-hero {
    padding: 5rem 0;
    background: #f3f3f3
}

.resources-hero .hero-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 2rem 0;
    position: relative;
    z-index: 2
}

.resources-hero .hero-container {
    width: 100%;
    max-width: 1440px;
    height: auto;
    padding: var(--spacing-4xl) var(--spacing-5xl);
    gap: 60px;
    border-radius: var(--radius-lg);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    color: var(--white-500);
    background: linear-gradient(0deg, var(--background-bg-surface-1, #fff), var(--background-bg-surface-1, #fff)), radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 222, .2) 0, rgba(255, 250, 222, 0) 100%)
}

.resources-hero .hero-title, .resources-hero .subtext {
    gap: var(--spacing-2xl);
    display: flex;
    height: auto;
    width: 100%
}

.resources-hero .hero-left {
    text-align: left;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column
}

.resources-hero .hero-title {
    margin: 0;
    flex-direction: column
}

.resources-hero .hero-title h1 {
    font-size: var(--font-size-heading-1-landing-page);
    font-weight: var(--font-weight-medium);
    color: var(--black-500);
    margin-bottom: 2rem;
    line-height: 1.2;
    text-align: left;
    width: 100%
}

.resources-hero .subtext {
    max-width: 704px;
    margin: 0;
    flex-direction: row
}

.resources-hero .subtext .arrow {
    width: 83px;
    transform: rotate(0);
    margin: 0;
    background: 0 0
}

.resources-hero .subtext p {
    width: 100%;
    height: auto;
    gap: 0;
    font-size: var(--font-size-body-1);
    font-weight: 500;
    line-height: var(--line-height-body-1);
    letter-spacing: var(--letterspacingepaciado-leve);
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0;
    color: var(--text-secondary)
}

.resources-hero .hero-title-small {
    display: none
}

.resources-section {
    padding: 48px 0;
    background: #f3f3f3
}

.resources-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem
}

.resources-content {
    width: 100%
}

.resources-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.resource-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, .05);
    transition: .3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between
}

.resource-card:hover {
    transform: translateY(-4px)
}

.resource-card:focus {
    outline: #ffc700 solid 2px;
    outline-offset: 2px
}

.resource-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255, 199, 0, .1), rgba(242, 168, 65, .1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #ffc700
}

.resource-icon svg {
    width: 32px;
    height: 32px
}

.resource-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e120d;
    margin-bottom: 1rem;
    line-height: 1.3
}

.resource-content p {
    font-size: 1rem;
    color: #56524d;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1
}

.resource-content {
    display: flex;
    flex-direction: column;
    flex: 1
}

.resource-meta {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    margin-bottom: 1.5rem;
    flex-wrap: wrap
}

.cta-content .button, .resource-download {
    transition: .3s;
    text-decoration: none;
    gap: .5rem
}

.resource-pages, .resource-type {
    font-size: .875rem;
    font-weight: 500;
    padding: .25rem .75rem;
    border-radius: .25rem;
    background: rgba(184, 171, 158, .1);
    color: #56524d
}

.resource-type {
    background: rgba(255, 199, 0, .1);
    color: #806300
}

.resource-download {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    background: var(--act-fill-bg);
    color: var(--act-fill-fg);
    border: 1px solid var(--act-fill-border);
    padding: var(--spacing-sm) var(--spacing-xl);
    height: 48px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-button-large)
}

.resource-download:hover {
    background: var(--act-fill-bg-hover);
    transform: translateY(-1px)
}

.resource-download:focus {
    background: var(--act-fill-bg-focused);
    outline: 2px solid var(--act-fill-bg-focused);
    outline-offset: 2px
}

.resource-download:active {
    background: var(--act-fill-bg-pressed)
}

.resources-cta {
    background: linear-gradient(135deg, #1e120d 0, #0b0605 100%);
    padding: 4rem 0;
    text-align: center
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem
}

.cta-content h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.2
}

.cta-content p {
    font-size: 1.25rem;
    color: rgba(184, 171, 158, .7);
    margin-bottom: 2rem;
    line-height: 1.6
}

.cta-content .button {
    background: #ffc700;
    color: #1e120d;
    border: none;
    font-weight: 700;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    font-size: .9375rem
}

.cta-content .button:hover {
    background: #cc9f00;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 199, 0, .3);
    color: #1e120d
}

@media (max-width: 768px) {
    span.arrow-long-left.notshowmobile {
        display: none
    }

    .resources-container {
        padding: 0 24px;
        width: 90%;
    }

    .resources-cta, .resources-hero, .resources-section {
        padding: 3rem 0
    }

    .resources-container, .resources-hero .hero-content {
        padding: 0 1rem
    }

    .resources-hero .hero-container {
        padding: var(--spacing-xl) var(--spacing-2xl);
        border-radius: var(--radius-lg)
    }

    .resources-hero .hero-title h1 {
        font-size: 2.5rem
    }

    .resources-hero .subtext {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .5rem
    }

    .resources-hero .subtext .arrow {
        margin-top: 0
    }

    .resources-hero .subtext p {
        font-size: 1rem;
        text-align: center
    }

    .resources-grid {
        grid-template-columns:1fr;
        gap: 1.5rem;
        margin-bottom: 2rem
    }

    .resource-card {
        padding: 1.5rem
    }

    .resource-icon {
        width: 56px;
        height: 56px
    }

    .resource-icon svg {
        width: 28px;
        height: 28px
    }

    .cta-content h2 {
        font-size: 2rem
    }
}

@media (max-width: 480px) {
    .resources-hero .hero-title h1 {
        font-size: 2rem
    }

    .cta-content h2, .resources-header h2 {
        font-size: 1.75rem
    }

    .resource-meta {
        flex-direction: column;
        gap: .5rem
    }
}

.hero-left h1 {
    max-width: 758px
}

.button--onlyicon, a.button--onlyicon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    padding: 0;
    text-align: center
}

li {
    padding: 5px
}

@media (max-width: 739px) {
    .resources-hero {
        background-color: var(--white-500);
        padding: 60px;
        gap: var(--spacing-4xl);
        margin-top: 48px;
        padding-left: 64px;
        padding-right: 64px;
    }

    .resources-hero .hero-content {
        padding-left: 0;
        padding-right: 0;
    }

    .resources-hero .hero-container {
        padding-left: 0;
        padding-right: 0;
    }

    .resources-hero .hero-title h1 {
        width: 97%;
    }
}

@media (max-width: 1024px) {
    .subtext img {
        display: none;
    }

    .resources-hero .subtext p {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #000;
        white-space: wrap;
    }

    .resources-hero .hero-title h1 {
        width: 100%;
        height: auto;
        gap: 0;
        line-height: var(--line-height-heading-2-landing_page);
        letter-spacing: var(--letterspacingpegado);
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin: 0;
        white-space: wrap;
        font-weight: var(--font-weight-medium);
        min-height: 180px;
    }

    .resources-hero .hero-title h1 {
        width: 97%;
    }
}

@media (max-width: 768px) {
    .footer-section {
        margin-top: 0;
    }
}