/* 2B3658 AzulResumen */
/* F5F0EA BlancoFondo */
/* #111B21 verde interesante WSP */

.distancia-duracion  {
    background-color: #111b21ec;
    display:flex ;
    justify-content: center; /* Espaciado entre los cuadros */
    align-items: center; /* Alineación vertical */
    margin: 0px 0; /* Espacio arriba y abajo */
}
.distancia-duracion, p{
    text-decoration:solid;
    font-family: Arial, sans-serif;
    color: #ffffff;
    font-size: 1.3em; /* Puedes ajustar el valor según tus preferencias */
}


.form-section {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.form-section.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.button-container {
    text-align: center;
    margin-top: 50px;
}


html {
    scroll-behavior: smooth; /* Hace que el desplazamiento sea suave */
}
  

h1 {
    font-size: 2.5em; /* Puedes ajustar el valor según tus preferencias */
}

/* Titulo "Selecciona los muebles de tu hogar:" */
.titulo, .h1{
    color: #3f525b;
    margin-top: 40px;
}



.subtitulo {
    color: #3f525b;
    font-size: 0.8em;  /* Cambia el tamaño según tus necesidades */
}

h2{
    color: #ffffff;
}

ul{
    color: #ffffff;
}

body {


    font-family: Arial, sans-serif;
    margin: 0px;
    background-color: #F5F0EA;
    position: relative;
    
}

/* --------------------------------Página de INICIO----------------------------------------- */

/* Estilos para la página de inicio */
section {
    height: 100vh; /* 100% de la altura de la ventana */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

#bienvenida{
    display: flex;
    align-items: first center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 100vh;
    color: rgb(255, 255, 255);
    background-image: linear-gradient(
        0deg,rgba(251, 0, 255, 0.153),rgba(142, 114, 255, 0.461)), url("imagenes/mudanza3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right 50% ;
}

button{
    cursor: pointer;
    font-size: 1.1em;
    padding: 10px 30px;
    border-radius: 10px;

}

button:hover{
    background-color: #1640bf1d;

}

/* -----------------------------------------Página de INICIO------FIN------------------------------- */

.seccion {

    display: flex;  /* Las imagenes principales Horizontales */
    padding: 1px;
}



/* Estilos para la clase "opcion" Las secciones principales del hogar */
.opcion {
    background-color: #F5F0EA;
    width: 100px;  /* Ancho del recuadro */
    height: 160px; /* Altura del recuadro */
    margin: 50px;  /* Margen entre opciones, ajusta según sea necesario */
    border-radius: 5px;
    border: 0.1px solid #0c1410;  /* Borde para resaltar la opción */
    padding: 10px; /* Espaciado interno */
    cursor: pointer;  /* Cambiar el cursor al pasar sobre la opción */
    box-sizing: border-box;  /* Incluir el borde en el tamaño total */
    position: relative; /* Posición relativa para alinear el contenido interno */
    overflow: hidden; /* Oculta el contenido que se desborda del recuadro */
    transition: transform 0.2s ease-in-out;
}

/* Estilos para la imagen dentro de la clase "opcion" Las secciones principales del hogar  */
.opcion img {
    width: 80%;  /* La imagen ocupa el 100% del ancho del recuadro */
    height: 80%; /* La imagen ocupa el 100% de la altura del recuadro */
    object-fit: contain; /* Ajusta la imagen para que quepa completamente dentro del contenedor sin recortarla */
    position: absolute; /* Posición absoluta para posicionar la imagen dentro del recuadro */
    top: 70%; /* Alinea la parte superior de la imagen al 50% del recuadro */
    left: 50%; /* Alinea la parte izquierda de la imagen al 50% del recuadro */
    transform: translate(-50%, -50%); /* Centra la imagen utilizando transformaciones */
    opacity: 0.95; /* Ajusta el nivel de opacidad según tus preferencias */
    transition: opacity 0.3s ease; /* Agregamos una transición suave */
}

/* Estilo especifico para la sección "Cocina" */
.imagen-cocina, .imagen-oficina, .imagen-patio  {
    width: 65px !important; /* ajusta según tus necesidades */
    height: auto; /* Esto mantiene la proporción original de la imagen */
}

/* Estilos para el texto dentro de la clase "opcion" */
.opcion h2 {
    color: #3f525b;
    font-size: 16px; /* Tamaño del texto */
    margin: 0; /* Elimina el margen predeterminado del encabezado */
    position: absolute; /* Posición absoluta para posicionar el texto dentro del recuadro */
    top: 10px; /* Alinea la parte superior del texto a 10px desde la parte superior del recuadro */
    left: 50%; /* Alinea el centro del texto al 50% del recuadro */
    transform: translateX(-50%); /* Centra el texto horizontalmente utilizando transformaciones */
    opacity: 0.9; /* Opacidad del texto antes de ser seleccionado */
}

/* Estilos adicionales cuando la opción está seleccionada y el texto tiene opacidad completa */
.opcion.seleccionado h2 {
    opacity: 1; /* Opacidad completa cuando está seleccionado */
    color: #ffffff;
}

/* Estilos para la opción principal seleccionada */
.opcion.seleccionado {
    background-color: #111B21;
    border-color: #2f3e6b;
    box-shadow: 5px 5px 30px rgba(148, 51, 252, 0.257);

}

/*Estilos para el .PNG de las opciones principales cuando está seleccionado */
.opcion.seleccionado img {
    opacity: 1;
    filter: brightness(0.9) saturate(150%) hue-rotate(270deg);
}

/*Estilos cuado se pasa el mouse sobre una de las opciones principales*/
.opcion:hover {
    border-color: #111B21;
    box-shadow: 5px 5px 30px rgba(148, 51, 252, 0.257);
    transform: scale(1.2); /* Efecto de escala al pasar el ratón sobre la imagen */

}

/* --------///-------/----------Estilos de Imagenes desplegadas: INICIO-------/----------///---------------- */

#eligeElementos{
    position: relative;
    margin-left:  150px; /* Puedes ajustar el valor del margen según tus necesidades */
    margin-right:  150px; /* Puedes ajustar el valor del margen según tus necesidades */
}

.imagen-container {
    cursor: pointer;
}

/*Estilos de las imagenes desplegadas de las principales IMPORTATE */
.contenedor-objeto img {
    width: 80%;  /* La imagen ocupa el 100% del ancho del recuadro */
    height: 80%; /* La imagen ocupa el 100% de la altura del recuadro */
    object-fit: contain; /* Ajusta la imagen para que quepa completamente dentro del contenedor sin recortarla */
    position: absolute; /* Posición absoluta para posicionar la imagen dentro del recuadro */
    top: 75%; /* Alinea la parte superior de la imagen al 50% del recuadro */
    left: 50%; /* Alinea la parte izquierda de la imagen al 50% del recuadro */
    transform: translate(-50%, -50%); /* Centra la imagen utilizando transformaciones */
    transition: transform 0.5s ease-in-out;

}

/*Posicionamiento de imagenes desplegadas y contadores*/
.contenedor-objeto { 
    /*background-color: rgba(255, 255, 255, 0.198);*/ /* Fondo con transparencia (ajusta el último valor según sea necesario) */
    position: relative;
    display: inline-flex;  /* Las imagenes principales Horizontales */
    width: 45px;  /* Ancho del recuadro */
    height: 100px; /* Altura del recuadro */
    margin: 10px;  /* Margen entre opciones, ajusta según sea necesario */
    border-radius: 5px;
    border: 0.1px solid #111B21;  /* Borde para resaltar la opción */
    padding: 8px; /* Espaciado interno */
    cursor: pointer;  /* Cambiar el cursor al pasar sobre la opción */
    overflow: hidden; /* Oculta el contenido que se desborda del recuadro */
    transition: background-color 0.8s; /* Agrega una transición para suavizar el cambio de color */
    transition: transform 0.5s ease-in-out; /* tiempo que toma en volver a posición inicial */
}

.imagen-container::before {
    content: ''; /* Pseudo-elemento para la capa de fondo */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Color de fondo inicial */
    transition: background-color 0.8s ease; /* Transición de color de fondo */
}

/* Estilo cuando el checkbox está marcado */
input[type="checkbox"]:checked + .imagen-container::before {
    background-color: #111B21; /* Color de fondo cuando está seleccionado */
    z-index: -1; /* Asegura que esté sobre otros elementos estaa dejar en -1*/ 
}

/* Estilo del checkbox */
input[type="checkbox"] {
    position: absolute;
    opacity: 0; /* Hacer el checkbox invisible */
}

/* Selecciona el contenedor-objeto y aplica estilos cuando el mouse está sobre él */
.contenedor-objeto:hover {
    border: 0.1px solid #00047178; /* Cambia el borde al pasar el mouse */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transform: scale(1.5); /* Aplica un efecto de escala al pasar el mouse */
    transition: transform 0.3s; /* Agrega una transición suave */
    background-color: transparent; /* Oculta el fondo */

}




/* --------///-------/----------Estilos de Imagenes desplegadas: FIN-------/----------///---------------- */

.contenedor-objeto .contador {
    position: absolute;
    left: 16%; /* Alinea la parte izquierda de la imagen al 50% del recuadro */
    bottom: 89px;
    display: flex;
    flex-direction: column;
    width: 40px; /* Ajusta el ancho del contador según tus necesidades */
    margin-top: 1px;
    z-index: 1; /* Añadir esta línea para que el contador esté por encima */
    font-size: 5px; /* Ajusta el tamaño del texto del contador según tus necesidades */
}

/* Estilo del contador */
.contenedor-objeto .contador {
    border-radius: 1px;

}

/* Estilo del número dentro del contador */
.contenedor-objeto .contador input {
    background-color: #1a9ed779; /* Cambia este valor al color que desees para el fondo del número */
    color: #fff; /* Cambia este valor al color que desees para el texto del número */
    border: none; /* Elimina el borde del número */
    border-radius: 1px; /* Añade esquinas redondeadas al número */
    padding: 10px; /* Ajusta el espaciado dentro del número */
    font-size: 10px; /* Ajusta el tamaño del texto del contador según tus necesidades */
}

/* Estilo del contador cuando el mouse está sobre él */
.contenedor-objeto:hover .contador {
    background-color: transparent; /* Oculta el fondo */ /* Cambia este valor al color que desees cuando el mouse está sobre el contador */
}

#resumen, #resultado, #resultado2, #resumendate, #nombrecleinte, #embalajeresumen, #direcciones, #duracion { 
    display: none;
    margin-left: 10px; 
    margin-top: 5px;
    font-size: 25px; /* Ajusta el tamaño del texto según tus preferencias */
    background-color: #111B21; /* Cambia el color de fondo según tus preferencias */
    padding: 40px; /* Añade relleno para darle espacio al contenido */
    color: #ffffff; /* Cambia el color del texto para que sea legible en el fondo */
}


