/* vinculacion de fuentes externas */
@font-face{font-family:Fugaz-Regular;src:url(../../public/fonts/Gotham-Medium.ttf);font-display:swap}
@font-face{font-family:dfibra-bold;src:url(../../public/fonts/Gotham-Black.ttf);font-display:swap}
@font-face{font-family:dfibra-ultra;src:url(../../public/fonts/Gotham-Ultra.ttf);font-display:swap}
@font-face{font-family:dfibra-light;src:url(../../public/fonts/Gotham-Light.ttf);font-display:swap}
@font-face{font-family:dfibra-regular;src:url(../../public/fonts/Gotham-Book.ttf);font-display:swap}
@font-face{font-family:dfibra-extralight;src:url(../../public/fonts/Gotham-XLight.ttf);font-display:swap}
@font-face{font-family:dfibra-medium;src:url(../../public/fonts/Gotham-Medium.ttf);font-display:swap}
@font-face{font-family:dfibra-ligthitalica;src:url(../../public/fonts/Gotham-LightItalic.ttf);font-display:swap}
@font-face{font-family:dfibra-black;src:url(../../public/fonts/Gotham-Black.ttf);font-display:swap}

body {
margin: 0;
padding: 0;
font-family: 'movistar-light';
background-color: white;
}


/*--- cabecera inicial ===========================================================*/
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FF1272; /* Color de fondo del encabezado */
    color: #FF1272;
    padding: 10px 10px;
  }
  
  .header-logo {
    height: 55px; /* Altura del logo */
    display: flex;
    align-items: right;
    font-size: 24px; /* Ajustar según sea necesario */
    font-weight: bold;
    color: #FF1272; /* Color del texto del logo */
}

.header .agencia-container {

    display: inline-block; /* Hace que el contenedor sea del tamaño de su contenido */
}


.header .agencia-container .agency-box {
    font-family: 'dfibra-bold';
    /*font-weight: bold; /* Texto en negrita */
    color: #019DF4; /* Color del texto naranja */
    border: 2px solid #019DF4; /* Borde naranja */
    border-radius: 15px; /* Esquinas redondeadas */
    padding: 5px 10px; /* Espaciado interno */
    margin-left: 20px; /* No hay margen para acercarlo al logo */
    display: flex;
    align-items: center; /* Centra el texto verticalmente si es necesario */
}


.header-contact{
	display: flex;
    justify-content: center; /* Centra los contenedores horizontalmente */
    align-items: center; /* Alinea los contenedores verticalmente */
    gap:10px; /* Espaciado entre los contenedores */
    width: 100%; /* Ocupa todo el ancho disponible */
}


.header .customer-container {
   

    
    display: inline-block; /* Hace que el contenedor sea del tamaño de su contenido */
    width: 140px;

}






                              .header .customer-text {
                                  margin-bottom: 2px; /* Ajusta este valor según sea necesario */

                                      padding: 5px;
                                 /* Otros estilos que puedas necesitar */
                                }

                                .header .customer-text .highlight {
                                    font-family: 'dfibra-bold';
                                    color: #019DF4; /* Color naranja para la palabra WIN */
                                    /*font-weight: bold; /* Hace la palabra WIN en negrita */
	                               font-size: 24px; 
                                    }

                                .header .customer-text .text_negrita {
                                    font-family: 'dfibra-light';
                                    color: white; /* Color naranja para la palabra WIN */
	                               font-weight: bold;
    
                                    }

                                .header-call-container-texto-blanco{
                                    font-family: 'dfibra-regular';
                                    color: #FF1272; /* Color naranja para la palabra WIN */
                                    /*font-weight: bold; /* Hace la palabra WIN en negrita */
	                                   font-size: 16px; 
                                    }
                                .header-call-container-texto-azul{
                                    font-family: 'dfibra-bold';
                                    color: #FF1272; /* Color naranja para la palabra WIN */
                                    /*font-weight: bold; /* Hace la palabra WIN en negrita */
	                               font-size: 16px; 
                                    }




.span_texto_rosa_bold1 {

    /*width: 60px;*/
   
    font-family: 'dfibra-bold';

    color: #000;

    /*margin: 5px; /* Asegura espacio entre el texto y las imágenes */

}


.span_texto_rosa_bold1:hover{

    /*width: 60px;*/


    font-family: 'dfibra-bold';

    color: #FF1272;

    /*margin: 5px; /* Asegura espacio entre el texto y las imágenes */

}


