body{
    overflow-x: hidden;
}



.color {
    position: absolute !important;
    right: 0;
    left: 0;
    z-index: 1030;
    background: #000 !important;
    border-color: #000 !important;
}
.myNavbar {
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.9;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
}
.contratos_movil{
    display: none !important;
}
.contratos{
    display: block !important;
}
.cell-1-text {
    margin-top: 11% !important;
}
.p_movil{
    display: none !important;
}
.p_normal{
    display: block !important;
}
.img_centros_comerciales{
    height: auto;
    width: 6%;
}
.div_img_centros{
    margin-left: -10%;
}
.t_animacion{
    font-family: "HelveTh";
}

.empezar_movil{
    display: none !important;
}
.empezar{
    display: block !important;
}

.titulo-ico {
    margin-top: 8% !important;
}
.dosis{
    font-family: 'Dosis', sans-serif;
}
.btn-qr {
    color: #957AFB !important;
    width: 120px !important;
    border-radius: 5px !important;
    font-family: "DosisSb" !important;
    padding: 7px 10px !important;
    border: 1px solid transparent !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    letter-spacing: 1px !important;
    background: transparent !important;
    border-color: #957AFB !important;  
    font-size: 10px !important;
}
.btn-degra_qr {

    color: white !important;  
    width: 150px !important;  
    border-radius: 5px !important;  
    border-color: white !important;  
    font-family: "DosisSb";
    padding: 7px 10px !important;  
    border: 1px solid transparent !important;  
    margin-left: 0px !important;  
    letter-spacing: 1px !important;  
    background: #957AFB !important;
}

/*****/
.bloque_qr_normal{
    display: block !important;
}
.bloque_qr_movil{
    display: none !important;
}
.bloque_telefono_normal{
    display: block !important;
}
.bloque_telefono_movil{
    display: none !important;
}
.slider_normal{
    display: block !important;
}
.slider_movil{
    display: none !important;
}
.tercer_bloque_normal{
    display: block !important;
}
.tercer_bloque_movil{
    display: none !important;
}
.cuarto_bloque_normal{
    display: block !important;
}
.cuarto_bloque_movil{
    display: none !important;
}
.quinto_bloque_normal{
    display: block !important;
}
.quinto_bloque_movil{
    display: none !important;
}
.sexto_bloque_normal{
    display: block !important;
}
.sexto_bloque_movil{
    display: none !important;
}

.nuevo_bloque_normal{
    display: block !important;
}


 .nuevo_bloque_normal{
    background-image: url(sistema/img/qr_contactanos/fondo_captar_datos-min.png);
    background-size: cover;
}

.cursor {
    display: inline-block;
    animation: blink 0.7s steps(1) infinite;
    /*vertical-align: top;  Ajusta este valor según sea necesario */
}


@keyframes blink {
    50% {
        opacity: 0;
    }
}

.container_bloque2{
    display:inline-flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    align-content:flex-start;
    /*height:100vh;*/ /*Este valor lo puedes omitir si la altura de tu componente esta definida*/
}
    
.container_bloque2-1{
    order:0;
    flex:0 1 auto;
    align-self:auto;
    height:auto;
    width:13em;
    margin-right: 10px;
    margin-left: 10px;
}

.container_bloque4-1{
    order:0;
    flex:0 1 auto;
    align-self:auto;
    height:auto;
    width:8em;
    margin-right: 40px;
    margin-left: 40px;
}

.container_bloque4-1_movil{
    order:0;
    flex:0 1 auto;
    align-self:auto;
    height:auto;
    width:4em;
    margin-right: 10px;
    margin-left: 10px;
}

.container_bloque4-2{
    order:0;
    flex:0 1 auto;
    align-self:auto;
    height:auto;
    width:13em;
    margin-right: 50px;
    margin-left: 50px;
}

/* Estilos de imagen dentro del div */
.image {
    overflow: hidden;
    border-radius: 20px;
    transition: transform 0.3s ease-in-out;
    position: relative;
}

.image img {
    transition: transform 0.3s ease-in-out;
}