/* -------------------------texto dentro de recuadros------------------------------------------------ */
  
.texto-desvaneciente {
    display: none;
    position:absolute;
    top: 41%; /* Ajusta según tus necesidades */
    left: 50%; /* Ajusta según tus necesidades */
    transform: translate(-50%, -50%);
    padding: 2px;
    z-index: -1; /* Asegura que esté sobre otros elementos */
    font-size: 12px; /* Ajusta el tamaño del texto según tus necesidades */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Cambia la fuente según tus preferencias */
    font-weight: bold; /* Puedes ajustar la negrita según tus preferencias */
    color: #697dc0; /* Cambia el color del texto según tus preferencias */
    text-align: center; /* Ajusta la alineación del texto según tus necesidades */
}

#step3 .button-container {
    margin-top: 45px;
    padding-bottom: 50px;
}


/* -----------------------------------------OK----------------------------------------------------------- */

/*-----------------------👇--------Caja animación---------------INICIO------👇----------------------------------------*/




body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F0EA;
}
  
.rebotandocontainer1 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: -1;
}
  
.box {
    top: 100%; /* ajusta la posición vertical */
    width: 100px;
    height: 100px;
    position: absolute;
    animation: box 20s infinite linear, /* Animación de traslación */
               rotateBox 5s infinite linear; /* Animación de rotación */
}

.hervidor {
    top: 0%; /* ajusta la posición vertical */
    width: 100px;
    height: 100px;
    position: absolute;
    animation: hervidor 20s infinite linear, /* Animación de traslación */
               rotateBox 10s infinite linear; /* Animación de rotación */
}

.lavadora {
    top: 100%; /* ajusta la posición vertical */
    width: 100px;
    height: 100px;
    position: absolute;
    animation: lavadora 15s infinite linear, /* Animación de traslación */
               rotateBox 5s infinite linear; /* Animación de rotación */
}

.teclado {
    top: 100%; /* ajusta la posición vertical */
    width: 100px;
    height: 100px;
    position: absolute;
    animation: teclado 15s infinite linear, /* Animación de traslación */
               rotateBox 5s infinite linear; /* Animación de rotación */
}

@keyframes box {
    0% {
        left: 30%;
        top: -20%;
        transform: rotate(0);
    }
    100% {
        left: 50%;
        top: 100%; /* Vuelve a la parte superior */
        transform: rotate(360deg);
    }
}

@keyframes hervidor {
    0% {
        left: 60%;
        top: -35%;
        transform: rotate(0deg);
    }

    100% {
        left: 50%;
        top: 100%; /* Vuelve a la parte superior */
        transform: rotate(360deg);
    }  
}






    

/*----------------------👆---------Caja animación---------------FIN----------👆------------------------------------*/


/*-----------------------👇--------Estilos Calendario---------------INICIO------👇----------------------------------------*/

.form-container h1{
    
    font-size: 25px; /* Ajusta el tamaño de la fuente según sea necesario */
}

.hand {
    position: absolute;
    margin-top: 130px; /* Valor actual del eje Y */
    margin-left: 350px; /* Nuevo valor del eje X */
    width: 40px;
    height: 40px;
    animation: handAnimation 2s ease-in-out infinite alternate;
}

@keyframes handAnimation {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(50px);
    }
}

