@charset "utf-8";
/* CSS Document */

/*====================================================
            HERO CLIENTES
====================================================*/

.clientes-hero{

    background:url("../img/hero-clientes.jpg") center center/cover;

}

.clientes-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.clientes-hero .container{

    position:relative;

    z-index:2;

}

.clientes-hero span{

    display:inline-block;

    color:#FFD54A;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:20px;

}

.clientes-hero h1{

    color:#fff;

    font-size:58px;

    margin-bottom:20px;

}

.clientes-hero p{

    color:#f2f2f2;

    max-width:700px;

    margin:auto;

    line-height:1.8;

    font-size:20px;

}

/*====================================================
            INTRO
====================================================*/

.markets-intro{

    padding:90px 0 30px;

    background:#fff;

}

.section-title{

    max-width:850px;

    margin:auto;

    text-align:center;

}

.section-title span{

    color:#188847;

    font-weight:700;

    letter-spacing:4px;

}

.section-title h2{

    font-size:46px;

    margin:20px 0;

    color:#153B24;

}

.section-title p{

    color:#666;

    line-height:1.9;

    font-size:18px;

}

/*====================================================
            MAPA
====================================================*/

.world-map{

    padding:70px 0;

    background:#f7f8fa;

}

.world-map img{

    width:100%;

    max-width:1100px;

    display:block;

    margin:auto;

    filter:drop-shadow(0 20px 45px rgba(0,0,0,.15));

}

/*====================================================
            MARKET CARDS
====================================================*/

.markets{

    padding:90px 0;

    background:#fff;

}

.markets-grid{

    display:grid;

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

    gap:30px;

}


.market-card{

    background:#fff;

    border-radius:18px;

    padding:40px 25px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.market-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.flag{

    font-size:56px;

    margin-bottom:20px;

}

.market-card h3{

    color:#126B3D;

    margin-bottom:12px;

}

.market-card p{

    color:#666;

}