.title{
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.title:hover {
    letter-spacing: 2px;
}

/* Estilos del texto 'ver más' */
.view-more {
    position: absolute;
    bottom: -40px; /* Inicialmente oculto */
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    color: gray;
    padding: 5px 0px;
    border-radius: 5px;
    opacity: 0;
    transition: bottom 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; /* Añadir delay */
    text-decoration: underline;
}

/* Efecto de movimiento al pasar el cursor */
.image:hover {
    transform: scale(1.2); /* Reducir la escala final del contenedor */
}

.image:hover img {
    transform: scale(1.1) translateY(-10px); /* Reducir la escala final de la imagen */
    animation: bouncing 0.5s 0.3s;
}

.image:hover .view-more {
    bottom: -3px; /* Mostrar el texto */
    opacity: 1;
}

.linkList:hover > * { opacity: 0.4; transition: all 0.5s ease; }

.linkList:hover > *:hover {
    background-color: transparent;
    transition: all 0.5s ease;
    opacity: 1;
}



/* Animación de rebote */
@keyframes bouncing {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
}


.wil {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.wil img {
    width: 100%;
    transition: transform 0.2s ease-in-out;
    }

.wil:hover img {
    transform: scale(1.1);
}

.expand-left {
    background-color: #7A56FF;
    padding-bottom: 10px;
    border-top-right-radius: 55px;
    border-bottom-right-radius: 55px;
    width: 70em; /* Nuevo ancho deseado */
    position: relative;
    left: -29em; /* Mover hacia la izquierda en la mitad del incremento del ancho */
}


/* Carrousel */
.carousel {
padding: 30px;
position: relative;
overflow-x: hidden;
}

.carousel__container {
display: flex; /* Utilizar flexbox */
padding-bottom: 10px;
/*width: 100%;
margin: 70px auto;*/
}

.carousel--item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px 8px;
width: 200px;
border-radius: 20px;
background-color: lightblue;
overflow: hidden;
cursor: pointer;
transition: 350ms all;
transform-origin: center left;
}

.carousel--item:hover {
transform: scale(1.2, 1.2);
z-index: 1;
}

.carousel__container:hover .carousel--item {
opacity: 0.3;
}

.carousel__container:hover .carousel--item:hover {
opacity: 1;
}

.carousel--item__img {
/*width: 200px;
height: 250px;*/
object-fit: cover;
}

.carousel--item__details {
padding: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 10px;
background: linear-gradient(83deg, rgba(244, 67, 54, 0.8) 0%, rgba(255, 87, 34, 0.1) 100%);
opacity: 0;
transition: 350ms opacity;
}

.carousel--item__details img {
margin: 0 5px;
width: 20px;
}

@keyframes gradient {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}

.container_vermas_gym {
transition: height 0.5s ease;
}



.new-carousel-item {
background-color: #000;
border-radius: 20px !important;
text-align: center;
margin-bottom: 1em;
padding-top: 2em;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; /* Adjust height as needed */
}

.new-carousel-item__img {
color: #fff;
font-size: 18px;
margin: 0; /* Reset margin for p */
}

.new-carousel-item p {
margin-top: 15px;
font-size: 16px;
color: #fff; /* Ensure text is white */
}

.new-bottom-div {
background-color: #957AFB;
color: #fff;
padding: 1em 0;
text-align: center;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
flex-shrink: 0; /* Ensure it doesn't shrink */
}

.hidden {
display: none;
}
.visible {
display: block;
}

.ver-menos {
color: gray;
cursor: pointer;
display: inline-block; /* Mantén display: inline-block en ambos estados */
margin-top: 10px;
}

.ver-menos:hover {
text-decoration: underline;
}

.opacidad {
opacity: 0.3;
background: black;
}




.svg-container {
text-align: center;
/*margin: 2rem 0;*/
}

.svg-container svg {
height: 14rem;
}

.svg-container svg line {
stroke: #5f39dd; /* Color directamente en CSS */
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10px 7px; /* Dibuja una línea punteada */
animation: animateline 3s linear infinite; /* Aplica la animación */
}

@keyframes animateline {
from {
    stroke-dashoffset: 0;
}
to {
    stroke-dashoffset: -5rem;
}
}


.toggle-item.selected {
background-color: gray;
}

.toggle-item.selected .dosis {
color: #fff;
}

.toggle-item.selected .img-color {
display: none;
}

.toggle-item.selected .img-gray {
display: block;
}

/* Column Grids */
/*.col_fifth { 
width: 18%; 
}
*/
/* Flexbox Layout */
.row_bloque2 {
display: flex;
justify-content: center; /* Centra los elementos para reducir el espacio entre ellos */
flex-wrap: nowrap; /* No permite que los elementos se envuelvan en una nueva línea */
}

/* Ajuste de márgenes */
.col_fifth {
position: relative;
display: block;
margin-right: 0.5%; /* Reducir margen derecho para disminuir el espacio entre los elementos */
margin-bottom: 20px;
width: 18%; 
}

/*####################################*/
/* Ajuste de márgenes */
.col_fifth_movil_hoteles {
position: relative;
display: block;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 20px;
width: 15%; 
}

.col_fifth_movil_hoteles_3 {
position: relative;
display: block;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 20px;
width: 35%; 
}

.panel_bloque3_movil {
margin: 0 auto;
height: 90px;
position: relative;
perspective: 600px;
width: 60%;
background-color: transparent;
}
/*####################################*/

/* Panel Flip */
.wrapper {
width: 100%;
margin: 0 auto;
background-color: #bdd3de;
overflow: hidden;
}

.panel {
margin: 0 auto;
height: 95px;
position: relative;
perspective: 600px;
width: 65%;
background-color: transparent;
}


.panel_bloque3 {
margin: 0 auto;
height: 120px;
position: relative;
perspective: 600px;
width: 60%;
background-color: transparent;
}

.panel .front,
.panel .back {
text-align: center;
}

.panel .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
}

.panel .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
transform: rotateY(-180deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
}

.panel.flip .front {
z-index: 900;
transform: rotateY(180deg);
}

.panel.flip .back {
z-index: 1000;
transform: rotateX(0deg) rotateY(0deg);
}

.box1, .box2 {
width: 175px;
height: 175px;
margin: 0 auto;
padding: 20px;
border-radius: 25px;
}

.box1 {
background-color: lightgrey;
}

.box2 {
background-color: lightgrey;
}

.box1 {
background-color: lightgrey;
}

.box2 {
background-color: lightgrey;
}

.box1_movil, .box2_movil {
width: 110px;
height: 110px;
margin: 0 auto;
padding: 20px;
border-radius: 25px;
}

.box1_movil {
background-color: lightgrey;
}

.box2_movil {
background-color: lightgrey;
}

.panel_movil {
margin: 0 auto;
height: 130px;
position: relative;
perspective: 600px;
width: 33%;
background-color: transparent;
}

.panel_movil .front,
.panel_movil .back {
text-align: center;
}

.panel_movil .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
}

.panel_movil .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
transform: rotateY(-180deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
}

.panel_movil.flip .front {
z-index: 900;
transform: rotateY(180deg);
}

.panel_movil.flip .back {
z-index: 1000;
transform: rotateX(0deg) rotateY(0deg);
}

.no-select {
user-select: none;
}

.padding_5px{
padding-top: 5px !important;
}

.progress {
width: 100%;
height: 5px;
}
.progress-wrap {
background: #fff;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #957AFB;
left: 0;
position: absolute;
top: 0;
height: 100%;
width: 0;
}

.container_dots_1 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.nav-buttons_1 {
display: flex;
justify-content: center;
margin-top: 20px;
}