.calendar .titulo {
    margin-top: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para la sección de calendario */
.calendar{

    margin-top: 20px;
    height: 200px ;
}

/* Ajusta el recuadro que rodea las fechas */
#datepicker,
#monthpicker,
#yearpicker {
  background-color: #111B21;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px; /* Agrega un margen de 10px entre los recuadros */
  border: 1px solid #4f4b4b;
  border-radius: 20px;
  width: 120px; /* Ajusta el ancho del recuadro según sea necesario */
  height: 85px; 
  font-size: 22px; /* Ajusta el tamaño de la fuente según sea necesario */
  color: #F5F0EA;
  /*background: linear-gradient(to bottom, rgba(106, 103, 103, 0.125), rgba(77, 72, 72, 0.05), transparent 50%, rgba(71, 66, 66, 0.05), rgba(106, 103, 103, 0.125)); /* Aplica un degradado lineal */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Agrega una sombra */
}


/* Estilo para los contenedores de fecha, mes y año */
#picker_containerdate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
}

/* No se muestran los botones */
.buttone,
.buttone.bdown {
    display: none !important;
}

/*----------------------👆---------Estilos Calendario---------------FIN----------👆------------------------------------*/


/*----------------------👇-------Estilos de Nombre de usuario------INICIO-------👇----------------*/

.usuario .titulo{
    margin-top: -40px;
}

.usuario .titulo h1{
    color: #F5F0EA  !important;
    font-size: 1.3em;
}

.usuario {

    background-color: #111B21;
    position: relative; /* Cambia el tipo de posición */
    top: 1px; /* Mueve la sección hacia abajo */
    height: 20vh; /* altura de la ventana */
    border: 1px solid #4f4b4b;
    border-radius: 20px; /* Esquinas redondeadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Agrega una sombra */
    padding: 20px; /* Espaciado interno */
    margin: 1px auto; /* Margen para centrar */
    max-width: 350px; /* Ancho máximo */
}
  
.usuario input[type="text"] {
    background-color: #F5F0EA;
    margin-top: 10px; /* Agrega un margen inferior para separar esta sección de otras */
    width: 75%; /* Opcional: Hace que el campo de entrada ocupe todo el ancho de su contenedor */
    padding: 10px; /* Agrega relleno alrededor del campo de entrada */
    font-size: 15px; /* Tamaño de fuente */
    border: 1px solid #4b4d4f;
    border-radius: 5px; /* Agrega esquinas redondeadas al campo de entrada */
}

#nombreUsuario, #lugarInicio, #lugarDestino {
    color: #71009a; /* Cambia el color del texto */
}


.usuario input[type="text"]:focus {

    border: 3px solid;
    outline: none; /* Elimina el contorno predeterminado al enfocar el campo de entrada */
    border-color: #ffbb00; /* Cambia el color del borde al enfocar el campo de entrada */
}


/*---------------------👆--------Estilos de Nombre de usuario------FIN---👆----------------*/


/*----------------------👇-------Estilos de Embalaje------INICIO-------👇----------------*/

.embalaje .titulo{
    margin-top: -40px;
}

.embalaje {
    background-color: #f5f0ea00;
    height: 20vh; /* altura de la ventana */
    padding: 20px;
    margin-top: 5px;
    text-align: center;
}

.opciones button {
    margin-top: 10px;
    width: 172px; /* Ajusta el ancho del botón según tus preferencias */
    padding: 10px 20px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid; /* Agrega un borde delgado */
}
  
.opcion-si {
    background-color: #F5F0EA;
    color: #111B21;

}

.opcion-no {
    background-color: #F5F0EA;
    color: #111B21;
}
  
.opciones button.selected {
    background-color: #111B21;
}
  
.opciones button.selected {
    color: #F5F0EA; /* Cambia el color del texto del botón seleccionado */
}

#step1 .button-container {

    margin-top: 6px; /* Ajusta el valor según sea necesario */
}

/*----------------------👆-------Estilos de Embalaje------FIN-------👆----------------*/      




/*----------------------👇-------Estilos de Tipo de MAPA------INICIO-------👇----------------*/



#step2extra .button-container {
    position: sticky;     /* Fija la posición de los botones */
    margin-top: 550px !important;           /* Fija los botones a 20px del borde inferior */

}





/*----------------------👆-------Estilos de Tipo de inmueble------FIN-------👆----------------*/  




  




/*----------------------👇--------Botones anterior siguiente ------INICIO------👇----------------*/

.button-container button.previous {
    margin-right: 5px; /* Ajusta el margen derecho del botón "Anterior" */
}

.button-container button.next {
    margin-left: 5px; /* Ajusta el margen izquierdo del botón "Siguiente" */
}


.next, .previous{
    text-align: center; /* Centrar el texto horizontalmente */
    width: 170px;
    background-color: rgb(255, 238, 0);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); /* Agregar sombra a todos los bordes */
    display: inline-block;
    font-weight: bold; /* Hacer que el texto sea negrita */
    padding: 10px 10px;
    color: #111B21;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;

}

.next:hover {
    background-color: #ffe600; /* Cambia el color de fondo al pasar el mouse */
}


.previous:hover, .next:hover {
    background-color: #fff700; /* Cambia el color de fondo al pasar el mouse */
}
  
.boton-next:active {
    background-color: #b8aa25;
}

/*---------------------👆-------Botón de davegar------FIN---------------------------👆--------------*/   



/*---------------------👇--------Estilos de Slider de distancia------INICIO---------👇--------------*/
    
/* Estilos para la SECCIÓN de distancia */    
.distancia{
    margin-top: 5px;
    height: 10vh ;
    text-align: center; /* Centra el contenido del elemento */

}

/*Titulo "Distancia aproximada"*/
#numberDisplay {
    font-size: 40px;
    margin-bottom: 20px;
    margin-top: 10px;
    text-align: center;
}

/*Estilo del slider*/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 90%;
    height: 2px; /* Ajusta el grosor de la línea del slider */
    background: #d3d3d3;
    outline: none;
    border-radius: 10px;
    margin: 15px 0;
    transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #293865;
    cursor: pointer;
}

/* centra el slider que se encuentra en el contenedor "titulo" */
.titulo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*------------------------👆-------Estilos Slider de distancia------FIN--------------👆--------------------------------*/



