/* GRID */

.bes-botones-largos-grid{

    display:grid;

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

    gap:24px;

    width:100%;
}


/* TABLET */

@media (max-width:1024px){

    .bes-botones-largos-grid{

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


/* MÓVIL */

@media (max-width:768px){

    .bes-botones-largos-grid{

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

        gap:16px;
    }
}


/* BOTÓN */

.bes-boton-largo{

    position:relative;

    display:block;

    width:100%;

    max-width:none;

    aspect-ratio:1200 / 225;

    text-decoration:none;
}


/* RECTÁNGULO AZUL */

.bes-boton-largo__right{

    position:absolute;

    inset:0;

    background:#3e66b4;

    border-radius:20px;

    border:4px solid #000;

    display:flex;

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

    padding-left:31.25%;

    overflow:hidden;
}


/* RECTÁNGULO NARANJA */

.bes-boton-largo__left{

    position:absolute;

    left:0;
    top:0;

    width:31.25%;

    height:100%;

    background:#d6660a;

    border-radius:20px;

    border:4px solid #000;

    z-index:2;
}


/* TEXTO */

.bes-boton-largo__right span{

    color:#fff;

    font-size:clamp(12px, 1.6vw, 30px);

    font-weight:800;

    line-height:1;

    text-align:center;

    position:relative;

    z-index:3;

    padding:0 10px;

    white-space:normal;

    overflow-wrap:normal;

    word-break:normal;

    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,

        -2px  0px 0 #000,
         2px  0px 0 #000,
         0px -2px 0 #000,
         0px  2px 0 #000,

         0px 3px 6px rgba(0,0,0,.45);
}

/* TABLET */

@media (max-width:1024px){

    .bes-boton-largo__right span{

        font-size:clamp(22px, 2vw, 34px);
    }
}


/* MÓVIL */

@media (max-width:768px){

    .bes-boton-largo__right span{

        font-size:clamp(14px, 4vw, 32px);
    }
}

/* HOVER */

@media (hover:hover){

    .bes-boton-largo:hover{

        transform:translateY(-4px);
    }
}


/* MÓVIL */

@media (max-width:768px){


    .bes-boton-largo__left,
    .bes-boton-largo__right{

        border-radius:12px;

        border-width:3px;
    }

}

/* ICONO */

.bes-boton-largo__left{

    display:flex;

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

    overflow:hidden;
}


.bes-boton-largo__icon{

    width:100%;

    height:100%;

    object-fit:contain;

    position:relative;

    z-index:5;

    filter:
        drop-shadow(-1.5px 0 0 #000)
        drop-shadow(1.5px 0 0 #000)
        drop-shadow(0 -1.5px 0 #000)
        drop-shadow(0 1.5px 0 #000)
        drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* BANDERAS */

.bes-boton-largo__icon--flag{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:none;
}