.dots-container_1 {
position: absolute;
right: 13em !important; /* Ajustar según sea necesario */
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
}

.dot_1 {
height: 15px;
width: 15px;
background-color: #957AFB; /* Color de relleno inactivo */
border: 2px solid #fff; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_active_1 {
background-color: #fff !important; /* Color de relleno activo */
}

.container_dots_2 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.nav-buttons_2 {
display: flex;
justify-content: center;
margin-top: 20px;
}

.dots-container_2 {
position: absolute;
right: 13em !important; /* Ajustar según sea necesario */
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
}

.dot_2 {
height: 15px;
width: 15px;
background-color: #fff; /* Color de relleno inactivo */
border: 2px solid #957AFB; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_active_2 {
background-color: #957AFB; /* Color de relleno activo */
}


.button_disabled_style:disabled {
cursor: not-allowed;
opacity: 0.6; /* Opcional: Cambiar la opacidad para indicar que el botón está deshabilitado */
}

.underline--magical {
background-image: linear-gradient(120deg, #b199fc 0%, #957AFB 100%);
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: 0 88%;
transition: background-size 0.25s ease-in;
&:hover {
  background-size: 100% 88%;
}
}

.container_dots_3 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.nav-buttons_3 {
display: flex;
justify-content: center;
margin-top: 20px;
}

.dots-container_3 {
position: absolute;
right: 20em !important; /* Ajustar según sea necesario */
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
}

.dot_3 {
height: 15px;
width: 15px;
background-color: #fff; /* Color de relleno inactivo */
border: 2px solid #957AFB; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_active_3 {
background-color: #957AFB; /* Color de relleno activo */
}


/*###################*/
.dots-container_movil1 {
position: absolute;
right: 1em !important; /* Ajustar según sea necesario */
top: 44%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.dots-container_movil2 {
position: absolute;
right: 2em !important; /* Ajustar según sea necesario */
top: 43%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
}

.dot_movil1 {
height: 10px;
width: 10px;
background-color: #957AFB; /* Color de relleno inactivo */
border: 2px solid #fff; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_movil2 {
height: 10px;
width: 10px;
background-color: #fff; /* Color de relleno inactivo */
border: 2px solid #957AFB; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_active_movil1 {
background-color: #fff; /* Color de relleno activo */
}


.dot_active_movil2 {
background-color: #957AFB; /* Color de relleno activo */
}

.container_movil_bloque6_1{
order:0;
flex:0 1 auto;
align-self:auto;
height:auto;
width:8em;
margin-right: 10px;
margin-left: 10px;
}

.new-carousel-item-movil {
background-color: #000;
border-radius: 20px !important;
text-align: center;
margin-bottom: 1em;
padding-top: 1em;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; /* Adjust height as needed */
}


.new-bottom-div-movil {
color: #fff;
}

.dots-container_com_movil {
position: absolute;
right: 2em !important; /* Ajustar según sea necesario */
top: 40%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
}

.dot_movil1 {
height: 10px;
width: 10px;
background-color: #957AFB; /* Color de relleno inactivo */
border: 2px solid #fff; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_active_movil1 {
background-color: #fff; /* Color de relleno activo */
}


.dot_com_movil {
height: 10px;
width: 10px;
background-color: #000; /* Color de relleno inactivo */
border: 2px solid #957AFB; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_com_func {
height: 10px;
width: 10px;
background-color: #000; /* Color de relleno inactivo */
border: 2px solid #957AFB; /* Borde inactivo */
border-radius: 50%;
display: inline-block;
margin: 5px 0;
cursor: pointer;
}

.dot_active_com_movil {
background-color: #957AFB; /* Color de relleno activo */
}

 /* Clase para la animación */
 .hover-zoom-shadow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.hover-zoom-shadow:hover {
    transform: scale(1.05); /* Zoom del 5% */
    box-shadow: 0 0 10px 3px #957AFB; /* Sombra con color #957AFB */
}



/*carrusel paneles*/

#carousel-container {
	width: 700px;
	height: 632px;
	position: relative;
	margin: 50px auto 0;

  border-radius: 10px;
}

#carousel-container > div:first-child {
	overflow: hidden;
	max-width: 100%;
	margin: 0;
}

#carousel {
	position: relative;
	width: 5000px;
	height: 332px;
  padding: 0;
  margin: 0;
}

.animate{
	-webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}

.slide {
  list-style: none;
	position: relative;
	float: left;
	transform: translateX(-700px)
}

#controls{
	position: absolute;
  width: 830px;
	top: calc( 50% - 25px);
	margin: 0 -60px;
}

#controls span {
	width: 50px;
	cursor: pointer;
	opacity: 0.4;
}

#controls span:hover {
	opacity: 1;
}

#prev {
	float: left;
}

#next {
	float: right;
}


/*animacion imagen zoom*/


 /* Clase para la animación */
 .ico_sec_4 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.ico_sec_4:hover {
    transform: scale(1.1); /* Zoom del 5% */
}




 /* Contenedor principal */
.custom-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 25px;
}

/* Línea horizontal */
.custom-line {
    border-top: 2px solid #957AFB;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

/* Flecha personalizada */
.custom-arrow {
    position: absolute;
    top: -18px; /* Ajusta según el tamaño de la flecha */
    left: 0;
    color: #957AFB;
    font-size: 35px;
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s ease; /* Transición suave */
}

/* Animación de la flecha */
.custom-arrow.animate {
    opacity: 1; /* Hace visible la flecha */
    animation: custom-load 20s linear infinite; /* Animación lineal y constante */
}

@keyframes custom-load {
    0% {
        left: 0; /* Inicia en la izquierda */
    }
    100% {
        left: calc(100% - 35px); /* Llega al final */
    }
}

/* Estado inicial: altura en 0 y transición definida */
#comodin_1,
#comodin_2,
#comodin_3,
#comodin_4,
#comodin_5 {
  height: 0;
  transition: height 0.3s ease-in-out;
}