/*---------------------👇--------Estilos de Direcciones------INICIO---👇----------------*/

    .direcciones .titulo h1 {
        color: #F5F0EA;
        margin-top: -60px; /* Ajusta el valor según lo que necesites */
        margin-bottom: 1px; /* Ajusta el espaciado debajo del título */

        font-size: 1.1em;
    }

    .direcciones {
        background-color: #111B21;
        margin-top: 60px !important;/* posicion vertical del recuadro */
        height: 100px; /* altura de la ventana */
        border: 1px solid #ccc; /* Borde para el recuadro */
        border-radius: 10px; /* Esquinas redondeadas */
        padding: 20px; /* Espaciado interno */
        margin: 20px auto; /* Margen para centrar */
        max-width: 320px; /* Ancho máximo */
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Agregar sombra a todos los bordes */
    }

    .direcciones input[type="text"] {
        background-color: #F5F0EA;
        margin-top: 10px; /* Agrega un margen inferior para separar esta sección de otras */
        width: 90%; /* Opcional: Hace que el campo de entrada ocupe todo el ancho de su contenedor */
        padding: 10px; /* Agrega relleno alrededor del campo de entrada */
        font-size: 15px; /* Tamaño de fuente */
        border: 1px solid #ccc; /* Agrega un borde alrededor del campo de entrada */
        border-radius: 5px; /* Agrega esquinas redondeadas al campo de entrada */
    }

    .direcciones input[type="text"]:focus {
        outline: none; /* Elimina el contorno predeterminado al enfocar el campo de entrada */
        border-color: #dfd000; /* Cambia el color del borde al enfocar el campo de entrada */
    }
    
    #step2 .button-container {
        margin-top: 50px; /* Ajusta el valor según sea necesario */
    }

    #step1extra .button-container  {
        margin-top: 50px; /* Ajusta el valor según sea necesario */
    }
    
    
    /*---------------------👇--------Estilos de MAPA------INICIO---👇----------------*/




    /*---------------------👇--------Estilos de lista desplegable GOOGLE API------INICIO---👇----------------*/

    /* Estilo del contenedor principal de la lista desplegable */
    .pac-container {
        margin-top: 3px; /* Ajusta el valor según el espacio que necesites */
        background-color: #F5F0EA; /* Fondo oscuro */
        border-radius: 3px; /* Bordes redondeados */
        border: 1px solid #4f6f95; /* Borde azul */
        color: white; /* Texto blanco */
        font-family: Arial, sans-serif; /* Fuente personalizada */
    }
    
    /* Estilo de cada elemento en la lista desplegable */
    .pac-item {
        padding: 10px;
        border-bottom: 1px solid #F5F0EA; /* Línea separadora */
        background-color: #F5F0EA; /* Mantiene el fondo oscuro */
        color: rgb(19, 15, 15); /* Texto color */
        transition: background-color 200ms ease; /* Transición suave */
    }
    
    /* Estilo cuando se pasa el cursor por encima de cada opción */
    .pac-item:hover {
        background-color: #111B21; /* Fondo azul al hover */
        color: white;
    }
    
    .pac-item-query {
        color: #111B21;
        font-weight: bold; /* Resalta la parte de la búsqueda que coincide */
    }
    
        /* Cambiar el color a blanco cuando se hace hover sobre la opción */
        .pac-item:hover .pac-item-query {
            color: white;
        }

    /* Opcional: Ajuste para pantallas pequeñas */
    @media (max-width: 600px) {
        .pac-container {
        font-size: 14px; /* Fuente más pequeña para móviles */
        }
    }



/*------------------------👆-------Estilos de Direcciones------FIN--------------👆--------------------------------*/


/* Estilo del resumen */
.resumen{
    margin-bottom: 0; /* Elimina cualquier margen inferior */
    width: 100vw; /* Ocupa el 100% del ancho de la pantalla */
    height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
    margin-bottom: 0; /* Elimina el margen inferior */
    margin-top: 0px;
    background-color: #111B21;
}

.Textofinal {
    margin-top: 3px;
    text-align: center; /* Centra el contenido horizontalmente */
}

#step4 .button-container {
    margin-top: 240px; /* Ajusta el valor según sea necesario */
}


/* -------------------------Test nombreusuario------------------------------------------------ */

/*---------------------👇-------Ingreso Teléfono------INICIO---------------------------👇--------------*/

.ingresotelefono {
    margin-bottom: 200px;
}

.ingresotelefono input[type="tel"] {
    height: 12px;
    background-color: #F5F0EA;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #000000;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease-in-out;
    width: 190px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ingresotelefono input[type="tel"]:focus {
    border-color: #008CBA;
}

/*---------------------👆-------Ingreso Teléfono------FIN---------------------------👆-----------------*/    



/*---------------------👇-------enviarWhatsApp------INICIO---------------------------👇--------------*/ 

.enviowsp button {
    top: 50px; /* Ajusta esta cantidad según sea necesario */
    background-color: rgba(0, 229, 107, 0.787);
    color: #111B21; /* Cambia el color del texto */
    position: relative;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold; /* Puedes ajustar la negrita según tus preferencias */
    width: 220px;
    height: 38px;
}

#enviarWhatsApp:hover {
    background-color: rgba(0, 229, 46, 0.787);
}

/*---------------------👆-------enviarWhatsApp------FIN---------------------------👆-----------------*/




/*---------------------👇-------Selector paises------INICIO---------------------------👇-----------------*/

:root {
    --primary: #0048b529;
}	

.select-box {
    position: relative;
    width: 20rem;
    margin-top: -25px;
}

.select-box input {
    height: 8px;
    width: 89%;
    padding: 1rem .6rem;
    font-size: 1rem;
    border: .1rem solid transparent;
    outline: none;
}

input[type="tel"] {
    border-radius: 0 .5rem .5rem 0;
}

.select-box input:focus {
    border: .1rem solid var(--primary);
}

.selected-option {

    background-color: #eee;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iconify {
    margin-left: 4px; /* Ajusta la posición horizontal de la bandera hacia la izquierda */
}

.selected-option div{
    position: relative;
    width: 5rem;
    padding: 0 2.5rem 0 .5rem;
    text-align: center;
    cursor: pointer;
}

/* Ajusta la posición de la fecha */
.selected-option div::after{
    position: absolute;
    content: "";
    right: .8rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: .8rem;
    height: .8rem;
    border-right: .12rem solid var(--primary);
    border-bottom: .12rem solid var(--primary);
    transition: .2s;
}

.selected-option div.active::after{
    transform: translateY(-50%) rotate(225deg);
}

.selected-option div strong {
    display: none; /* oculta el numero en el selector */
}


/* listado desplegable */
.select-box .options {
    z-index: 1000; /* Valor alto para asegurarse de que esté por encima de otros elementos */
    position: absolute;
    top: 4rem;
    width: 100%;
    background-color: #F5F0EA;
    border-radius: .5rem;
    display: none;
}

.select-box .options.active {
    display: block;
}

.select-box .options::before {
    position: absolute;
    content: "";
    left: 1rem;
    top: -1.2rem;

    width: -0;
    height: 0;
    border: .6rem solid transparent;
    border-bottom-color: var(--primary);
}


input.search-box {
    background-color: var(--primary);
    color: #F5F0EA;
    border-radius: .5rem .5rem 0 0;
    padding: 1.0rem 1rem;
}

.select-box ol {
    list-style: none;
    max-height: 17rem;
    overflow: overlay;
}

.select-box ol::-webkit-scrollbar {
    width: .6rem;
}

.select-box ol::-webkit-scrollbar-thumb {
    width: .4rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: .4rem;
}

