/* Contenedor principal */



.msa-flip-container {



    width: 100%;



    height: 400px; /* Puedes cambiar la altura o hacerla controlable */



    perspective: 1000px;



}







.msa-flip-card {



    position: relative;



    width: 100%;



    height: 100%;



    transition: transform 0.6s;



    transform-style: preserve-3d;



}







.msa-flip-container:hover .msa-flip-card {



    transform: rotateY(180deg);



}







/* Estilo común Front y Back */



.msa-front, .msa-back {



    position: absolute;



    width: 100%;



    height: 100%;



    backface-visibility: hidden;



    background-size: cover;



    background-position: center center;



    overflow: hidden;



}







.msa-back {



    transform: rotateY(180deg);



    display: flex;



    align-items: center;



    justify-content: center;



}







/* Capa de Color (Overlay) */



.msa-overlay {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 1;



    opacity: 0.8; /* Puedes hacer este valor un control también */



}







/* Capa de Logos (Encima del color) */



.msa-logos {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-size: 80% auto; /* Tamaño del logo */



    background-repeat: no-repeat;



    background-position: center center;



    z-index: 2;



}







/* Enlace total en la parte trasera */



.msa-link {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 10;



}