.header .click-here-btn {
    
    border-color: white;

    font-family: 'dfibra-regular';
    width: 100%; /* Hace que el botón tenga el ancho de su contenedor padre */
    
    background-color: #fff; /* Fondo naranja para el botón */
    color: black; /* Texto del botón en color blanco */
	font-size: 17px; 
    border-color: 3px; /* Remueve el borde del botón */
    padding: 5px 5px; /* Espaciado vertical interno del botón, ajusta según necesites */
    border-radius: 10px; /* Bordes redondeados del botón */
    cursor: pointer; /* Cambia el cursor a pointer */
    /*font-weight: bold; /* Texto del botón en negrita */
    /* Otros estilos que puedas necesitar */
}






.spacer-container1{

    font-family: 'dfibra-medium';
    font-size: 15px; 
    color: white; 
    
  
    width: 600px; /* Ancho del espacio */
    /* No es necesario altura, pero si quieres visualizar el espacio durante el desarrollo, puedes añadir una altura temporal */
    /* height: 10px; */
    /* background-color: #f0f; */ /* Color de fondo temporal para visualización */
}

.header .spacer-container {

    font-family: 'dfibra-medium';
    font-size: 25px; 
    color: white; 
    width: 600px; /* Ancho del espacio */
    /* No es necesario altura, pero si quieres visualizar el espacio durante el desarrollo, puedes añadir una altura temporal */
    /* height: 10px; */
    /* background-color: #f0f; */ /* Color de fondo temporal para visualización */
}

                                    .header .whatsapp-container {
                                        display: flex; /* Para alinear los elementos horizontalmente */
                                        align-items: center; /* Centra los elementos verticalmente */
                                        font-weight: bold; /* Texto del número en negrita */
                                        /*margin-left: 20px; /* Ajusta según la separación deseada entre contenedores */
                                            }



                                    .header .whatsapp-container .phone-number {
                                        /* Otros estilos que puedas necesitar */
                                          font-family: 'dfibra-bold';
	                                       font-size: 25px; 
	                                       font-weight: bold; 
	                                       align-items: center; 
	                                       color: black;
                                            }

/* Estilos para el botón de llamada */
.call-container {
    width: 180px;
    background-color: #FFf; /* Azul para el fondo */
    color: #1df401; /* Texto en color blanco */
    padding: 0px;
    border-radius: 10px;
    text-align: center; /* Centrar el texto */
    display: block; /* Hacer que sea un bloque para ocupar toda la anchura */
     margin:15px 30px 10px 30px;
}
.call-button {
    margin-bottom: 15px;
    width: 180px;
    height: 50px;
    background-color: #ffffff; /* Azul para el fondo */
    color: #FF1272; /* Texto en color blanco */
    padding: 3px;
    border: 1px solid #FF1272; /* Borde del checkbox */
    border-radius: 10px;
    text-align: center; /* Centrar el texto */
    display: block; /* Hacer que sea un bloque para ocupar toda la anchura */
    
}

/* Estilos para el botón de WhatsApp */
.whatsapp-container .whatsapp-button {
    font-family: 'dfibra-regular';
	font-size: 14px; 
    width: 180px;
    height: 50px;
    background-color: #5cb615; /* Verde de WhatsApp para el fondo */
    color: white; /* Texto en color blanco */
    padding:20px;
    border-radius: 10px; /* Esquina superior izquierda sin curva */
    border: 1px solid #5cb615; /* Borde del checkbox */
    text-align: center; /* Centrar el texto */
    display: flex; /* Para alinear el ícono y el texto */
    align-items: center; /* Centrado vertical */
    gap: 8px; /* Espacio entre el ícono y el texto */
    margin:15px 30px 10px 30px;
}

/* Estilos para el ícono de WhatsApp */
.whatsapp-container .whatsapp-icon {
    width: 30px; /* Tamaño del ícono */
    height: 30px; /* Tamaño del ícono */
}