.select-box ol li {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.select-box ol li.hide {
    display: none;
}

.select-box ol li:not(:last-child) {
    border-bottom: .1rem solid #dfdfdf;
    margin-left: -40px;/* Posición horizontal de las banderas y texto país */
}

.select-box ol li:hover {
    background-color: rgba(27, 67, 178, 0.243);
}

.select-box ol li .country-name {
    margin-left: 1.0rem;
}



/* Media query para dispositivos con pantalla de hasta 414px de ancho (iPhone XR) */
@media only screen and (max-width: 415px), only screen and (max-width: 428px), only screen and (max-width: 375px)  {

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden; /* Evitar el scroll */
    }

    /* NO SCROLEAR */
    #step3 {
        flex: 1; /* Permitir que esta sección ocupe el espacio restante */
        overflow-y: auto !important; /* Habilitar el scroll vertical */
        padding: 20px; /* Espaciado adicional si es necesario */
        box-sizing: border-box; /* Para incluir el padding */
    }

    h1 {
        font-size: 2.5em !important; /* Puedes ajustar el valor según tus preferencias */
    }


    /*-----------------------👇--------Estilos Calendario---------------INICIO------👇----------------------------------------*/

    .hand {
        position: absolute;
        margin-top: 270px; /* Valor actual del eje Y */
        margin-left: 5px; /* Nuevo valor del eje X */
        width: 40px;
        height: 40px;
        animation: handAnimation 2s ease-in-out infinite alternate;
    }
      
    @keyframes handAnimation {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(20px);
        }
    }


    .calendar .titulo {
        margin-top: -70px;
        position: center; /* Establece la posición absoluta */

    }

    /* Estilos para la sección de calendario */
    .calendar{
        margin-top: 20px;
        height: 200px ;
    }

    /*.glass {
        height: 100%;
        background-color: #d3cfca;
        border-radius: 10px;
    }*/


    /* Ajusta el recuadro que rodea las fechas */
    #datepicker,
    #monthpicker,
    #yearpicker {
      background-color: #111B21;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 8px; /* Agrega un margen de 10px entre los recuadros */
      border: 1px solid #4f4b4b;
      border-radius: 20px;
      width: 100px; /* Ajusta el ancho del recuadro según sea necesario */
      height: 85px; 
      font-size: 19px; /* Ajusta el tamaño de la fuente según sea necesario */
      color: #F5F0EA;
      /*background: linear-gradient(to bottom, rgba(106, 103, 103, 0.125), rgba(77, 72, 72, 0.05), transparent 50%, rgba(71, 66, 66, 0.05), rgba(106, 103, 103, 0.125)); /* Aplica un degradado lineal */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Agrega una sombra */
    }


    /* Estilo para los contenedores de fecha, mes y año */
    #picker_containerdate {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

    /* No se muestran los botones */
    .buttone,
    .buttone.bdown {
        display: none !important;
    }

    /*----------------------👆---------Estilos Calendario---------------FIN----------👆------------------------------------*/




    /*----------------------👇-------Estilos de Nombre de usuario------INICIO-------👇----------------*/
    
    .usuario .titulo{
        margin-top: -20px;
    }

    .usuario {
        background-color: #111B21;
        height: 20vh; /* altura de la ventana */
        border: 1px solid #ccc; /* Borde para el recuadro */
        border-radius: 10px; /* Esquinas redondeadas */
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Agregar sombra a todos los bordes */
        padding: 20px; /* Espaciado interno */
        margin: 1px auto; /* Margen para centrar */
        max-width: 330px; /* Ancho máximo */
      }
      
      .usuario input[type="text"] {
        background-color: #F5F0EA;
        margin-top: 10px; /* Agrega un margen inferior para separar esta sección de otras */
        width: 90%; /* Opcional: Hace que el campo de entrada ocupe todo el ancho de su contenedor */
        padding: 10px; /* Agrega relleno alrededor del campo de entrada */
        font-size: 15px; /* Tamaño de fuente */
        border: 1px solid #ccc; /* Agrega un borde alrededor del campo de entrada */
        border-radius: 5px; /* Agrega esquinas redondeadas al campo de entrada */
      }
      
      .usuario input[type="text"]:focus {
        outline: none; /* Elimina el contorno predeterminado al enfocar el campo de entrada */
        border-color: #ffbb00; /* Cambia el color del borde al enfocar el campo de entrada */
    }
    
    .usuario input[type="text"] {
        font-size: 15px; /* Tamaño de fuente normal */
    }
    
    .usuario input[type="text"]:focus {
        font-size: 15px; /* Mantener el mismo tamaño de fuente al enfocar */
    }
    /*---------------------👆--------Estilos de Nombre de usuario------FIN---👆----------------*/


    /*----------------------👇-------Estilos de Embalaje------INICIO-------👇----------------*/

    .embalaje .titulo{
        margin-top: -40px;
    }

    .embalaje {
        background-color: #f5f0ea00;
        height: 20vh; /* altura de la ventana */
        padding: 20px;
        margin-top: 5px;
        text-align: center;
    }
   
    .opciones button {
        margin-top: 10px;
        width: 172px; /* Ajusta el ancho del botón según tus preferencias */
        padding: 10px 20px;
        margin-right: 10px;
        cursor: pointer;
        border: 1px solid; /* Agrega un borde delgado */
    }
      
    .opcion-si {
        background-color: #F5F0EA;
        color: #111B21;

    }

    .opcion-no {
        background-color: #F5F0EA;
        color: #111B21;
    }
      
    .opciones button.selected {
        background-color: #111B21;
    }
      
    .opciones button.selected {
        color: #F5F0EA; /* Cambia el color del texto del botón seleccionado */
    }

    #step1 .button-container {
        margin-top: 6px; /* Ajusta el valor según sea necesario */
    }

    /*----------------------👆-------Estilos de Embalaje------FIN-------👆----------------*/      


    /*----------------------👇--------Botón de davegar------INICIO------👇----------------*/


    .step1extra .button-container{
        background-color: #000000 !important;
    }
       
    .next:hover {
        background-color: #ffe600; /* Cambia el color de fondo al pasar el mouse */
    }


    .previous:hover, .next:hover {
        background-color: #fff700; /* Cambia el color de fondo al pasar el mouse */
    }
      
    .boton-next:active {
        background-color: #b8aa25;
    }

    /*---------------------👆-------Botón de davegar------FIN---------------------------👆--------------*/   


    /*---------------------👇--------Estilos de Slider de distancia------INICIO---------👇--------------*/
    

    /* Estilos para la SECCIÓN de distancia */    
    .distancia{
        margin-top: 5px;
        height: 30vh ;
        text-align: center; /* Centra el contenido del elemento */

    }
    


    /*Titulo "Indica la distancia"*/
    #numberDisplay {
        font-size: 40px;
        margin-bottom: 20px;
        margin-top: 20px;
        text-align: center;

    }

    /*Estilo del slider*/
    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 2px; /* Ajusta el grosor de la línea del slider */
        background: #d3d3d3;
        outline: none;
        border-radius: 10px;
        margin: 15px 0;
        transition: background 0.2s;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #293865;
        cursor: pointer;
    }

    /* centra el slider que se encuentra en el contenedor "titulo" */
    .titulo{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /*------------------------👆-------Estilos Slider de distancia------FIN--------------👆--------------------------------*/



    /*---------------------👇--------Estilos de Direcciones------INICIO---👇----------------*/

    #distancia .titulo {
        position: absolute;
        top: -10px; /* Ajusta la distancia desde la parte superior */
    }

    .direcciones .titulo h1 {

        color: #F5F0EA;
        margin-bottom: -30px; /* Ajusta el espaciado debajo del título */
    }


    .direcciones {
        margin-top: -130px !important;
        background-color: #111B21;
        height: 65px; /* altura de la ventana */
        padding: 20px; /* Espaciado interno */
        margin: 1px auto; /* Margen para centrar */
        max-width: 320px; /* Ancho máximo */
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Agregar sombra a todos los bordes */
    }

    .direcciones input[type="text"] {
        background-color: #F5F0EA;
        margin-top: 10px; /* Agrega un margen inferior para separar esta sección de otras */
        height: 8px;
        width: 90%; /* Opcional: Hace que el campo de entrada ocupe todo el ancho de su contenedor */
        padding: 10px; /* Agrega relleno alrededor del campo de entrada */
        font-size: 15px; /* Tamaño de fuente */
        border: 1px solid #ccc; /* Agrega un borde alrededor del campo de entrada */
        border-radius: 5px; /* Agrega esquinas redondeadas al campo de entrada */
    }
      
    .direcciones input[type="text"]:focus {
        outline: none; /* Elimina el contorno predeterminado al enfocar el campo de entrada */
        border-color: #ffbb00; /* Cambia el color del borde al enfocar el campo de entrada */
    }

    #step1{
        height: 100vh !important;
    }

    #step1extra .button-container,
    #step2 .button-container  {
        margin-top: 190px; /* Ajusta el valor según sea necesario */
    }
    

    /*------------------------👆-------Estilos de Direcciones------FIN--------------👆--------------------------------*/


    /*----------------------👇--------Botón de davegar2------INICIO------👇----------------*/

    
    .navergar2{
        height: 25vh; /* altura de la ventana */
    }

    .navergar2 .boton-navegar {
        margin-top: -110px;
        text-align: center; /* Centrar el texto horizontalmente */
        width: 320px;
        background-color: rgba(224, 209, 0, 0.629);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Agregar sombra a todos los bordes */
        display: inline-block;
        font-weight: bold; /* Hacer que el texto sea negrita */
        padding: 10px 20px;
        color: #111B21;
        text-decoration: none;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .boton-navegar:hover {
        background-color: rgb(229, 214, 0);
    }
      
    .boton-navegar:active {
        background-color: #b8aa25;
    }

    /*---------------------👆-------Botón de davegar2------FIN---------------------------👆--------------*/   

    /*---------------------👇-------MAPA------INICIO---------------------------👇--------------*/  

    .distancia-duracion, p{

        font-size: 1.1em; /* Puedes ajustar el valor según tus preferencias */
    }


    /*---------------------👇-------6 cuadros principales------INICIO---------------------------👇--------------*/  

    .seicuadros #titulo{
        text-align: center; /* Centra horizontalmente el texto dentro del contenedor */
    }

    /* Estilos para la página de inicio, 6 cuadros principales */
    .seiscuadros {

        margin-top: 5px;
        height: 100vh; /* altura de la ventana */
        justify-content: flex-start;
    }

    /* Titulo "Selecciona los muebles de tu hogar:" */
    .titulo, .h1{
        margin-top: 10px;
        margin-bottom: 0px;
        font-size: 0.5em;
    }

    .seccion {
        flex-wrap: wrap; /* Permite que los elementos se envuelvan en filas si no hay suficiente espacio */
    }

    /* Estilos para la clase "opcion" Las secciones principales del hogar */
    .opcion {
        margin: 15px;
        flex-basis: calc(33.33% - 30px); /* Establece el tamaño base de cada elemento al 33.33% del contenedor menos los márgenes */
        width: 30px;  /* Ancho del recuadro */
        height: 138px; /* Altura del recuadro */
    }   

    /* Selecciona el contenedor-objeto y aplica estilos cuando el mouse está sobre él */
    .contenedor-objeto:hover {
        border: 0.01px solid #324786; /* Cambia el borde al pasar el mouse */
        cursor: pointer; /* Cambia el cursor al pasar el mouse */
        transform: scale(1.15); /* Aplica un efecto de escala al pasar el mouse */
        transition: transform 0.1s; /* Agrega una transición suave */
        background-color: #3247862a; /* Cambia el color de fondo del contador al pasar el mouse */
    }

    /* Estilos de los recuadros generales */
    .contenedor-objeto {
        margin: 3px;  /* margen entre cada recuadro */
        width: 320px;  /* Ancho del recuadro */
        height: 45px; /* Altura del recuadro */
        border: 0.1px solid #0c1410;  /* Borde para resaltar la opción */
    }

    /*Tamaño y posición de las imagenes desplegadas de las principales IMPORTATE */
    .contenedor-objeto img {
        width: 90%;  /* La imagen ocupa el 100% del ancho del recuadro */
        height: 70%; /* La imagen ocupa el 100% de la altura del recuadro */
        top: 50%; /* Alinea la parte superior de la imagen al 50% del recuadro */
        left: 85%; /* Alinea la parte izquierda de la imagen al 50% del recuadro */
    }


    /* -------------------------Contadores------------------------------------------------ */

    /* Estilo de los botones */
    .contador button {
        background-color: #F5F0EA;
        width: 50px !important; /* Añadir !important para forzar el estilo */
        height: 30px; /* Modifica la altura del botón según sea necesario */
        font-size: 16px; /* Tamaño de la fuente general para ambos botones */
        padding: 5px 13px;
        margin: 0 5px; /* Ajusta el margen horizontal entre los botones según sea necesario */
        display: flex;
        justify-content: center; /* Centra horizontalmente el contenido del botón */
        align-items: center; /* Centra verticalmente el contenido del botón */
        box-shadow: none;
        border: 1px solid;
        border: 0.1px solid #0c1410;  /* Borde para resaltar la opción */
        color: #293865;

    }

    /* Posición de los botones */
    .contenedor-objeto .contador {
        margin-bottom: -80px; /* posición vertical de boton */
        margin-left: -50px; /* posición horizontal de boton */
        flex-direction: row; /* Botones en linea horizontal */
        z-index: -1; /* Añadir esta línea para que el contador esté por encima */
    }

    /* Estilo para el numero */
    .contador input[type="number"] {
        margin-left: 120px; /* posición horizontal del numero */
        background-color: transparent; /* Oculta el fondo */
        font-size: 17px; /* Modifica el tamaño del número dentro del input */
        color: #3f525b; /* Modifica el color del número */
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Cambia la fuente según tus preferencias */
    }

    /* Ocultar las flechas de incremento y decremento en el campo de número */
    .contador input[type="number"]::-webkit-inner-spin-button,
    .contador input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Mostrar el texto siempre en la versión móvil */
    .texto-desvaneciente {
        margin-top: 8px;
        font-size: 13px; /* Modifica el tamaño del número dentro del input */
        color: #3f525b;
        display: block !important; /* Hacer que el texto esté siempre visible */
        opacity: 1 !important; /* Asegurarse de que la opacidad esté al máximo */
        transition: none !important; /* Eliminar cualquier transición o efecto de desvanecimiento */
    }

    /* Estilo del texto cuando el checkbox está marcado */
    input[type="checkbox"]:checked + .imagen-container + .contador + .texto-desvaneciente {
        color: white; /* Cambiar a color blanco cuando el checkbox está marcado */
    }

    /* Estilo del número cuando el checkbox está marcado */
    input[type="checkbox"]:checked + .imagen-container + .contador input[type="number"] {
        color: rgb(255, 238, 0); /* Cambiar a color rojo cuando el checkbox está marcado */
    }


    #step3 .button-container {
        margin-top: 100px;
        padding-bottom: 150px;
    }
    
    .button-container button {
        margin: 0 5px; /* Ajusta el valor según sea necesario */
    }
    

    /* -------------------------INICIO efectos de botones------------------------------------------------ */
    
    /* Estilos para los botones de aumento y disminución */
    .contador button {
        transition: transform 0.1s ease; /* Agregar una transición suave */
    }

    /* Efecto al pasar el cursor sobre los botones */
    .contador button:hover {
        transform: scale(1.1); /* Hacer que el botón aumente ligeramente al pasar el cursor sobre él */
    }

    /* Efecto al presionar los botones */
    .contador button:active {
        transform: scale(0.9); /* Reducir ligeramente el tamaño del botón al presionar */
        box-shadow: 0 0 5px rgb(255, 255, 255); /* Agregar una sombra al botón */
        background-color: #111B21; /* Cambiar el color de fondo al presionar */
        color: #ffffff;
    }
    /* -------------------------FIN efectos de botones------------------------------------------------ */

    /*---------------------👆-------6 cuadros principales------INICIO---------------------------👆--------------*/  


    /* Estilo del resumen */
    .resumen{
        margin-bottom: 0; /* Elimina cualquier margen inferior */
        width: 100vw; /* Ocupa el 100% del ancho de la pantalla */
        height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
        margin-bottom: 0; /* Elimina el margen inferior */
        margin-top: 0px;
        background-color: #111B21;
    }

    .Textofinal {
        margin-top: 3px;
        text-align: center; /* Centra el contenido horizontalmente */
    }

    #step4 .button-container {
        margin-top: 240px; /* Ajusta el valor según sea necesario */
    }


    /* -------------------------Test nombreusuario------------------------------------------------ */

    /*---------------------👇-------Ingreso Teléfono------INICIO---------------------------👇--------------*/

    .ingresotelefono {
        margin-bottom: 200px;
    }
    
    .ingresotelefono input[type="tel"] {
        height: 12px;
        background-color: #F5F0EA;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #000000;
        font-size: 16px;
        outline: none;
        transition: border-color 0.2s ease-in-out;
        width: 190px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    .ingresotelefono input[type="tel"]:focus {
        border-color: #008CBA;
    }
    
    /*---------------------👆-------Ingreso Teléfono------FIN---------------------------👆-----------------*/    



    /*---------------------👇-------enviarWhatsApp------INICIO---------------------------👇--------------*/ 
    
    .enviowsp button {
        top: 50px; /* Ajusta esta cantidad según sea necesario */
        background-color: rgba(0, 229, 107, 0.787);
        color: #111B21; /* Cambia el color del texto */
        position: relative;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold; /* Puedes ajustar la negrita según tus preferencias */
        width: 220px;
        height: 38px;
    }
    
    #enviarWhatsApp:hover {
        background-color: rgba(0, 229, 46, 0.787);
    }
    
    /*---------------------👆-------enviarWhatsApp------FIN---------------------------👆-----------------*/




    /*---------------------👇-------Selector paises------INICIO---------------------------👇-----------------*/
    
    :root {
        --primary: #0048b529;
    }	
    
    .select-box {
        position: relative;
        width: 20rem;
        margin-top: -25px;
    }
    
    .select-box input {
        height: 8px;
        width: 89%;
        padding: 1rem .6rem;
        font-size: 1rem;
        border: .1rem solid transparent;
        outline: none;
    }
    
    input[type="tel"] {
        border-radius: 0 .5rem .5rem 0;
    }
    
    .select-box input:focus {
        border: .1rem solid var(--primary);
    }
    
    .selected-option {

        background-color: #eee;
        border-radius: .5rem;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .iconify {
        margin-left: 4px; /* Ajusta la posición horizontal de la bandera hacia la izquierda */
    }
    
    .selected-option div{
        position: relative;
        width: 5rem;
        padding: 0 2.5rem 0 .5rem;
        text-align: center;
        cursor: pointer;
    }
    
    /* Ajusta la posición de la fecha */
    .selected-option div::after{
        position: absolute;
        content: "";
        right: .8rem;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: .8rem;
        height: .8rem;
        border-right: .12rem solid var(--primary);
        border-bottom: .12rem solid var(--primary);
        transition: .2s;
    }
    
    .selected-option div.active::after{
        transform: translateY(-50%) rotate(225deg);
    }
    
    .selected-option div strong {
        display: none; /* oculta el numero en el selector */
    }
    

    /* listado desplegable */
    .select-box .options {
        z-index: 1000; /* Valor alto para asegurarse de que esté por encima de otros elementos */
        position: absolute;
        top: 4rem;
        width: 100%;
        background-color: #F5F0EA;
        border-radius: .5rem;
        display: none;
    }
    
    .select-box .options.active {
        display: block;
    }
    
    .select-box .options::before {
        position: absolute;
        content: "";
        left: 1rem;
        top: -1.2rem;
    
        width: -0;
        height: 0;
        border: .6rem solid transparent;
        border-bottom-color: var(--primary);
    }
    

    input.search-box {
        background-color: var(--primary);
        color: #F5F0EA;
        border-radius: .5rem .5rem 0 0;
        padding: 1.0rem 1rem;
    }
    
    .select-box ol {
        list-style: none;
        max-height: 17rem;
        overflow: overlay;
    }
    
    .select-box ol::-webkit-scrollbar {
        width: .6rem;
    }
    
    .select-box ol::-webkit-scrollbar-thumb {
        width: .4rem;
        height: 3rem;
        background-color: #ccc;
        border-radius: .4rem;
    }
    
    .select-box ol li {
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }
    
    .select-box ol li.hide {
        display: none;
    }
    
    .select-box ol li:not(:last-child) {
        border-bottom: .1rem solid #dfdfdf;
        margin-left: -40px;/* Posición horizontal de las banderas y texto país */
    }
    
    .select-box ol li:hover {
        background-color: rgba(27, 67, 178, 0.243);
    }
    
    .select-box ol li .country-name {
        margin-left: 1.0rem;
    }



}



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

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden; /* Evitar el scroll */
    }

    /* NO SCROLEAR */
    #step3 {
        flex: 1; /* Permitir que esta sección ocupe el espacio restante */
        overflow-y: auto !important; /* Habilitar el scroll vertical */
        padding: 20px; /* Espaciado adicional si es necesario */
        box-sizing: border-box; /* Para incluir el padding */
    }

    .usuario {
        max-width: 290px; /* Ancho máximo */
    }

    .opciones button {
        width: 160px; /* Ajusta el ancho del botón según tus preferencias */
    }

    .navergar .boton-navegar {
        width: 290px;

    }

    .navergar2 .boton-navegar {
        width: 290px;
    }

    /*Estilo del slider*/
    input[type="range"] {
        width: 160%;
    }   
     
    .direcciones {
        max-width: 290px; /* Ancho máximo */
    }


    /* Estilos para la página de inicio */
    .seiscuadros {
        height: 300vh; /* 100% de la altura de la ventana */
    }

    /* Estilos para la clase "opcion" Las secciones principales del hogar */
    .opcion {
        margin: 14px;
        width: 29px;  /* Ancho del recuadro */
    }   

    /* Estilos de los recuadros generales */
    .contenedor-objeto {
        width: 290px;  /* Ancho del recuadro */
    }

    /* Estilo para el numero */
    .contador input[type="number"] {
        margin-left: 95px; /* posición horizontal del numero */
    }

    /* Posición de los botones */
    .contenedor-objeto .contador {
        margin-left: -45px; /* posición horizontal de boton */
    }

    .resumen{
        height: 110vh;
    }


    .distancia-duracion, p{

        font-size: 1.1em; /* Puedes ajustar el valor según tus preferencias */
    }

    #step3 .button-container {
        margin-top: 100px;
        padding-bottom: 150px;
    }
}





