﻿
.ganadores-section {
    display: flex;
    justify-content: center;
    padding-left: var(--section-left-padding);
    padding-right: var(--section-right-padding);
    padding-bottom: 3rem;
}

.ganadores-parrafo-contenedor {
    display: flex;
    gap: 4rem;
    text-align: justify;
    color: var(--gray-550);
    padding-left: 88px;
    margin-bottom: 4rem;
}

.ganadores-content-p {
    flex: 1;
    margin: 0;
    max-width: 35.5rem;
    /* padding-left: 3rem;
     */
}

.ganadores-section-tittle {
    display: flex;
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 1rem;
    gap: 2rem;
}

.ganadores-tittle-icon {
}

.ganadores-tittle-text {
}

.ganadores-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*/repeat(auto-fill, minmax(22.5rem, 0.33fr));*/
    margin-bottom: 4rem;
    padding-left: 88px;
    gap: 1rem;
    max-width: 1290px;
}

.ganadores-btn-load-more {
    display: flex;
    justify-self: center;
    align-self: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 56px;
    border-color: var(--gray-250);
    border-style: ridge;
    cursor: pointer;
    border-width: 1px;

    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    word-spacing: 2px;
    letter-spacing: 0;
    color: var(--gray-700);
}

.regular-18-ganadores {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    word-spacing: 2px;
    letter-spacing: 0;
    color: var(--gray-500);
}

.bold-20-card-tittle {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    word-spacing: 8px;
    letter-spacing: 0;
    text-decoration: none;
}

/* card ganador */
.card-ganador {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /*max-width: 22.5rem;*/
    
}
.ganador-img-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.card-ganador-img {
    width: 100%;
    height: auto;
}

.card-ganador-tittle {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    word-spacing: 0px;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--gray-950);
}

.ganador-datos-contenedor {
}

.ganador-nombre-region {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 0%;
    word-spacing: 0px;
    letter-spacing: 0;
    color: var(--gray-500);
    gap: 1rem;
}

.ganador-card-btn {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    word-spacing: 0px;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--principal);
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.5rem;
    cursor: pointer;
}


.modal-blur{
    backdrop-filter: blur(5px);
    
}
.modal-body {
    padding: 0rem;
}
.modal-ganador-body{
    width: 53rem;
    background-color: var(--white);
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-self: center;
    border-radius: 32px;
    padding: 2rem;
    gap: 2rem
}
.ganador-img-container-modal{
    position: relative;
    height: fit-content
}
.ganador-img-modal{
    width: 100%;
    height: auto;
}

.modal-ganador-content{
    display: flex;
    flex-direction: column;
    max-width: 24em;
}

.modal-ganador-titulo{

}

.modal-ganador-data{
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;

    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    word-spacing: 8px;
    letter-spacing: -1;
    color:var(--gray-500)
}

.ganador-modal-historia-container{
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    word-spacing: 8px;
    letter-spacing: -1;
    color:var(--gray-500)
}

.modal-ganador-tittle{
    font-family: "Bree Serif", serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 130%;
    word-spacing: 8px;
    letter-spacing: 0;
    color: var(--gray-950);
}

.ganador-modal-image-credit {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
}

.modal-ganador-close-btn{
    position: absolute;
    right: 0px;
    top: 1rem;
    cursor: pointer;
}
.ganador-card-btn-container {
    display: flex;
    flex-direction: row;
    gap:1rem;
}

.ganador-card-btn-container > img {
    padding-top: 1.25rem
}
/* Responsive: para pantallas pequeñas */
@media (max-width: 640px) {
    .ganadores-section {
        display: flex;
        justify-content: flex-start;
        padding-left: var(--section-left-padding);
        padding-right: var(--section-right-padding);
        padding-bottom: 3rem;
    }

    .ganadores-section-tittle {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 2rem;
        padding-bottom: 1rem;
        gap: 2rem;
    }

    .ganadores-parrafo-contenedor {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        text-align: justify;
        color: var(--gray-550);
        padding-left: 0rem;
        margin-bottom: 4rem;
    }

    .ganadores-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        margin-bottom: 4rem;
        padding-left: 0rem;
        gap: 2rem;
        max-width: none;
        /*width: fit-content;*/
    }
    
    .modal-ganador-body{
        width: 100%;
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        align-self: center;
        justify-self: center;
        /* border-radius: 32px; */
        padding-top: 3rem;
        gap: 2rem;
        margin:0 auto;
    }

    .modal-ganador-close-btn{
        position: absolute;
        right: 1.5rem;
        top: 1rem;
        cursor: pointer;
    }

    
    /* .ganadores-parrafo-contenedor{
        display: flex;
        flex-direction: column;
        gap:4rem;
        text-align: left;
        color: var(--gray-550);
        padding-left: 5rem;
    } */
    /* .ganadores-content-p{
        flex-direction: column;
        gap: 15px;
    } */
}