@media only screen and (max-width: 768px){





    .spacer-container1{

    font-size: 9px; 
    text-align: left;
    
}

.header-logo {
    
    height: 28px; /* Altura del logo */

    
}

    .header .logo-container,
    .header .agencia-container,
    .header .spacer-container {
    text-align: center;
    font-size: 12px; 
    width: 700px;
    
    }

    .header .customer-container,
    .header .whatsapp-container {
    flex: 1;
    justify-content: center; /* Centra los elementos dentro del contenedor */
    display: flex; /* Asegúrate de que estos contenedores se muestren */
    }

    .header {
    flex-wrap: wrap; /* Permite a los contenedores envolverse en una nueva línea */
    }

    .header .whatsapp-container .phone-number {
    font-size: 14px; /* Reducir el tamaño de la fuente para dispositivos móviles */
    }

    .header .customer-container .click-here-btn {
    
    width:85px; /* Hace que el botón tenga el ancho de su contenedor padre */
    height: 35px;
    font-size: 10px; /* Ajusta el tamaño de la fuente si es necesario */
    padding:0px;

    }




  
}


/*--- modal ====================================================================0*/

    /* Estilo del Modal */
    .modal {
        display: none; /* Ocultar el modal por defecto */
        position: fixed; /* Mantenerlo fijo en la pantalla */
        z-index: 1000; /* Situarlo encima de otros elementos */
        left: 0;
        top: 0;
        width: 100%; /* Ancho completo */
        height: 100%; /* Altura completa */
        overflow: auto; /* Habilitar desplazamiento si es necesario */
        background-color: rgb(0,0,0); /* Fondo ligeramente oscuro */
        background-color: rgba(0,0,0,0.4); /* Color de fondo con opacidad */
    }
    
    /* Contenido del modal */
    .modal-content {
        background-color: #fff;
        margin: 15% auto; /* 15% desde arriba y centrado horizontalmente */
        padding: 20px;
        border: 4px solid #019DF4; /* Borde naranja */
        width: 300px; /* Ancho fijo */
        height: 300px;
        border-radius: 15px; /* Bordes redondeados */
        position: relative;
    }
    
    .modal-content p {
        font-family: 'movistar-regular';
        font-size: 25px; 
        text-align: center; /* Centra el texto */
        color: #000; /* Color del texto, ajusta según necesites */
    }
    
    .modal-content p .win_at_numero {
        font-family: 'dfibra-bold';
        font-size: 25px; 
        color: black; /* Color naranja para la palabra WIN */
        font-weight: bold;
    }
    /* Botón para cerrar el modal */
    .close {
        color: #aaa; /* Color del botón cerrar */
        float: right; /* Posicionamiento a la derecha */
        font-size: 28px; /* Tamaño del botón cerrar */
        font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
        color: black; /* Cambio de color al pasar el mouse o enfocar */
        text-decoration: none;
        cursor: pointer;
    }

    
/*--- Inicio Botones flotantes de telefono y whatsapp ============================*/
.boton-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: row;
}

.contact-info-container {
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    background-color: white; /* Color de fondo del contenedor */
    align-items: center; /* Alineación vertical */
    margin-right: 5px; /* Añade*/
}

.contact-info {
    width: 160px; 
    padding: 5px 20px; /* Espacio alrededor del texto */
    flex-grow: 1; /* Permite que el texto ocupe el espacio disponible */
}

.contact-text {
    font-family: 'dfibra-regular';
    font-size: 15px;
    color: #434750; 
}

.contact-number {
    font-family: 'dfibra-bold';
    font-size: 19px;
    color: #019DF4; 
}

.icon-background {
    border-radius: 10px;
    background-color: #FF3483; /* Fondo del círculo detrás del ícono */
    padding: 10px; /* Espacio alrededor del ícono */
    display: flex;
}

.contact-icon {
    width: 39px; /* Tamaño del ícono */
    height: auto;
}

.whatsapp-info-container {
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    background-color: #fff; /* Color de fondo del contenedor 00B700*/
    align-items: left; /* Alineación vertical */
    /*margin-left: 5px;*/
}
.whatsapp-info {
    width: 160px; 
    padding: 5px 5px; /* Espacio alrededor del texto */
    flex-grow: 1; /* Permite que el texto ocupe el espacio disponible */
}
.whatsapp-text {
    font-family: 'dfibra-regular';
    font-size: 18px;
    color: #000; 
}

.whatsapp-number {
    font-family: 'dfibra-bold';
    font-size: 22px;
    color: #000; 
}
.whatsapp-icon-background {
    border-radius: 10px;
    background-color: #fff; /* Fondo del círculo detrás del ícono */
    padding: 5px; /* Espacio alrededor del ícono */
    display: flex;
}

.whatsapp-icon {
    align-items: right;
    width: 40px; /* Tamaño del ícono */
    height: auto;
}

