body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;


/* Fondo degradado: azul (#0057E7), verde (#008744) y café (#6F4E37) */
background: linear-gradient(195deg, #0057E7, #008744, #fff);
    background-size: 600% 600% 600%;
    animation: gradient 15s ease infinite;
}

/* Encabezado con estilo hogareño y natural */
.property-header {
    background: url('assets/img/1.jpg') no-repeat center center;
    background-size: cover;
    z-index: 10;
    color: #fff;
    padding: 120px 0;
    text-align: center;
    box-shadow: inset 5rem 5rem 5rem 5rem rgba(4,4,4,0.4);
}

.articulo {
    background: #fff;
    padding: 5rem;
    margin: 2rem;
    font-size: 25px;
    border-radius: 5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.sombra {
    text-shadow : 5px 5px 5px #000;
}

.texto_pequeño {
    font-size: 1rem;
    font-weight: bolder;
    font-size:1.20rem;
}

.icono_grande {
   font-size: 7rem;
   color:yellow;
}

/* Botón de contacto profesional con animación sutil */
.boton_whats {
    display: inline-block;
    background-color: #008744; /* Puedes cambiar este color por el de tu preferencia */
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    position: relative; /* Necesario para la animación */
    animation: upDown 2s ease-in-out infinite;
}

#boton_whats:hover {
    background-color: #006c33;
}

/* Animación para movimiento hacia arriba y abajo leve */
@keyframes upDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Contenido principal */
.property-details {
    padding: 20px 0;
    color: #333;
}

/* Pie de página */
.property-footer {
    background: #eaeaea;
    color: #555;
    padding: 20px 0;
}

/* Estilos para la galería */
.gallery {
    text-align: center;
}
.gallery h2 {
    margin-bottom: 30px;
    color: #2d572c;
}
.gallery-img {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.gallery-img:hover {
    transform: scale(1.05);
}

/* Estilos para el modal de imagen */
.modal-body {
    background: #000;
}
#modalImage {
    width: 100%;
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

#caja {
    background: #fff;
    color:#000;
    padding: 2rem;
}