.gallety-row-margin {
    margin-bottom: 26px!important;
}

.margin-col-6 {
    margin-bottom: 26px!important;
}

.img-margin{
    margin:5%;
}

.img-logos-planes{
    width:40%!important;
}

.centrar-tarjeta-all{
    position:relative; 
    display:flex; 
    justify-content:center;
}

.contenedor-tarjeta{
    width:100%;
    display:flex;
    justify-content:center;
}

.width-all{
    width: 450px;
}

.width-tarjeta{
    position: relative;
    width: 450px;
    /*Agregado*/
    /*margin:5%;*/
}

.width-ver-modelos{
    /*width:450px;*/
    position:absolute;
    top:125px;
    left:290px;
}


/*Card frente*/

.frente-all {
    /*background-color:#ffd5bf;*/ /*Color de fondo*/
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height:120px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.frente-imagen {
    /*background-color:#fc7f3d;*/ /*color fondo de auto*/
    /*padding: 34px 15px 33px 15px;*/
    padding: 3%;
    position:absolute;
    top:0;
    border-top-right-radius: 15%;
    border-bottom-right-radius: 15%;
    height:100%;
    display:flex;
    justify-content:center; 
    align-items:center;
}

.frente-parrafo {
    text-align: center!important; 
    font: 400 25px Segoe UI, sans-serif!important;
    color: #0d184e!important; /*Color de letra (azul)*/
    line-height:30px!important;
    margin:0;
    margin-left: 105px;
}


/*Card atras izquierda*/

.atras-all {
    /*background-color:#ffd5bf;*/ /*Color de fondo*/
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height:120px;
    display:flex;
    justify-content:center; 
    align-items:center;
}

.atras-parrafo {
    text-align: center!important; 
    font: 400 25px Segoe UI, sans-serif!important;
    color: #0d184e!important; /*Color de letra (azul)*/
    line-height:30px!important;
    margin:0;
    margin-left: 0px;
}

/*Card frente derecha*/

.frente-all-right {
    /*background-color:#ffd5bf;*/ /*Color de fondo*/
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height:120px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.frente-imagen-right {
    /*background-color:#fc7f3d;*/ /*color fondo de auto*/
    padding:3%;
    top:0;
    border-top-left-radius: 15%;
    border-bottom-left-radius: 15%;
    height:100%;
    display:flex;
    justify-content:center; 
    align-items:center;
}

.frente-parrafo-right {
    text-align: center!important; 
    font: 400 25px Segoe UI, sans-serif!important;
    color: #0d184e!important; *Color de letra (azul)*/
    line-height:30px!important;
    margin:0;
}

.h3-toda-gama{
    font-size: 1.5rem!important; 
    font-weight: 500!important;
    color: #081d54; 
    text-align: center;
    /*margin-left:15%;*/
    justify-content:center;
    display:flex;
}

.logos-footer{
    display:block; 
    margin:auto; 
    max-width:40%;
}


.titulo-modelo-plan{
    font-size: 2rem!important; 
    font-weight: 500!important;
    color:#081d54; 
    text-align:center;
    margin-left:0%;
}

.subtitulo-modelo-plan{    
    font-size:2.5rem;
}

.img-dialogo-legales{
        width: 7%; 
        margin: 0 15% 0 15%;
    }











/*Estilos para efecto carta*/

.flip-card {
  background-color: transparent;
  height: 105px; /* Es necesario una altura para que aparezca en la página */
  border: 0px;
  perspective: 3000px; /* Genera un efecto 3D */
}

/* Este contenedor nos posiciona los dos lados de la tarjeta */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Crea la animación para girar la tarjeta de forma horizontal cuando el ratón se pone encima*/
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  /*transform: rotateX(180deg);*/ /*si lo quieres con giro vertical*/
}

/* Estructura básica de las dos caras */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Estructura específica de la cara frontal */
/* Ajusta la imagen al tamaño de la tarjeta para hacerla adaptable*/
.flip-card-front-post > img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

/* Estructura específica de la cara trasera */
.flip-card-back {
  /*background-color: dodgerblue;*/
  color: white;
  transform: rotateY(180deg);
  /*transform: rotateX(180deg);*/ /*si lo quieres con giro vertical*/
}

/*Fin de estilos para efecto carta*/





















/* MEDIA QUERY */

@media (max-width: 997px) {

    .card1 {
        width:380px!important;
    }

    .width-tarjeta{
        width: 380px!important;
    }

    .frente-parrafo {
        font: 400 20px Segoe UI, sans-serif!important;
    }

    .frente-parrafo-right {
        font: 400 20px Segoe UI, sans-serif!important;
    }

    .atras-parrafo{
        font: 400 20px Segoe UI, sans-serif!important;
    }

    .width-ver-modelos{
        left:220px!important;
    }

    .titulo-modelo-plan{
        font-size: 2rem!important; 
    }

    .subtitulo-modelo-plan{
        display:block;
        font-size:2.5rem;
    }

}

@media (max-width: 849px) {

    .card1 {
        width:340px!important;
    }

    .width-tarjeta{
        width: 340px!important;
    }    

    .width-ver-modelos{
        left:170px!important;
    }

    .titulo-modelo-plan{
        font-size: 1.5rem!important; 
    }

    .subtitulo-modelo-plan{
        display:block;
        font-size:2rem;
    }

}


@media (max-width: 750px) {

    .card1 {
        width:450px!important;
    }

    .width-tarjeta{
        width: 450px!important;
    }

    .frente-parrafo {
        font: 400 25px Segoe UI, sans-serif!important;
    }

    .frente-parrafo-right {
        font: 400 25px Segoe UI, sans-serif!important;
    }

    .atras-parrafo{
        font: 400 25px Segoe UI, sans-serif!important;
    }

    .width-ver-modelos{
        left:290px!important;
    }

    .logos-footer{
        max-width:20%;
    }

    

}

@media (max-width: 500px) {

    .card1 {
        width:390px!important;
    }

    .width-tarjeta{
        width: 390px!important;
    }

    .frente-parrafo {
        font: 400 20px Segoe UI, sans-serif!important;
    }

    .frente-parrafo-right {
        font: 400 20px Segoe UI, sans-serif!important;
    }

    .atras-parrafo{
        font: 400 20px Segoe UI, sans-serif!important;
    }

    .width-ver-modelos{
        left:230px!important;
    }

    .logos-footer{
        max-width:20%;
    }

    .popup .popuptext {
        width: 350px!important;
        border-radius: 6px;
        padding: 2%;
        bottom: 125%;
        left: 105%!important;
        margin-left: -420px!important;
        font-size: 8px!important;
    }

    .img-dialogo-legales{
        width: 10%; 
        margin: 0 15% 0 15%;
    }

}

@media (max-width: 420px) {

    .card1 {
        width:350px!important;
    }

    .width-tarjeta{
        width: 350px!important;
    }

    .frente-parrafo {
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .frente-parrafo-right {
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .atras-parrafo{
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .width-ver-modelos{
        left:190px!important;
    }

    .logos-footer{
        max-width:30%;
    }

    .popup .popuptext {
        width: 300px!important;
        border-radius: 6px;
        padding: 2%;
        bottom: 125%;
        left: 125%!important;
        margin-left: -420px!important;
        font-size: 8px!important;
    }

}

@media (max-width: 376px) {

    .card1 {
        width:330px!important;
    }

    .width-tarjeta{
        width: 330px!important;
    }

    .frente-parrafo {
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .frente-parrafo-right {
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .atras-parrafo{
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .width-ver-modelos{
        left:170px!important;
    }

    .logos-footer{
        max-width:30%;
    }

    .popup .popuptext {
        width: 270px!important;
        border-radius: 6px;
        padding: 2%;
        bottom: 125%;
        left: 150%!important;
        margin-left: -460px!important;
        font-size: 8px!important;
    }

}


@media (max-width: 320px) {

    .card1 {
        width:265px!important;
    }

    .width-tarjeta{
        width:265px!important;
    }

    .frente-parrafo {
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .frente-parrafo-right {
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .atras-parrafo{
        font: 400 17px Segoe UI, sans-serif!important;
    }

    .width-ver-modelos{
        left:90px!important;
    }

    .logos-footer{
        max-width:30%;
    }

    .popup .popuptext {
        width: 270px!important;
        border-radius: 6px;
        padding: 2%;
        bottom: 125%;
        left: 150%!important;
        margin-left: -425px!important;
        font-size: 8px!important;
    }

}

/* FIN MEDIA QUERY */







































.card1 {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    /*margin:80px 150px;*/
    /*width:320px;
    height:243px;*/
    width:450px;
    height:120px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}
.card1 .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    /*border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%*/;

}
.card1.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}
.card1 .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}
.card1.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}
.card1 .content .cardFront {
    /*background-color: skyblue;
    color: tomato;*/
}
.card1 .content .cardBack {
    /*background-color: tomato;
    color: skyblue;*/
}
.card1 .content .cardFront, .card1 .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card1 .content .cardFront, .card1.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}
.card1 .content .cardBack, .card1.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card1 .content .cardFront, .card1.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card1.applyflip .content .cardFront, .card1 .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }




















/********************************************************************/

/* Contenedor del popup */
.popup {
    position: relative;
    /*display: inline-block;*/
    display: block;
    cursor: pointer;
}

/* pop-up actual */
.popup .popuptext {
    visibility: hidden;
    width: 460px;
    background-color: #555;
    color: #fff;
    text-align: justify;
    border-radius: 6px;
    padding: 2%;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 82%;
    margin-left: -420px;
    font-size: 10px;
}

/* Muestra del Pop-up*/
/*.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

/* Cambio para mostrar/ocultar el contenedor del pop-up */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Animación del pop-up */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}