@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap');

/* Variables css para los diseñós de card */
    :root{
        --white-color: hsl(0, 0%, 100%);
        --black-color: hsl(0, 0%, 0%);  
        --accent-pink: #fad106; /* Rosa/Magenta del título */
        --accent-cyan: #f36730;
        /* font y typografia */
        --card-font: "Montserrat Alternates", sans-serif;
        --biggest-font-size: 2rem;
        --big-font-size: 1.5rem;
        --medium-font-size: .938rem;
        --small-font-size: .813rem;

        /* --font weight */
        --font-regular: 400;
        --font-semi-bold: 600;
        --font-bold: 700;

    }

    @media screen and (min-width: 1150px) {
        .root{
            --biggest-font-size: 3rem;
            --big-font-size: 2.5rem;
            --normal-font-size: 1rem;
            --small-font-size: .875rem;
        }
    }
    .section__speakers {
        font-family: var(--card-font);
        box-sizing: border-box;   
        padding: 0;
        margin: 0;
    }


    .img__card {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .card__container__speakers {
        max-width: 1120px;
        margin-inline: 1.5rem;
    }
/* =======card=========== */

    .card{
        position: relative;
        padding-block: 5rem;
    }

    .card__container{
        position: relative;
        display: grid;
        grid-template-columns: 260px;
        gap: 2rem;
    }

    .card__article{
        
        position: relative;
        width: 260px;       /* o el tamaño que desees */
        height: 400px; 
        overflow: hidden;     /* altura fija para todas las cards */
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }
    .card__img{
        border-radius: 2rem;
        transition: transform .4s;
        width: 100%;
        height: 200%;
        object-fit: cover;
    }
    .card__shadow{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, 
                                    hsla(0, 0%, 0%) 0%, 
                                    hsl(0, 0%, 0%, 0) 50%);
    }

    .card__data{
        text-align: none;
        color: var(--white-color);
        position: absolute;
        left: 1.5rem;
        bottom: 2rem;
    }


    .card__name{
        font-family: var(--card-font);
        text-align: left;
        font-size: var(--big-font-size);
        color: var(--white-color);
        margin-bottom: .25rem;
        left: 1.5rem;
    }


    .card__profession{
        display: block;
        font-size: var(--small-font-size);
    }

    .card__clip{
        position: absolute;
        top: 1rem;
        right: 1rem;
        background-color: hsl(253, 96%, 20%); 
        box-shadow: 0 0 10px hsl(52,90%,50%); 
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 1.5rem;
        color: var(--black-color);
        z-index: 5;
        cursor: pointer;
        transition: .4s;
    }

    .card__article:hover .card__img{
            transform: scale(1.1);
    }

    .info{
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;
            background-color: hsla(0, 0%, 0%, .1);
            backdrop-filter: blur(12px);
            padding: 3rem 1.5rem 1.5rem;
            color: var(--white-color);
            box-sizing: border-box;
            clip-path: circle(8px at 88% 9%);
            transition: clip-path .5s ease-in-out;
    }

    .info__name{
        
        font-family: var(--card-font);
        text-align: left;
        color: var(--white-color);
        left: 1.5rem;
        font-size: var(--biggest-font-size);
        margin-bottom: .5rem;
    }
    .info__description{
        font-size: var(--medium-font-size);
        margin-bottom: 1rem;
    }
    .card__article:hover .card__clip    {
        transform: rotate(-45deg);
    }

    .info:hover,
    .card__clip:hover ~ .info{
        clip-path: circle(100% );
    }

    @media screen and (min-width: 320px) {
        .card__container{
            justify-content: center;
            margin-inline: 1rem; ;
        }
        .card__article{
            grid-template-columns: 1fr;
        }
        .info{
            padding: 1.5rem;
        }        
    }
    @media screen and (min-width: 768px) {
        .card__container{
            grid-template-columns: repeat(2, 260px);
            
        }
        .card__article{
            width: 100%;
            height: 400px; 
        }
    }

    @media screen and (min-width: 1024px) {
        .card{
           
            display: grid;
            place-content: center;
        }
        .card__container{
            grid-template-columns: repeat(3, 240px); 
        }
    }