/*====================================
        FIGMA PAGE
=====================================*/


/* HERO */

.hero{

    position:relative;
    height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    background:url("../img/figma.jpg") center/cover no-repeat;

}


.overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.45)
    );

}



.hero-content{

    position:relative;

    max-width:850px;

    text-align:center;

    color:#fff;

    padding:20px;

}

.hero-content h1{

    color:#fff;

}


.subtitle{

    display:inline-block;

    font-size:13px;

    letter-spacing:5px;

    color:#d4af37;

    font-weight:600;

    margin-bottom:25px;

}



.hero-content h1{

    font-family:"Playfair Display",serif;

    font-size:70px;

    font-weight:600;

    margin-bottom:25px;

    letter-spacing:1px;

}



.hero-content p{

    font-size:17px;

    line-height:1.8;

    color:#eee;

    max-width:700px;

    margin:auto;

    font-weight:300;

}


/*====================================
        FIGMA GRID
=====================================*/


.figma-grid{

    width:90%;

    max-width:1250px;

    margin:100px auto;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:35px;

}



/* CARD */


.figma-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    transition:.4s ease;

    position:relative;

    padding:15px;

}


.figma-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.15);

}



/* IMAGEN */


.figma-card img{

    width:100%;

    height:600px;

    object-fit:contain;

    display:block;

    border-radius:15px;

    background:#f8f8f8;

}


.figma-card:hover img{

    transform:scale(1.06);

}



/* INFO */


.figma-info{

    padding:30px;

    text-align:center;

}



.figma-info h3{

    font-family:"Playfair Display",serif;

    font-size:28px;

    color:#111;

    margin-bottom:12px;

}



.figma-info p{

    color:#777;

    font-size:15px;

    line-height:1.6;

}

/*====================================
        AJUSTE HERO POR HEADER
=====================================*/

.hero{

    padding-top:140px;

}


.hero-content{

    transform:translateY(40px);

}


/*====================================
        EFECTO DORADO
=====================================*/


.figma-card::after{

    content:"";

    position:absolute;

    bottom:0;
    left:50%;

    width:0;
    height:3px;

    background:#d4af37;

    transform:translateX(-50%);

    transition:.4s;

}



.figma-card:hover::after{

    width:80%;

}


/*====================================
        TABLET
====================================*/

@media (max-width:992px){

    /* HERO */

    .hero{

        height:85vh;

        padding-top:120px;

    }

    .hero-content{

        max-width:700px;

        padding:0 30px;

        transform:translateY(20px);

    }

    .hero-content h1{

        font-size:3.6rem;

        line-height:1.15;

    }

    .hero-content p{

        font-size:16px;

    }

    /* GRID */

    .figma-grid{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

        margin:80px auto;

    }

    .figma-card img{

        height:500px;

    }

    .figma-info{

        padding:25px;

    }

    .figma-info h3{

        font-size:24px;

    }

}


/*====================================
        CELULAR
====================================*/

@media (max-width:768px){

    /* HERO */

    .hero{

        height:75vh;

        padding-top:100px;

    }

    .hero-content{

        padding:0 25px;

        transform:translateY(0);

    }

    .subtitle{

        font-size:12px;

        letter-spacing:3px;

    }

    .hero-content h1{

        font-size:2.6rem;

        line-height:1.2;

    }

    .hero-content p{

        font-size:15px;

        line-height:1.8;

    }

    /* GRID */

    .figma-grid{

        grid-template-columns:1fr;

        gap:30px;

        margin:60px auto;

    }

    .figma-card{

        padding:12px;

    }

    .figma-card img{

        height:420px;

    }

    .figma-info{

        padding:22px 15px;

    }

    .figma-info h3{

        font-size:22px;

    }

    .figma-info p{

        font-size:14px;

    }

}