.contenedor-paso[data-paso="1"]:hover #comodin_1 {
  height: 40px;
}

.contenedor-paso[data-paso="2"]:hover #comodin_2 {
  height: 40px;
}

.contenedor-paso[data-paso="3"]:hover #comodin_3 {
  height: 40px;
}

.contenedor-paso[data-paso="4"]:hover #comodin_4 {
  height: 40px;
}

.contenedor-paso[data-paso="5"]:hover #comodin_5 {
  height: 40px;
}

.circulo {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/*
.contenedor-paso:hover .circulo {
    background-color: #957AFB !important;
    border-color: #957AFB !important;    
}

*/


/* Clase para el estado fijo */
.contenedor-paso.fijo {
    position: relative !important; /* Cambia a posición relativa */
    top: 40px; /* Ajusta la posición hacia abajo */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

/* Asegura que el círculo y el texto se mantengan visibles */
.contenedor-paso.fijo .circulo {
    background-color: #957AFB !important;
    border-color: #957AFB !important;
}

.contenedor-paso.fijo .dosis {
    color: #957AFB; /* Cambia el color del texto si es necesario */
}


  /* Animación del gradiente */
  @keyframes gradientloop {
    0% { background-position: 0% 50%; }
    50% { background-position: 50% 20%; }
    80% { background-position: 0% 50%; }
}

/* Estilos del contenedor */
.gradientloop {
    animation: gradientloop 20.75s ease infinite;
    background: linear-gradient(
        60deg,
        #000 0%,      /* $color-1 */
        #000 20%,     /* $color-1 */
        #000 40%,     /* $color-2 */
        #000 50%,     /* $color-3 */
        #000 60%,     /* $color-4 - Morado */
        #957AFB 80%,  /* Color intermedio (mezcla de morado y amarillo) */
        #FDC96D 100%  /* $color-5 - Amarillo */
    );
    background-size: 200% 100%;
    opacity: 0; /* Ocultar inicialmente */
    transition: opacity 0.5s ease; /* Transición suave */
}

/* Mostrar el elemento */
.gradientloop.visible {
    opacity: 1;
}

/* Estilos adicionales */
.do-not-include {
    border-radius: 50% 0% 0% 50%;
    width: 100%;
    padding: 2.45em 0;
    box-shadow: 0 5px 15px -4px rgba(0,0,0,.75);
    position: relative;
}
  
  
  /* Clase para ocultar las letras inicialmente */
.texto-animado {
    opacity: 0;
}

/* Clase para mostrar las letras con desvanecido */
.texto-animado.mostrar {
    opacity: 1;
}

/* Estilo para cada letra */
.texto-animado span {
    opacity: 0;
    display: inline-block;
}

/* Animación de desvanecido para las letras */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Animación de Imagen fondo latido */

@keyframes latido {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.imagen-latido {
    animation: latido 4s infinite;
    width: 820px;
    position: absolute;
    z-index: 1;
    margin-inline-start: 16em;
    margin-top: -20em;
}

#wifiSubMenu{
  background: none !important;
  border: none !important;
}

#catalogoSubMenu{
  background: none !important;
  border: none !important;
}




/*##################*/

/*-------------movil----------------*/
@media screen and (max-width: 767px) {

    .btn_login-movil{
        display: none !important;
    }

    .text_responsive{
        font-size: 10px !important;
    }

    #sec1_qr {
        background-image: url(sistema/img/vector_persona_movil.png) !important;
        background-size: 450px !important;
        background-repeat: no-repeat !important;
        background-position: right !important;
        display: table !important;
    }
    .letras1 {
        font-family: 'Dosis', sans-serif;
        font-weight: bold !important;
        font-size: 15px !important;
        color: white !important;
        line-height: 1.0 !important;
    }
    .sec1-conten-qr {
        /* margin-top: -92% !important;*/
        margin-top: -80% !important;
    }
    .color {
        position: relative !important;
        right: 0;
        left: 0;
        z-index: 1030;
       /* background: #6360d2 !important;*/
        border-color: transparent !important;
    }
    .navbar {
        margin-bottom: 0px !important;
        background: #000 !important;
    }
    .lgp {
        font-family: "HelveTh";
        color: white !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        margin-top: 0% !important;
    }

    .btn-a {
        font-size: 12px !important;
    }


    .btn-degra {
        font-size: 12px !important;
    }
    .vista_normal_logo{
        display: none !important;
    }
    .vista_movil_logo {
        display: block !important;
        margin-left: 31%;
    }
    .navbar-toggle {
      position: relative !important;
      float: left !important;
      padding: 9px 10px !important;
      margin-top: 18px !important;
      margin-right: 314px !important;
      margin-bottom: 8px !important;
      background-color: transparent !important;
      background-image: none !important;
      border: 1px solid #957AFB !important;
      border-top-color: #957AFB !important;
      border-right-color: #957AFB !important;
      border-bottom-color: #957AFB !important;
      border-left-color: #957AFB !important;
      border-radius: 4px !important;
      margin-left: 5px !important;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #957AFB !important;
    }
    .btn_login{
        display: none !important; 
    }
    #login{
        display: block !important;
    }
    .lgmDs{
        font-size: 20px !important;
    }
    .fondo_final_div{
        margin-top: 10% !important; 
    }
    .texto_empezar{
        color: white !important;
        line-height: 1.2 !important;
        font-size: 15px !important;
    }
    .btn-degra {
        width: 108px !important;  
    }
    .btn_empezar{
        font-size: 8px !important;
    }
    .fondo_impulsamos {
        background-image: url(sistema/img/impulsamos_home.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .letras {
        font-family: 'Dosis', sans-serif;
        color: white !important;
        margin-top: -4px;
        font-size: 15px !important;
    }
    .div_impulsamos{
        margin-top: 12% !important;
    }
    .titulos {
        font-size: 16px !important;
    }
    .btn-e {
        font-size: 9px !important;
    }
    .btn-f {
        font-size: 10px !important;
    }
    .contain_span{
        margin-top: 40px !important;
    }
    .span_titulo {
        font-size: 8px !important;
    }
    .parrafo_titulo {
        font-size: 12px !important;
    }
    .final_productos{
        height: 50px !important;
        margin-bottom: 0% !important;
    }
    .reservas_productos{
        margin-top: 0px !important;
    }
    .portal_movil{
        padding: 0 !important;
        margin: 0 !important;
    }
    .img_portal_movil{
        float: center !important;
    }
    .titulos_portal {
        font-size: 16px !important;
    }
    .cell-2-text {
        margin-top: 12% !important;
        text-align: left !important;
    }
    .texto_persona{
        font-size: 14px !important;
    }
    .textopersona{
        font-size: 16px !important;
    }
    .custo_img{
        width: 100% !important;
    }
    .contratos{
        display: none !important;
    }
    .contratos_movil{
        display: block !important;
        margin-top: -150px;
    }
    .ul_impulsamos{
        margin-left: -16% !important;
        font-size: 12px !important;
    }

    .letras_impuslsamos { 
        font-size: 12px !important;
    }
    .productos_gastronomia{
        margin-left: 0px !important; 

    }
    .p_impulsamos{
        font-size: 12px !important;
    }
    .p_normal{
        display: none !important;
    }
    .p_movil{
        display: block !important;
    }
    .div_persona{
        margin-top: 13% !important;
    }
    .letras_impuslsamos_dos {
        font-size: 10px !important;
    }
    .beneficios_margen{
        margin-top: -11% !important;
        margin-bottom: 1% !important;    
    }
    .cell-1-text {
        margin-top: 5% !important;
    }
    .div_fondo_empezar{
        margin-top: 5% !important;
    }
    .letras_footer{
        font-size: 15px !important;
    }
    .l_foter {
        font-size: 14px !important;
    }
    .panel_contrato{
        padding-bottom: 112px !important;
    }
    .div_logo{
        display: none;
    }
    .hr_footer{
        display: none !important;
    }

    #vector_persona{
        display: none !important;
    }
    #vector_persona_movil{
        display: block !important;
    }
    .empezar{
        display: none !important;
    }
    .empezar_movil{
        display: block !important;
    }

    /**/
    .scans_qr{
        font-size: 15px !important;
    }
    .marcas{
        width: 100% !important;
        margin-top: -2em !important;
    }
    .titulo_normal{
        display: none !important;
    }
    .titulo_movil{
        display: block !important;
    }
    .bloque_qr_normal{
        display: none !important;
    }
    .bloque_qr_movil{
        display: block !important;
    }
    .bloque_telefono_normal{
        display: none !important;
    }
    .bloque_telefono_movil{
        display: block !important;
    }
    .slider_normal{
        display: none !important;
    }
    .slider_movil{
        display: block !important;
    }
    .tercer_bloque_normal{
        display: none !important;
    }
    .tercer_bloque_movil{
        display: block !important;
    }
    .fondo_qr{
        background-size: contain;
        background-repeat: no-repeat; 
    }
    .cuarto_bloque_normal{
        display: none !important;
    }
    .cuarto_bloque_movil{
        display: block !important;
    }
    #secppersona{
        background-image: url(sistema/img/vector_persona2.png) !important;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: right;
        display: table;
    }
    .chica_movil{
        width: 163px !important;
        float: right;
    }
    .texto_consulta{
        font-size: 13px !important;
    }
    .texto_consultados{
        font-size: 20px !important;
    }
    .p_observa{
        font-size: 13px !important;
    }
    .bt_reproducir{
        margin-top: 3% !important;
    }
    .bt_altura{
        margin-top: -53%;   
    }

    .quinto_bloque_normal{
        display: none !important;
    }
    .quinto_bloque_movil{
        display: block !important;
    }
    .sexto_bloque_normal{
        display: none !important;
    }
    .sexto_bloque_movil{
        display: block !important;
    }
    .margen_boton{
        margin-bottom: 0px !important;
    }
    .margen_boton_qr{
        margin-bottom: 0px !important;
    }
    .funcionalidades{
        font-size: 10px !important;
        padding: 5px 10px 5px 10px !important;
    } 

    .btn-degra_qr {
        width: 115px !important;
    }
    .fiweex_qrp{
        font-size: 24px !important;
    }
    #footer{
        margin: 0px !important;
    } 

    .nuevo_bloque_normal{
        display: none !important;
    }
    .nuevo_bloque_movil{
        display: block !important;
    }


    .primer_bloque_qr_normal{
        display: none !important;
    }
    .primer_bloque_qr_movil{
        display: block !important;
    }

    .tamano_nuevo{
        font-size: 13px !important;
    }

    .bloque_normal{
        display: none !important;
    }







    body {
        font-family: Arial, sans-serif;
    }
    
    .carousel {
        position: relative;
        width: 600px;
        margin: auto;
        width: 90%; 
    }
    
    .carousel-inner {
        position: relative;
        overflow: hidden;
    }
    
    .carousel-item {
        display: none;
        text-align: center;
    }
    
    .carousel-item.active {
        display: block;
    }
    
    .description {
        text-align: center;
        margin: 10px 0;
    }
    
    .dots {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 35%;
        transform: translateY(-50%);
        right: 0px !important;
    }
    
    .dot {
        height: 15px;
        width: 15px;
        margin: 5px 0;
        border: 2px solid #957AFB; /* borde blanco de 2px */
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        background-color: transparent; /* sin relleno */
    }
    
    
    .dot.active {
        background-color: #957AFB;
    }
    
    .controls {
        text-align: center;
        margin-top: 10px;
    }
    
    button.prev, button.next {
        background-color: #f1f1f1;
        border: none;
        padding: 10px;
        cursor: pointer;
        margin: 0 5px;
    }

    .description {
        padding: 0 5px;
    }

    button.prev, button.next {
        padding: 5px;
    }
    
    /*
    .description {
        overflow: auto; 
    }
    */

    .description img {
        width: 25px;
        height: 25px;
        float: left;
        margin-top: 40px;
    }
    
    .text1_bloque2{
        font-size: 14px !important;
    }


    .text2_bloque2{
        font-size: 10px !important;
    }

    .text_bloque5{
        font-size: 10px !important;
    }
    
    .text1_bloque1{
        font-size: 18px !important;
    }
    
    .margin_img{
        margin-bottom: 20px !important;
    }

    .dots-container_movil2 {
        position: absolute;
        right: 1em !important; /* Ajustar según sea necesario */
        top: 43%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .margin_inline{
        margin-inline-start: 10.5em !important;
    }



        /*carrusel paneles*/

        #carousel-container {
            width: 300px;
            height: 632px;
            position: relative;
            margin: 50px auto 0;

        border-radius: 10px;
        }

        #carousel-container > div:first-child {
            overflow: hidden;
            max-width: 100%;
            margin: 0;
        }

        #carousel {
            position: relative;
            width: 2500px;
            height: 332px;
        padding: 0;
        margin: 0;
        }

        .animate{
            -webkit-transition-duration: .5s;
        -moz-transition-duration: .5s;
        -o-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
        }

        .slide {
        list-style: none;
            position: relative;
            float: left;
            transform: translateX(-300px)
        }

        #controls{
            position: absolute;
            width: 420px;
            top: calc( 50% - 25px);
            margin: 0 -60px;
        }

        #controls span {
            width: 50px;
            cursor: pointer;
            opacity: 0.4;
        }

        #controls span:hover {
            opacity: 1;
        }

        #prev {
            float: left;
        }

        #next {
            float: right;
        }