@media only screen and (device-width: 428px) {

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden; /* Evitar el scroll */
    }

    /* NO SCROLEAR */
    #step3 {
        flex: 1; /* Permitir que esta sección ocupe el espacio restante */
        overflow-y: auto !important; /* Habilitar el scroll vertical */
        padding: 20px; /* Espaciado adicional si es necesario */
        box-sizing: border-box; /* Para incluir el padding */
    }

    .usuario {
        max-width: 290px; /* Ancho máximo */
    }

    .opciones button {
        width: 160px; /* Ajusta el ancho del botón según tus preferencias */
    }

    .navergar .boton-navegar {
        width: 290px;

    }

    .navergar2 .boton-navegar {
        width: 290px;
    }

    /*Estilo del slider*/
    input[type="range"] {
        width: 160%;
    }   
     
    .direcciones {
        max-width: 290px; /* Ancho máximo */
    }


    /* Estilos para la página de inicio */
    .seiscuadros {
        height: 300vh; /* 100% de la altura de la ventana */
    }

    /* Estilos para la clase "opcion" Las secciones principales del hogar */
    .opcion {
        margin: 14px;
        width: 29px;  /* Ancho del recuadro */
    }   

    /* Estilos de los recuadros generales */
    .contenedor-objeto {
        width: 290px;  /* Ancho del recuadro */
    }

    /* Estilo para el numero */
    .contador input[type="number"] {
        margin-left: 95px; /* posición horizontal del numero */
    }

    /* Posición de los botones */
    .contenedor-objeto .contador {
        margin-left: -45px; /* posición horizontal de boton */
    }

    .resumen{
        height: 110vh;
    }

    .distancia-duracion, p{

        font-size: 1.1em; /* Puedes ajustar el valor según tus preferencias */
    }

    #step3 .button-container {
        margin-top: 100px;
        padding-bottom: 150px;
    }

}


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


    .opciones button {
        width: 150px; /* Ajusta el ancho del botón según tus preferencias */
    }


    #step1 .button-container {
        margin-top: -15px !important;

    }

    #step1extra .button-container {
        margin-top: 170px !important;

    }

    #step2 .button-container {
        margin-top: 170px !important;
    }

    
    #step2extra .button-container {
        margin-top: 475px !important;
    }

    #seccionesdelhogar button{

        width: 150px; /* Ajusta el ancho del botón según tus preferencias */
    }

    #step4 .button-container {
        margin-top: 150px !important;
    }


}

