body {
        font-size: 17px;
        font-family: sans-serif;
    }

    /* Estilos del encabezado */
    .headerMenu {
      background-color: #333;
      color: white;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav ul { list-style-type: none; display: flex; }
    nav ul li { margin-right: 20px; }

    nav ul li a{
      color: #fff;
      text-decoration: none;
      font-weight: bold;
    }
    nav ul li a:hover{ color: #ccc; cursor: pointer; }

    /* Estilos del banner principal */
    .banner, .banners { text-align: center; padding: 50px 10px; }

    .banner img {
      max-width: 100%;
      height: 650px;
      border-radius: 10px; /* Bordes redondeados para la imagen */
      margin-bottom: 20px;
    }
    .banners img {
      max-width: 100%;
      height: auto;
      border-radius: 10px; /* Bordes redondeados para la imagen */
      margin-bottom: 20px;
    }

    .soloImg {max-width: 100%; max-height: 550px !important;}

    .banners .txtIntro {
      max-width: 60%;
      height: auto;
      border-radius: 10px; /* Bordes redondeados para la imagen */
      margin: 30px auto;
    }

    /* Estilos de la vivienda destacada */
    .vivienda {
      border: 1px solid #ddd; /* Borde para resaltar la vivienda */
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
    }

    .vivienda img {
      max-width: 100%;
      height: auto;
      border-radius: 10px; /* Bordes redondeados para la imagen de la vivienda */
      margin-bottom: 20px;
    }

    .vivienda .divDts { display: flex; justify-content: space-between; }

    .divDts  .soloDts{
      margin: 20px 20px;
      padding: 10px 10px;
      min-width: 45%;
    }

    .soloDts li { list-style-type: none; }

    .divDts  .soloDtsBrds{
      border-right: 1px #ccc solid;
      /*border-radius: 10px;*/
      margin: auto 0;
      padding: 0 10px 0 20px;
      min-width: 45%;
      text-align: left;
    }
    .soloDtsBrds2{
      border-right: 1px #ccc solid;
    }

    .icono-svg { width: 30px; height: 30px; margin-right: 15px; fill: #333; }

    /* Estilos del formulario de contacto */
    form { max-width: 600px; margin: auto; }
    label, input, textarea { display: block; margin-bottom: 10px; }
    .calendario { display: flex; flex-direction: column; }
    .calendario label { margin-bottom: 5px; }

    .calendario input[type="date"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .calendario button {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }

    .buttonAction {
            padding: 15px 25px;
            font-size: 18px;
            font-weight: bold;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
    }
        .buttonAction:hover {
            background-color: #005685;
        }

    button[type="submit"] {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }

    .dias-ocupados { margin-top: 10px; color: red; }
      
    .txtFnSz12 { font-size: 12px; }
    .txtFnSz14 { font-size: 14px; }
    .txtFnSz16 { font-size: 16px; }
    .txtFnSz18 { font-size: 18px; }
    .txtFnSz20 { font-size: 20px; }
    .txtFnSz22 { font-size: 22px; }

    /***************************************/
        .containerServicios {
            /*max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
        }

        .containerServiciosh1 { color: #3498db; }

        .containerServicios ul { list-style-type: none; padding: 0; }

        .containerServicios li { margin-bottom: 10px; }

        .containerServicios li::before {
            content: '✔'; /*'\2022'; /* Código Unicode para el punto de viñeta */
            color: #3498db;
            display: inline-block;
            width: 1em;
            margin-left: 1em;
            margin-right: 0.3em
        }
    /***************************************/
      

    /* Estilos responsivos */
    @media (max-width: 768px) {
      .vivienda, form { width: 80%; margin: auto; }
      .banners .txtIntro { max-width: 80%; }
      .vivienda .divDts { flex-direction: column; }
    }

    /* Estilo para el modal */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background-color: #fff;
      padding: 10px 10px 30px 10px;;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      height: 80%;
      width: 80%;
    }

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #fff;
      font-weight: bolder;
      font-size: 32px;
    }

    /* Estilo para el botón de abrir modal */
    #openModalBtn {
      padding: 10px;
      background-color: #007bff;
      color: #fff;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      font-weight: 900;
    }

    /* Estilos para el carrusel */
    #carousel {
      max-width: 100%;
      overflow: hidden;
      position: relative;
      height: 100%;
    }

    .carousel img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      display: none;
    }

    .btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      cursor: pointer;
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: 5px;
    }

    .btn-prev { left: 10px; }

    .btn-next { right: 10px; }

    .bullets { text-align: center; margin-top: 10px; }

    .bullet {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-color: #999;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
    }

    .active { background-color: #007bff; }

    .ponrojo { border: 1px #007bff solid; }
    .divFlex { display: flex; }
    .divFlex .icono {
      height: auto;
      border-radius: 10px;
      margin: 0 10px;
      padding: 2px;
    }
    .divFlex span {
      margin-left: 10px;
      margin: auto 0;
    }
    .divFlex span {
      margin-left: 10px;
      margin: auto 0;
    }
      
      /* ///// ventana casa modal ///// */
        .imagen-fade_Oculta { opacity: 0; transition: opacity 2s ease; }
        .imagen-fade_Ver { opacity: 1; transition: opacity 2s ease; }

      .vsrImgMdl { width: 80%; margin: 30px auto; }

        .collage-container {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            height: 450px;
        }

        .collage-container > div { display: flex; }
        .collage-container .divLateral { flex: 1 0 calc(20% - 5px); display: flex; }
        .collage-container .divCentro { flex: 1 0 calc(30% - 5px); display: flex; }

        /*///// imagenes div //////*/
        .collage-container .imgLateral {
            width: 100%;
            max-width: 100%;
            height: 48.5%;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .collage-container .imgCentro {
            width: 100%;
            max-width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .collage-container .imgLateral,
        .collage-container .imgCentro {
            border-radius: 8px; /* Bordes redondeados, opcional */
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra, opcional */
        }

        .collage-container .imgLateral:hover,
        .collage-container .imgCentro:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); /* Sombra, opcional */
        }

        /*///// direccion de las columnas de cada div //////*/
        #DivIzquierda,
        #DivCentro,
        #DivDerecha {
            display: flex;
            flex-direction: column;
            height: 372px;
        }

      /*******************************************/
        .containerCntcs {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
        }

        .cntnrCldr h2,
        .containerCntcs h2 {
            color: #3498db;
        }

        .containerCntcs form {
            display: grid;
            gap: 10px;
        }

        .containerCntcs label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        .milabel {
            padding-top: 10px;
            width: 60px;
            border: 1px #ccc solid;
            margin-right: 5px;
            border-radius: 5px;
            height: 28px;
        }

        .containerCntcs input, .containerCntcs textarea {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .containerCntcs button {
            padding: 10px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .containerCntcs button:hover { background-color: #2980b9; }
        .error { color: #e74c3c; }
        .divFlexAjs { display: flex; justify-content: space-between; }
        .divFlexAjs2 { display: flex; }

        .div100 { width: 100%; }
        .div90 { width: 90%; }
        .div80 { width: 80%; }
        .div70 { width: 70%; }
        .div60 { width: 60%; }
        .div50 { width: 50%; }
        .div40 { width: 40%; }
        .div30 { width: 30%; }
        .div20 { width: 20%; }
        .div10 { width: 10%; }

        .divMarg10 { margin: 10px; }
        .divMarg20 { margin: 20px; }
        .divMarg30 { margin: 30px; }
        .divMarg40 { margin: 40px; }

        .divMargIzq10 { margin-left: 10px; }
        .divMargIzq20 { margin-left: 20px; }
        .divMargIzq30 { margin-left: 30px; }
        .divMargIzq40 { margin-left: 40px; }

        .divHe10 { height: 10px; }
        .divHe20 { height: 20px; }
        .divHe30 { height: 30px; }
        .divHe40 { height: 40px; }
        .divHe50 { height: 50px; }
        .divHe60 { height: 60px; }
        .divHe70 { height: 70px; }
        .divHe80 { height: 80px; }
        .divHe90 { height: 90px; }
        .divHe100 { height: 100px; }
        .divHe120 { height: 120px; }
        .divHe130 { height: 130px; }
        .divHe140 { height: 140px; }


        /* Estilo para los días seleccionados en el calendario */
        ::selection {
            background-color: #a8dadc; /* Puedes ajustar el color a tu preferencia */
        }

        /* Estilo para el rango de días seleccionados */
        .rango-dias {
            background-color: #f0f0f0; /* Puedes ajustar el color a tu preferencia */
        }
        .msgError { font-size: 12px; color: red;}
        .ponrojo { border: 1px red solid;}
      
        /********************** Precios *****************************/      
.pricing-section {
    /*background-color: #f9f9f9;*/
    padding: 20px;
    border-radius: 10px;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    margin-bottom: 30px;
}

.pricing-section-title {
    text-align: center;
    margin-bottom: 20px;
}

.pricing-options {
    display: flex;
    justify-content: space-around;
}

.pricing-option {
    text-align: center;
    padding: 20px;
    border: 1px #efefef solid;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

.pricing-option-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.pricing-option-price {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
}

        /***************************************************/      
      
      .txtClrNgr{ color: #000}
      .txtClrRed{ color: #f00}
      .txtClrBln{ color: #fff}
      .txtClrAzl{ color: #0070B8;}
      .txtClrGrC{ color: #aaa;}
      .txtClrGrO{ color: #555;}
      .cntrVrtcl{ margin: auto 0;}
      .cntrHrznt{ margin: 0 auto;}
      .mrgHrz10 {margin: 0 10px;}
      .mrgHrz20 {margin: 0 20px;}
      .mrgHrz30 {margin: 0 30px;}
      .ppdnHrz10 {padding: 0 10px;}
      .ppdnHrz20 {padding: 0 20px;}
      .ppdnHrz30 {padding: 0 30px;}
      .cntrDiv { display: flex; justify-content: center; align-items: center; width: 100%; }
      #iconsInfo { position: relative; min-width: 40px;}
      .smbrNgra{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);}
      .smbrAzul{ box-shadow: 0 0 8px rgba(0, 112, 184, 0.3);}
      .divInfo {
            min-width: 250px;
            max-width: 250px;
            min-height: 140px;
            height: 140px;
            padding: 5px;
            border-radius: 10px;
            background-color: rgba(100, 100, 100, 0.9);
            display: none;
            position: absolute;
            right: -250px;
     }

    .txtCent { text-align: center; align-items: center; }
    .txtIzq { text-align: left; align-items: left; }
    .txtDer { text-align: right; }
    .txtJust { text-align: justify; }

        .div100 { width: 100%; }
        .div90 { width: 90%; }
        .div80 { width: 80%; }
        .div70 { width: 70%; }
        .div60 { width: 60%; }
        .div50 { width: 50%; }
        .div40 { width: 40%; }
        .div30 { width: 30%; }
        .div20 { width: 20%; }
        .div10 { width: 10%; }
      

        .divMarg10 { margin: 10px; }
        .divMarg20 { margin: 20px; }
        .divMarg30 { margin: 30px; }
        .divMarg40 { margin: 40px; }

        .divMargIzq10 { margin-left: 10px; }
        .divMargIzq20 { margin-left: 20px; }
        .divMargIzq30 { margin-left: 30px; }
        .divMargIzq40 { margin-left: 40px; }

        /* Estilo para los días seleccionados en el calendario */
        ::selection {
            background-color: #a8dadc; /* Puedes ajustar el color a tu preferencia */
        }

        /* Estilo para el rango de días seleccionados */
        .rango-dias {
            background-color: #f0f0f0; /* Puedes ajustar el color a tu preferencia */
        }

    /* Estilos del pie de página */
    footer {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center;
      position: relative;
      bottom: 0;
      /*width: 99%;*/
    }

    /* Estilos del botón flotante */
    #btnSubir {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #007bff;
      color: white;
      border: none;
      height: 40px;
      width: 40px;
      border-radius: 50%; /* Hace el botón redondo */
      cursor: pointer;
    }

    #btnSubir:hover { box-shadow: 0 0 6px #777;}

    /* Flecha hacia arriba */
    #btnSubir::before {
	/*'⋀' (con forma de carat) es '\22C0' y para '▲' (triángulo) es '\25B2'.*/
      content: '\22C0'; /*'▲'; /* '\2191'; /* Código unicode para la flecha hacia arriba */
      font-size: 20px;
    }

    .mxDiv20 { min-height: 20px; }
    .mxDiv30 { min-height: 30px; }
    .mxDiv40 { min-height: 40px; }
    .mxDiv50 { min-height: 50px; }
    .mxDiv60 { min-height: 60px; }
    .mxDiv70 { min-height: 70px; }
    .mxDiv80 { min-height: 80px; }
      
    .divBdrRds {border-radius: 7px;}

    .icono-red-social { color: #ccc; font-size: 20px; margin: 0 5px; } 
    .icono-red-social:hover { color: #0070B8; } 
    .divBtn { height: 180px; }
    .icoDto { width: 25px; padding: 10px 0; }
    .dtsDto { width: 260px; padding-top: 10px; }
    .divBrdr { border-bottom: 1px #ccc solid; }

    .milabelInput {
        padding-top: 10px !important;
        width: 60px !important;
        border: 1px #ccc solid !important;
        margin-right: 5px;
        border-radius: 5px !important;
        height: 40px !important;
        font-weight: bold;
        text-align: center;
    }