/* Contenedor principal */
.custom-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 25px;
}

/* Línea horizontal */
.custom-line {
    border-top: 2px solid #957AFB;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

/* Flecha personalizada */
.custom-arrow {
    position: absolute;
    top: -10px; /* Ajusta según el tamaño de la flecha */
    left: 0;
    color: #957AFB;
    font-size: 35px;
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s ease; /* Transición suave */
}

/* Animación de la flecha */
.custom-arrow.animate {
    opacity: 1; /* Hace visible la flecha */
    animation: custom-load 20s linear infinite; /* Animación lineal y constante */
}

@keyframes custom-load {
    0% {
        left: 0; /* Inicia en la izquierda */
    }
    100% {
        left: calc(100% - 35px); /* Llega al final */
    }
}




/* Animación de Imagen fondo latido */

@keyframes latido {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.imagen-latido {
    animation: latido 4s infinite;
    width: 70%;
    position: absolute;
    z-index: 1;
    margin-inline-start: 6em;
    margin-top: -6em;
}




#right_carrusel_mobile:disabled,
#left_carrusel_mobile:disabled {
    opacity: 0.4; /* Makes the button 60% transparent when disabled */
    cursor: not-allowed; /* Optional: changes cursor on hover */
}

/* Ensure enabled buttons are fully opaque */
#right_carrusel_mobile:disabled,
#left_carrusel_mobile:disabled {
    background-color: rgba(0, 0, 0, 0.3); /* Adjust the last number (0.3) for transparency */
    cursor: not-allowed;
}



