h1 {
    /* font-size: calc(var(--font-size) * 1.7);
    font-weight: 400; */
    font-size: calc(var(--font-size) * 1.85);
    font-weight: 400;
}

h2 {
    /* font-size: calc(var(--font-size) * 2);
    font-weight: 500; */
    font-size: calc(var(--font-size) * 1.6);
    font-weight: 400;

    color: white;
}

.marca {
    margin-top: 3em;
    font-size: var(--font-size);
    margin-bottom: 5em;
}

.marca-image {
    /* border: 2px solid green; */
    width: 13em;
    margin-bottom: 1.6em;
}

.marca-title {
    text-align: center;
    margin-bottom: 1.6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedor-categorias {
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
}

.categoria {
    /* border: 2px solid green; */
    display: flex;
}

.categoria-image > img {
    width: 100%;
    /* width: 100%; */
    /* width: 760px; */
    /* height: 280px; */
}

.categoria-content {
    flex: 1;
    background-color: #005065;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 2em;
}
.categoria:last-child > .categoria-content {
    background-color: #508D9E;
}

.categoria-content {
    /* border: 2px solid green;     */
}

.categoria-content h2 {
    width: 10em;
}

.categoria-content > div {
    margin-top: .5em;
    /* border: 2px solid green; */
    display: flex;
    align-items: center;
    /* border: 2px solid red; */
    width: 100%;
    justify-content: flex-start;
}

.categoria-content a {
    /* color: white; */
    color: #005065;
    text-decoration: none;
    background-color: white;
    padding: .4em 1.5em;
    border-radius: 1em;
    display: flex;
    font-size: 1em;
}

.categoria-content a:hover {
    text-decoration: none;    
}

.categoria-content a:hover {

}

.categoria-content img {
    /* animation-name: arrow; */
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
.categoria-content .active {
    /* animation-name: arrow-extend; */
    animation-duration: 1.2s;
    animation-delay: .25s;
    position: relative;
    animation-iteration-count: infinite;
}



@keyframes arrow {
    0% {
        translate: -2em 0;
    }
    50% {
        translate: 0 0;
    }
    100% {
        translate: -2em 0;
    }
}

@keyframes arrow-extend {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

@media (max-width: 1200px) {
    h1 {
        font-size: calc(var(--font-size) * 1.8);
    }
    h2 {
        font-size: calc(var(--font-size) * 1.4);
    }
    .categoria-content {
        padding-left: 0;
        padding: 0 1.5em;
    }
}


@media (max-width: 1000px) {
    h1 {
        font-size: calc(var(--font-size) * 1.6);
    }
    h2 {
        font-size: calc(var(--font-size) * 1.3);
    }
    .categoria-content img {
        width: 3em;
    }
    .categoria-content a {
        padding: 0.3em 1.2em;
        font-size: .95em;
    }
}


@media (max-width: 800px) {
    h1 {
        font-size: calc(var(--font-size) * 1.5);
    }
    h2 {
        font-size: calc(var(--font-size) * 1.2);
        margin-bottom: 0;
    }
    .categoria-content {
        flex-direction: column;
    }
    .categoria-content img {
        width: 2.5em;
    }
    .categoria-content a {
        padding: 0.25em 1em;
        font-size: .85em;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: calc(var(--font-size) * 1.4);
    }
    h2 {
        font-size: calc(var(--font-size) * 1.15);
    }
    .categoria-content img {
        width: 2.25em;
    }
    .categoria-content a {
        padding: 0.2.5em 1em;
        font-size: .8em;
    }
}

@media (max-width: 500px) {
    h1 {
        font-size: calc(var(--font-size) * 1.3);
    }
    h2 {
        font-size: calc(var(--font-size) * 1.1);
        text-align: center;
    }
    .categoria {
        display: flex;
        flex-direction: column;
    }
    .categoria-content {
        justify-content: center;
        align-items: center;
        padding: 1em 0;
    }
    .categoria-content > div {
        width: auto;
    }
}