html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 250;      /* Thin */
}

main {
    flex: 1; /* Hace que el contenido empuje el footer al fondo */
}

/* CARDS DEL DOCUMENTO */

.card {
    font-weight: 100; /* Un poco más fuerte para mejorar la lectura */
}

.card-title, .fw-bold {
    font-weight: 400; /* Normal */
}

.card-subtitle, .fw-bold {
    font-weight: 200; /* Normal */
}

.card-precio, .fw-bold {
    font-weight: 400; /* Normal */
}


.propiedad-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.propiedad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* BADGES DE LAS CARDS */

.badge-operacion {
    font-family: 'Noto Sans', sans-serif;  /* O la que quieras */
    font-weight: 800;                       /* Más gruesa */
    font-size: 0.95rem;                     /* Ligeramente más grande */
    text-transform: uppercase;
    letter-spacing: 0.5px;                  /* Un poquito de espacio entre letras */
    padding: 0.5rem 0.75rem;
    border-radius: 0.3rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Sombra sutil para destacarla */
    transition: transform 0.2s ease;
}

.badge-operacion:hover {
    transform: translateY(-2px);           /* Pequeño efecto hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra un poco más grande */
}


.badge-diagonal {
  position: absolute;
  top: 50px;
  right: -20px;
  background: red;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  padding: 5px 50px;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 10;
}


/* IMAGENES DEL DOCUMENTO */

/* Imagen principal */
#mainImage {
    width: 100%;
    max-height: 450px; /* Máxima altura */
    object-fit: cover; /* Mantiene proporción y recorta si es necesario */
    border-radius: 5px;
    transition: opacity 0.4s ease-in-out;
}

/* Miniaturas */
.thumb-img {
    width: 90px;
    height: 70px;
    object-fit: cover; /* Mantiene proporción y recorta si es necesario */
    cursor: pointer;
    border-radius: 3px;
    transition: transform 0.3s ease;
}

/* Hover miniaturas */
.thumb-img:hover {
    transform: scale(1.05);
}

/* Contenedor de miniaturas */
.miniaturas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 100px; /* No crece más allá de esto */
    overflow-x: auto;  /* Scroll horizontal si hay muchas */
}