.vertical-center-2 .slick-slide {
    margin: 0 10px; /* Ajusta el valor según el espacio que desees. 5px es un ejemplo para reducir el espacio */
}

.vertical-center-2 .slick-slide img {
/*    transform: scale(1.1);  Aumenta el tamaño de la imagen un 10% */
    width: 100% !important;
    height: auto; /* Mantiene la proporción */
}

/* Agrega este CSS en tu hoja de estilos */
.custom-btn {
    transition: opacity 0.3s ease; /* Transición suave para el cambio de opacidad */
}

.custom-btn-disabled {
    opacity: 0.4; /* Nivel de transparencia cuando está deshabilitado */
    cursor: not-allowed; /* Cambia el cursor para indicar que no es clickeable */
}


}

@media screen and (min-width: 1200px) and (max-width: 1280px) {
    #sec1_qr {
        background-repeat: no-repeat;
        background-position: bottom right;
        display: table !important;
    }
    .sec1-conten-qr {
    }

    .texto_imagen_qr {
        margin-top: 23% !important;
        margin-left: -58% !important;
        text-align: right !important;
    }
    .span_imagen_qr{
        margin-top: 36.5% !important;
        margin-left: 19% !important;
    }   

    .fondo_final_div{
        margin-top: 17% !important;
    }
    .fondo_final {
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
    .img_coete{
        width: 27% !important;
        margin-top: -48% !important;
        position: relative !important;
        float: right !important;
    }
    .custo_img{
        margin-top: -120px !important;
    }

}

@media screen and (min-width: 800px) and (max-width: 1980px) {

    .ancho_wifi{
        width: 13.667% !important;
    }
    .ancho_medio{
        width: 5.333% !important;
    }
    .ancho_portal{
        width: 72.667%; 
    }
    .ancho_contratos{
        width: 9.333% !important;
    }
}



/*s20*/