/* samsung galaxy S20 */
@media only screen and (max-width: 360px) {



    .opciones button {
        width: 135px !important; /* Ajusta el ancho del botón según tus preferencias */
    }

    #step1extra .button-container  {
        margin-top: 150px !important;
    }

    #step1extra button{
        width: 135px; /* Ajusta el ancho del botón según tus preferencias */
    }

    #step2 button{
        width: 135px; /* Ajusta el ancho del botón según tus preferencias */
    }

    #step2extra button {
        width: 135px; /* Ajusta el ancho del botón según tus preferencias */
    }

    #seccionesdelhogar button{

        width: 135px; /* Ajusta el ancho del botón según tus preferencias */
    }

    #step4 .button-container {
        margin-top: 140px !important;
    }
}










.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.inmueble-group {
    height: 30vh;

    display: flex;
    justify-content: center; /* Centrar todo el contenedor horizontalmente */
    width: 100%; /* Para asegurar que ocupe todo el ancho de la pantalla */
}

.inmueble {
    position: relative; /* El contenedor padre debe estar en "relative" */
    width: 300px; /* Ajusta el ancho como prefieras */
    height: 250px; /* Establece una altura que permita espaciar las preguntas */
}

.pregunta {

    position: absolute; /* Todas las preguntas estarán fijas en sus posiciones */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajustar el centrado exacto */
    opacity: 1; /* Las preguntas inicialmente estarán ocultas */
}