@media (max-width: 480px) {
    .boton-flotante {
        flex-direction: row; /* Asegura que los ítems se alineen en una fila */
        justify-content: center; /* Centra los contenedores */
        align-items: center; /* Alineación vertical */
        bottom: 10px;
        right: 10px;
    }

    .contact-info-container,
    .whatsapp-info-container {
        flex-basis: 50%; /* Asigna un 50% del espacio disponible a cada contenedor */
        box-sizing: border-box; /* Asegura que el padding y border se incluyan en el ancho */
    }

    .contact-info-container {
        margin-right: 2.5px; /* Añade un pequeño margen entre los contenedores */
    }

    .whatsapp-info-container {
        margin-left: 2.5px; /* Añade un pequeño margen entre los contenedores */
    }

    /* Ajusta los íconos y el padding si es necesario para que quepan bien en móviles */
    .icon-background,
    .whatsapp-icon-background {
        padding: 8px; /* Reduce el padding para ahorrar espacio */
    }

    .contact-icon,
    .whatsapp-icon {
        width: 30px; /* Reduce el tamaño del ícono si es necesario */
    }

    /* Ajusta el tamaño del texto para que quepa en dispositivos móviles */
    .contact-text,
    .whatsapp-text,
    .contact-number,
    .whatsapp-number {
        font-size: 14px; /* Disminuye el tamaño de la fuente */
    }
}



/*--- Inicio carrusel de imagenes y formulario============================*/

.carousel-container {
  position: relative;
  max-width: 100%;
  height: 600px;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  transition: transform 1s ease-in-out; /* Transición suave para el desplazamiento */
}

.carousel-item {
  flex: 0 0 100%; /* Cada imagen ocupa el 100% del ancho del contenedor */
  height: 600px; /* Altura fija para las imágenes */
  background-size: cover;
  background-position: center;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0,0,0,0.5);
  padding: 10px;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.carousel-half-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Ajusta este valor según necesites */
    height: 95%; /* Altura igual al carrusel */
    /*border: 2px solid #000;  Borde negro */
    box-sizing: border-box; /* Incluye el borde en el cálculo del ancho */
    background-color: transparent; /* Fondo transparente */
    z-index: 1; /* Asegúrate de que no sobrepone elementos importantes */
    /*pointer-events: none; /* Opcional: evita que el contenedor capture clics */
}

.formulario-container-movil {

    display: none; /* Oculta el formulario en dispositivos móviles */
}

.imagen-movil {

    display: none; /* oculto por defecto */
    width: 100%; /* ocupa todo el ancho de la pantalla */
    height: 210px; /* altura fija de 300px */
    background-image: url('../../public/images/fondos/banner_1_slider_movil.jpg'); /* cambia la ruta de la imagen */
    background-size: cover; /* asegura que la imagen cubra completamente el contenedor */
    background-position: center; /* centra la imagen dentro del contenedor */
}

@media (max-width: 768px) {
    .formulario-container {

        display: none; /* Oculta el formulario en dispositivos móviles */
    }

    .whatsapp-container .whatsapp-button{

        
padding: 27px;
        background-color: #5cb615; /* Verde de WhatsApp para el fondo */
  
    
    border-radius: 10px; /* Esquina superior izquierda sin curva */
    
    
    width: 270px;
    height: 50px;
    

  margin: 30px 20px 20px 60px;
 }
/*
.whatsapp-button{



    margin:15px 30px 10px 30px;
        font-size: 14px; 
    
    height: 50px;

  align-items: center;  */
/* display: flex;  *//* Para alinear el ícono y el texto */
 
/* } 
 */


.call-container {
    width: 270px;
   margin: 0px 20px 20px 60px;
}
.call-button {
    margin-bottom: 15px;
    width: 270px;
    height: 50px;
    align-items: center;
    
}



    .formulario-container-movil {

background-color: #fff;
        display: block; /* Cambia 'block' a 'flex' si necesitas un diseño de formulario específico */
        width: 100%; /* Ocupa todo el ancho disponible */
        height: 270px; /* Altura definida */
        background-position: center;
        border: 2px solid #babcbd;
        /* Añade más estilos aquí si es necesario */
    }

    .carousel-container {
        display: none; /* oculta el carrusel en dispositivos móviles */
    }
    .imagen-movil {

        display: block; /* muestra el contenedor de la imagen en móviles */
    }
}