@media screen and (max-width: 360px) and (max-device-height: 800px){

    .text_responsive{
        font-size: 8px !important;
    }

    .btn-e {
        font-size: 7px !important;
    }
    .span_titulo {
        font-size: 6px !important;
    }
    .letras {
        margin-top: -6px;
        font-size: 14px !important;
    }
    .letras_impuslsamos_dos {
        font-size: 9px !important;
        margin-bottom: 20px !important;
    }

    .texto_persona {
        font-size: 12px !important;
    }
    /*****/
    /*.sec1-conten-qr {
        margin-top: -103% !important;
       
    }*/
    .scans_qr {
        font-size: 13px !important;
    }
    .texto_contenido{
        font-size: 14px !important;
    }
    .img_carrusel{
        width: 389px !important;
    }
    .altura_qr{
        margin-top: -45%!important;
    }
    .altura_texto{
        font-size:  10px!important;
    }
    .letras11{
        font-size: 14px !important;
    }
    .funcionalidades{
        font-size: 9px !important;
    }
    /**/ 
    .texto_consulta{
        font-size: 12px !important;    
    }
    .bt_altura {
        margin-top: -26%;
    }

    .text_20px{
       font-size: 20px !important; 
    }
    .text_18px{
        font-size: 18px !important; 
     }
    .text_16px{
        font-size: 12px !important; 
     }
    .text_12px{
       font-size: 12px !important; 
    }
    .text_10px{
        font-size: 10px !important; 
     }
    .text_8px{
    font-size: 8px !important; 
    }
    .text_6px{
        font-size: 6px !important; 
    }

    .box1_movil, .box2_movil {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 25px;
    }

    .panel_movil {
        margin: 0 auto;
        height: 130px;
        position: relative;
        perspective: 600px;
        width: 31%;
        background-color: transparent;
    }

    .dots {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 37%;
        transform: translateY(-50%);
        right: 0px !important;
    }

    .margin_bottom_secc4{
        margin-bottom: 6em !important;
    }

    .text1_bloque2{
        font-size: 14px !important;
    }

    .text2_bloque2{
        font-size: 10px !important;
    }

    .text2_bloque2{
        font-size: 10px !important;
    }

}


@media screen and (min-width: 384px) and (max-width: 385px){
    /*****/

    .img_carrusel{
        width: 386px !important;
    }
    .texto_consulta {
        font-size: 12px !important;
    }

}



@media screen and (min-width: 375px) and (max-width: 376px){
    /*****/
    /* .sec1-conten-qr {
         margin-top: -103% !important;
     } */
    .scans_qr {
        font-size: 13px !important;
    }
    .texto_contenido{
        font-size: 14px !important;
    }
    .img_carrusel{
        width: 389px !important;
    }
    .altura_qr{
        margin-top: -45%!important;
    }
    .altura_texto{
        font-size:  10px!important;
    }
    .letras11{
        font-size: 14px !important;
    }
    .funcionalidades{
        font-size: 6px !important;
    } 
    .texto_consulta {
        font-size: 12px !important;
    }
    .bt_altura {
        margin-top: -26% !important;
    }

    .text_20px{
        font-size: 20px !important; 
     }
     .text_18px{
         font-size: 18px !important; 
      }
     .text_16px{
         font-size: 12px !important; 
      }
     .text_12px{
        font-size: 12px !important; 
     }
     .text_10px{
         font-size: 10px !important; 
      }
     .text_8px{
     font-size: 8px !important; 
     }
     .text_6px{
         font-size: 6px !important; 
     }

     .box1_movil, .box2_movil {
         width: 100px;
         height: 100px;
         margin: 0 auto;
         padding: 20px;
         border-radius: 25px;
     }

     .panel_movil {
         margin: 0 auto;
         height: 130px;
         position: relative;
         perspective: 600px;
         width: 31%;
         background-color: transparent;
     }

     .dots {
         display: flex;
         flex-direction: column;
         align-items: center;
         position: absolute;
         top: 35%;
         transform: translateY(-50%);
         right: 0px !important;
     }

     .ico_mail_sec4{
        margin-bottom: 30px !important;
    }

    .margin_bottom_secc4{
        margin-bottom: 10em !important;
    }

    .text_responsive{
        font-size: 8px !important;
    }

}

@media screen and (min-width: 375px) and (max-device-height: 667px) {
    /* .sec1-conten-qr {
         margin-top: -92% !important;
     }*/
    .scans_qr {
        font-size: 13px !important;
    }
    .texto_contenido{
        font-size: 14px !important;
    }
    .img_carrusel{
        width: 389px !important;
    }
    .altura_qr{
        margin-top: -45%!important;
    }
    .altura_texto{
        font-size:  10px!important;
    }
    .letras11{
        font-size: 14px !important;
    }
    .funcionalidades{
        font-size: 6px !important;
    } 
}
@media screen and (min-width: 414px) and (max-device-height: 736px) {
    /* .sec1-conten-qr {
        margin-top: -83% !important;
     }*/
    .scans_qr {
        font-size: 13px !important;
    }
    .texto_contenido{
        font-size: 14px !important;
    }
    .img_carrusel{
        width: 389px !important;
    }
    .altura_qr{
        margin-top: -45%!important;
    }
    .altura_texto{
        font-size:  10px!important;
    }
    .letras11{
        font-size: 14px !important;
    }
    .funcionalidades{
        font-size: 6px !important;
    } 
    .text_20px{
        font-size: 20px !important; 
    }

    .padding_top{
        padding-top: 15px !important; 
    }
}