.pregunta.show {
    padding: 9px;/* espacio vertical entre preguntas */
    opacity: 1; /* Mostrar las preguntas que se despliegan */
    transform: translateX(-50%) translateY(0); /* Volver a la posición original */
}

.pregunta:first-child {
    top: 10px; /* La primera pregunta estará fija en la parte superior */
}

.pregunta:nth-child(2) {
    top: 50px; /* Ajusta la posición vertical de la segunda pregunta */
}

.pregunta:nth-child(3) {
    top: 100px; /* Ajusta la posición vertical de la tercera pregunta */
}

.pregunta:nth-child(4) {
    top: 150px; /* Ajusta la posición vertical de la cuarta pregunta */
}


.preguntaPiso, .preguntaAscensor, .preguntaCabeAscensor {
    position: absolute;
    visibility: hidden;
    height: 0;
    transition: visibility 0.3s ease, height 0.3s ease;
}


.pregunta.show {
    visibility: visible;
    height: auto;
}



/* Estilo para el select */
select {

    border-radius: 10px !important;
    text-align: center;
    color: #F5F0EA;
    appearance: none; /* Quitar la apariencia nativa */
    -webkit-appearance: none; /* Para navegadores WebKit */
    -moz-appearance: none; /* Para navegadores Mozilla */
    background-color: #111B21; /* Color de fondo */
    border: 1px solid #ffffff; /* Borde */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px 15px; /* Espaciado interno */
    width: 350px; /* Ocupa todo el ancho del contenedor */
    font-size: 16px; /* Tamaño de la fuente */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el borde y la sombra */
}

/* Estilo para el select al pasar el mouse o al recibir foco */
select:hover,
select:focus {
    background-color: #283f7e;
    color: #F5F0EA;
    border-color: #0051ff; /* Cambia el color del borde al enfocarse */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra suave */
    outline: none; /* Quitar el borde de enfoque nativo */
}

/* Flecha del select */
select::after {
    content: ''; /* Crear un pseudo-elemento para la flecha */
    position: absolute;
    right: 15px; /* Posiciona la flecha a la derecha */
    top: 50%;
    transform: translateY(-50%); /* Centrar verticalmente */
    border: solid transparent; /* Crear la flecha */
    border-width: 5px 5px 0 5px; /* Tamaño de la flecha */
    border-bottom-color: #333; /* Color de la flecha */
    pointer-events: none; /* No permitir interacción con la flecha */
}







/*mapaaaaaaa*/

.map-container {
    position: fixed; /* Fija el mapa en la pantalla */
    top: 0px;
    left: 0;
    width: 100vw; /* Ocupa todo el ancho de la ventana */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    z-index:-1; /* Asegura que el mapa esté detrás de todo */
}


#mapa {
    display: none;  /* Ocultar el mapa inicialmente */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.8; /* Hacemos el mapa semitransparente */
    transition: opacity 10s ease;  /* Transición suave en la opacidad */

}

#mapa.show {
    display: block;  /* Asegura que el mapa se muestre */
    opacity: 1;      /* Mapa completamente visible */
}




/* .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f0ea !important; /* Transparencia del overlay */
    /*z-index: 1; 
}