/* Variables */
:root {
    /* Colores */
    --gold: #e8b34b;
    --dark: #0d0d0d;
    --light: #ffffff;

    /* Tamaños de letra */
    --fontL: clamp(1.6rem, 1.107rem + 2.1033vw, 3rem);
    --fontM: clamp(1.2rem, 0.9887rem + 0.9014vw, 1.8rem);
    --fontS: clamp(1rem, 0.8592rem + 0.6009vw, 1.4rem);
    --fontXS: clamp(0.8rem, 0.6944rem + 0.4507vw, 1.1rem);

    /* Spacers */
    --spacer--sm: clamp(12px, 6.615383px + 1.538462vw, 22px);
    --spacer--md: clamp(24px, 15.384617px + 2.461538vw, 40px);
    --spacer--lg: clamp(1.875rem, 0.3345rem + 6.5728vw, 6.25rem);

    /* Hover effect */
    --clippy: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

/* Ajustes */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: var(--dark);
    color: var(--light);
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Elmentos generales */

.section__title {
    font-size: var(--fontL);
    text-align: center;
}

/* ---Inicio--- */

/* Hero */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacer--lg);
    padding: var(--spacer--lg);
}

.hero__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer--md);
}

.hero__left h1 {
    text-align: center;
    font-size: 2rem;
}

.hero__left--icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    text-align: center;
    border: 2px solid var(--gold);
    padding: 1.2rem;
    border-radius: 1rem;
    transition: all .3s;
}

.hero__left--icons:hover {
    transform: scale(1.1);
}

.hero__left--icons__link,
.hero__left--icons__link a {
    display: flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: var(--light);
}

.hero__left--icons__link a:hover {
    color: var(--gold);
}


.hero__left--icons__link i {
    font-size: 2rem;
}

.hero__left--img {
    max-width: 460px;
}

.hero__left--img img {
    width: 100%;
    border-radius: 50%;
    border: 4px solid var(--gold);
    animation: move-vector 2s linear infinite;
}


@keyframes move-vector {
    0% {
        transform: translateY(15px);
    }

    50% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(15px);
    }
}

.hero__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacer--lg);
}

.hero__right a {
    font-size: var(--fontM);
    text-decoration: none;
    color: var(--light);
}

.hero__right a::after {
    content: "";
    display: block;
    background: var(--gold);
    width: 100%;
    height: 2px;
    clip-path: var(--clippy);
    transition: all .3s;
}

.hero__right a:hover {
    --clippy: polygon(0 0, 100% 0, 100% 99%, 0 100%);
}

/* ---Formación--- */

/* Cards */
.cards {
    padding: var(--spacer--md);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacer--sm);
}

.info__card {
    display: flex;
    gap: 2rem;
    align-items: center;
    border: 2px solid var(--gold);
    padding: var(--spacer--sm);
    transition: all .3s;
}

.info__card:hover {
    background: var(--gold);
}

.info__card:hover .info__card-text--year {
    color: var(--dark);
}

.info__card:hover .info__card-text--location {
    color: var(--dark);
}

.info__card:hover .info__card-text--name {
    color: var(--dark);
}

.info__card:hover .info__card-img {
    border: 2px solid var(--dark);
}

.info__card-img {
    max-width: 300px;
    border: 2px solid var(--gold);
    overflow: hidden;
}

.info__card-img img {
    width: 100%;
    transition: all .5s;
    display: block;
}

.info__card-img img:hover {
    transform: scale(1.3) rotate(-5deg);
}

.info__card-text--year {
    font-size: var(--fontXS);
    color: var(--gold);
}

.info__card-text--name {
    font-size: var(--fontM);

}

.info__card-text--location {
    font-size: var(--fontXS);

}

/* ---Trayectoria--- */

#trayectoria {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacer--md);
    padding: var(--spacer--md) var(--spacer--lg);
    max-width: 1200px;
}


.clubes-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer--md);
}

.clubes-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacer--sm);
    padding: var(--spacer--sm);
    border: 2px solid var(--gold);
    transition: all .3s;
}

.clubes-card:hover {
    background-color: var(--gold);
}

.clubes-card:hover .info__card-text {
    color: var(--dark);
}

.clubes-card:hover .info__card-text--year {
    color: var(--dark);
}

.clubes-card:hover .clubes-card__img {
    border: 2px solid var(--dark);
}

.clubes-card__img {
    max-width: 100%;
    border: 2px solid var(--gold);
    overflow: hidden;
}

.clubes-card__img img {
    display: block;
    width: 100%;
    transition: all .3s;
}

.clubes-card__img img:hover {
    transform: scale(1.3) rotate(-5deg);
}


/* ---Logros--- */

.logros__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacer--lg);
    padding: var(--spacer--md);
}

.logros {
    display: flex;
    flex-direction: column;
    gap: var(--spacer--sm);
}

.logros__cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacer--sm);
}

.logros__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer--sm);
    padding: var(--spacer--sm);
    border: 2px solid var(--gold);
    transition: all .3s;
    font-size: var(--fontXS);
}

.logros__card-img {
    max-width: 200px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    transition: all .3s;
}

.logros__card:hover .logros__card-img {
    box-shadow: 0px 0px 30px 12px var(--gold);
    transform: scale(1.1);
}

.logros__card:hover {
    transform: translateY(-10px);
}

footer {
    display: flex;
    justify-content: space-around;
    gap: var(--spacer--md);
    border-top: 2px solid var(--gold);
    padding: var(--spacer--md);
    flex-wrap: wrap;
}

footer p {
    font-size: var(--fontM);
    color: var(--light);
}


.footer__icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer--md);
    text-align: center;
    transition: all .3s;
    flex-wrap: wrap;
}

.footer__icons-link,
.footer__icons-link a {
    display: flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: var(--light);
}

.footer__icons-link a:hover {
    color: var(--gold);
}


.footer__icons-link i {
    font-size: 2rem;
}


/* Medias Queries */
@media screen and (max-width:880px) {
    .hero {
        flex-wrap: wrap;
    }

    .hero__left--img {
        max-width: 380px;
    }

    .hero__right {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .hero__left--icons {
        flex-wrap: wrap;
    }

    .logros__cards-container {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .logros__card-img {
        max-width: 100%;
    }

}

@media screen and (max-width: 600px) {
    .hamburguer {
        display: block;
    }

    .section__title {
        padding-top: var(--spacer--md);
    }

    .links__container {
        position: fixed;
        flex-direction: column;
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        justify-content: space-evenly;
        align-items: center;
        background: var(--dark);
        transition: all 0.3s;
    }

    .info__card {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .info__card-img {
        max-width: 100%;
    }

    .clubes-container {
        flex-wrap: wrap;
    }

}