@media screen and (min-width: 389px) and (max-width: 391px){
    /**Iphone 13***/

    .img_carrusel{
        width: 390px !important;
    }

    .text_responsive{
        font-size: 9px !important;
    }

    .text_20px{
        font-size: 20px !important; 
     }
     .text_18px{
         font-size: 18px !important; 
      }
     .text_16px{
         font-size: 12px !important; 
      }
     .text_12px{
        font-size: 12px !important; 
     }
     .text_10px{
         font-size: 10px !important; 
      }
     .text_8px{
     font-size: 8px !important; 
     }
     .text_6px{
         font-size: 6px !important; 
     }

     .box1_movil, .box2_movil {
         width: 100px;
         height: 100px;
         margin: 0 auto;
         padding: 20px;
         border-radius: 25px;
     }

     .panel_movil {
         margin: 0 auto;
         height: 130px;
         position: relative;
         perspective: 600px;
         width: 32%;
         background-color: transparent;
     }

     .dots {
         display: flex;
         flex-direction: column;
         align-items: center;
         position: absolute;
         top: 37%;
         transform: translateY(-50%);
         right: 0px !important;
     }

     .ico_mail_sec4{
        margin-bottom: 20px !important;
    }

}
@media screen and (min-width: 412px) and (max-width: 415px){
    /*****/

    .img_carrusel{
        width: 389px !important;
    }

}
@media screen and (min-width: 319px) and (max-width: 320px) {

    /*.sec1-conten-qr {
        margin-top: -93% !important;
    }*/
    .scans_qr {
        font-size: 13px !important;
    }
    .texto_contenido{
        font-size: 12px !important;
    }
    .img_carrusel{
        width: 353px !important;
    }
    .altura_qr{
        margin-top: -45%!important;
    }
    .altura_texto{
        font-size:  10px!important;
    }
    .letras11{
        font-size: 13px !important;
    }
    .funcionalidades{
        font-size: 6px !important;
    } 
}

@media screen and (max-width: 360px) and (max-device-height: 780px) {

    .text1_bloque2{
        font-size: 14px !important;
    }

    .text_responsive{
        font-size: 8px !important;
    }
}


@media screen and (max-width: 360px) and (max-device-height: 740px) {
    .btn-e {
        font-size: 7px !important;
    }
    .span_titulo {
        font-size: 6px !important;
    }
    .letras {
        margin-top: -6px;
        font-size: 14px !important;
    }
    .letras_impuslsamos_dos {
        font-size: 9px !important;
        margin-bottom: 20px !important;
    }

    .texto_persona {
        font-size: 12px !important;
    }

}



@media screen and (max-width: 360px) and (max-device-height: 640px) {
    .btn-e {
        font-size: 7px !important;
    }
    .span_titulo {
        font-size: 6px !important;
    }
    .letras {
        margin-top: -6px;
        font-size: 14px !important;
    }
    .letras_impuslsamos_dos {
        font-size: 9px !important;
        margin-bottom: 20px !important;
    }
    .texto_persona {
        font-size: 12px !important;
    }
    /* .sec1-conten-qr {
         margin-top: -89% !important;
     }*/
     .text1_bloque2{
        font-size: 14px !important;
    }

}



@media screen and (max-width: 320px) and (max-device-height: 490px) {
    #login{
        margin-top: -30% !important;
    }
    .btn-e {
        font-size: 7px !important;
    }
    .span_titulo {
        font-size: 6px !important;
    }
    .letras {
        margin-top: -6px;
        font-size: 14px !important;
    }
    .letras_impuslsamos_dos {
        font-size: 9px !important;
        margin-bottom: 20px !important;
    }
    .texto_persona {
        font-size: 12px !important;
    }
    .textopersona {
        font-size: 14px !important;
    }


}


@media screen and (max-width: 345px) and (max-device-height: 493px) {
    .btn-e {
        font-size: 7px !important;
    }
    .span_titulo {
        font-size: 6px !important;
    }
    .letras {
        margin-top: -6px;
        font-size: 14px !important;
    }
    .letras_impuslsamos_dos {
        font-size: 9px !important;
        margin-bottom: 20px !important;
    }
    .texto_persona {
        font-size: 12px !important;
    }
}

/**/
 /*s20 / S5 / S9 */

@media screen and (max-width: 360px) and (min-width: 359px) {

    .text_codigo_qr{
        font-size: 35px !important;
    }

    .text_panel_control{
        font-size: 10px !important;
    }
    .text_panel_control_2{
        font-size: 7px !important;
    }

     /*Nuevo*/
    .forma_forma{
        margin-top: -7em !important;
    }

    .forma_forma2{
        margin-top: -26em !important;
    }


}

/*iPhone 11 Pro / iPhone 12 13 mini / iPhone 6 7 8 normal / iPhone SE / iPhone X XS / */
@media screen and (max-width: 375px) and (min-width: 374px) {
 
    .text_codigo_qr{
        font-size: 35px !important;
    }
    .text_panel_control_2{
        font-size: 8px !important;
    }
     /*Nuevo*/
    .forma_forma{
        margin-top: -7em !important;
    }

    .forma_forma2{
        margin-top: -26em !important;
    }
}



/*S20 + LINUX */
@media screen and (max-width: 384px) and (min-width: 383px) {

  
   
     /*Nuevo*/
    .forma_forma{
        margin-top: -7em !important;
    }

    .forma_forma2{
        margin-top: -26em !important;
    }
}


/*hsata aca*/

/*iPhone 12 13 PRO / */
@media screen and (max-width: 390px) and (min-width: 389px) {
    
    .text_responsive{
        font-size: 9px !important;
    }

   .text_panel_control{
        font-size: 11px !important;
    }
    .text_panel_control_2{
        font-size: 8px !important;
    } 
   /*Nuevo*/
    .forma_forma{
        margin-top: -7em !important;
    }

    .forma_forma2{
        margin-top: -26em !important;
    }

    .margin_bottom_secc4{
        margin-bottom: 10em !important;
    }

    .text1_bloque2{
        font-size: 14px !important;
    }

    .text_bloque5{
        font-size: 10px !important;
    }

}

/*iPhone 11 PRO MAX / iPhone 6 7 8 PLUS / iPhone XR 11 / iPhone XS MAX*/
@media screen and (max-width: 414px) and (min-width: 413px) {
  .text_panel_control{
    font-size: 11px !important;
  }
  .text_20px{
    font-size: 20px !important; 
}

.text_responsive{
	font-size: 9px !important;
}
 
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
  
}

/* iPhone 12 pro max ----------- */
@media screen and (max-width: 429px) and (min-width: 428px){
    .text_6px{
        font-size: 6px !important; 
    }
    .ico_mail_sec4{
        margin-bottom: 20px !important;
    }
}