/* ============================================================
   BienesRaíces — Estilos personalizados
   Base: Bootstrap 5.3
   Codificación: UTF-8
   ============================================================ */

/* ----------------------------------------------------------
   Variables de color
   ---------------------------------------------------------- */
:root {
    --br-primario:        #0C2340;
    --br-primario-dark:   #071628;
    --br-primario-light:  #d4e0f0;
    --br-dorado:          #C5A059;
    --br-dorado-dark:     #a8874d;
    --br-fondo:           #FBF9F4;
    --br-sombra:          0 2px 16px rgba(0, 0, 0, .07);
    --br-radio:           12px;
}

/* ----------------------------------------------------------
   Cuerpo y tipografía
   ---------------------------------------------------------- */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--br-fondo);
    color: #212529;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* ----------------------------------------------------------
   Utilidades de color propias
   ---------------------------------------------------------- */
.bg-primario       { background-color: var(--br-primario) !important; }
.bg-primario-dark  { background-color: var(--br-primario-dark) !important; }
.text-primario     { color: var(--br-primario) !important; }
.text-dorado       { color: var(--br-dorado) !important; }
.opacity-90        { opacity: .9; }

/* Botones personalizados */
.btn-primario {
    background-color: var(--br-primario);
    border-color: var(--br-primario);
    color: #fff !important;
}
.btn-primario:hover,
.btn-primario:focus {
    background-color: var(--br-primario-dark);
    border-color: var(--br-primario-dark);
    color: #fff !important;
}

.btn-outline-primario {
    border-color: var(--br-primario);
    color: var(--br-primario) !important;
}
.btn-outline-primario:hover,
.btn-outline-primario:focus {
    background-color: var(--br-primario);
    border-color: var(--br-primario);
    color: #fff !important;
}

.btn-dorado {
    background-color: var(--br-dorado);
    border-color: var(--br-dorado);
    color: #fff !important;
    font-weight: 600;
}
.btn-dorado:hover,
.btn-dorado:focus {
    background-color: var(--br-dorado-dark);
    border-color: var(--br-dorado-dark);
    color: #fff !important;
}

/* ----------------------------------------------------------
   Barra de navegación
   ---------------------------------------------------------- */
.navbar.bg-primario {
    background-color: var(--br-primario) !important;
}

.navbar-dark .navbar-nav .nav-link {
    transition: color .15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--br-dorado) !important;
}

/* ----------------------------------------------------------
   Hero / Banner
   ---------------------------------------------------------- */
.hero-banner {
    background: linear-gradient(
        135deg,
        var(--br-primario) 0%,
        #071628 55%,
        #0a1e38 100%
    );
    min-height: 500px;
    padding: 80px 0 60px;
}

@media (max-width: 768px) {
    .hero-banner {
        min-height: 420px;
        padding: 60px 0 40px;
    }
    .hero-banner h1 { font-size: 1.8rem; }
}

/* ----------------------------------------------------------
   Estadísticas (franja debajo del hero)
   ---------------------------------------------------------- */
.bg-primario-dark {
    background-color: var(--br-primario-dark);
}

/* ----------------------------------------------------------
   Tarjetas de propiedad
   ---------------------------------------------------------- */
.tarjeta-propiedad {
    border-radius: var(--br-radio) !important;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tarjeta-propiedad:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(30, 77, 140, .18) !important;
}

.tarjeta-img-wrap {
    height: 215px;
    background: #e9ecef;
    overflow: hidden;
}

.tarjeta-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    display: block;
}

.tarjeta-propiedad:hover .tarjeta-img {
    transform: scale(1.05);
}

/* ----------------------------------------------------------
   Tarjetas de categoría
   ---------------------------------------------------------- */
.categoria-card {
    border-radius: var(--br-radio) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.categoria-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(30, 77, 140, .15) !important;
}

.categoria-card:hover .bi {
    color: var(--br-dorado) !important;
}

/* ----------------------------------------------------------
   Cards generales
   ---------------------------------------------------------- */
.card {
    border-radius: var(--br-radio) !important;
}

/* ----------------------------------------------------------
   Pie de página
   ---------------------------------------------------------- */
.enlace-footer:hover {
    color: #fff !important;
}

footer .text-muted {
    --bs-text-opacity: 1;
    color: #9aa5b1 !important;
}

/* ----------------------------------------------------------
   Ficha de propiedad — galería
   ---------------------------------------------------------- */
#fotoPrincipal {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    transition: opacity .3s ease;
}

.miniatura-foto {
    width: 80px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: border-color .2s;
}

.miniatura-foto.activa,
.miniatura-foto:hover {
    border-color: var(--br-primario);
}

/* ----------------------------------------------------------
   Formularios
   ---------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--br-primario);
    box-shadow: 0 0 0 .2rem rgba(30, 77, 140, .2);
}

/* ----------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------- */
.breadcrumb-item a {
    color: var(--br-primario);
    text-decoration: none;
}
.breadcrumb-item a:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   Paginación (se usará en etapas posteriores)
   ---------------------------------------------------------- */
.page-link {
    color: var(--br-primario);
}
.page-item.active .page-link {
    background-color: var(--br-primario);
    border-color: var(--br-primario);
}

/* ----------------------------------------------------------
   Alertas automáticas
   ---------------------------------------------------------- */
.alerta-auto {
    transition: opacity .4s ease;
}

/* ----------------------------------------------------------
   Responsive — móvil
   ---------------------------------------------------------- */
@media (max-width: 576px) {
    .display-6 { font-size: 1.6rem; }
    .tarjeta-img-wrap { height: 185px; }
}