/* Variables */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');
:root {
    --vino: #212635;
    --blanco: #ffffff;
    --negro-opa: rgba(0,0,0,0.6);
    --primary: #212635;
    --mh-font:    'Montserrat', sans-serif;
    --mh-gold:    #cfbb9b;
    --mh-blue:    #7fa1a8;
    --mh-navy:    #212635;
    --mh-white:   #ffffff;
    --mh-stone-white: #E7EBF3;
    --mh-text-dark: #000000;
    --color-primary:   #212635;
    --color-secondary: #7fa1a8;
    --color-accent:    #cfbb9b;
    --solvia-red:      #212635;
}


/* 1. Aplica el fondo al <main> */
main,
main > section {
    color: var(--mh-text-dark) !important;
    background-color: var(--mh-stone-white) !important;
}
/* 2. Sobrescribe posibles clases de Bootstrap (.text-white) */
main .text-white {
    color: var(--mh-text-dark) !important;
}
/* Si alguna sección tiene imagen de fondo o color distinto, elimínalo */
main > section {
    background-image: none !important;
    background: var(--mh-stone-white) !important;
}
.featured-projects .container h2 {
    margin-top: 2rem;    /* ajusta este valor al espacio que necesites */
    margin-bottom: 1rem; /* opcional: espacio debajo del H2 */
}
.featured-projects .container h2 {
    padding-top: 2rem;
}
/* en index.css, tras el @import de Google Fonts */
body {
    font-family: 'Roboto Thin', sans-serif;
    /* opcional: ajusta tamaño y altura de línea global */
    font-size: 16px;
    line-height: 1.5;
}

h1,h2,h3,h4,h5,h6 {

    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
}

p, li, span, a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
}
/* Botón Ver Detalle */
.btn-vino {
    background-color: var(--vino) !important;
    border: 1px solid var(--vino) !important;
    color: var(--blanco) !important;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    transition: filter 0.2s;
}
/* — Centrar la caja que contiene el botón — */
.services-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem; /* separa un poco del slider */
}

/* — Estilos del botón “VIEW MORE” — */
.view-more {
    font-family: var(--mh-font) !important;
    background-color: var(--mh-navy) !important;
    color:            var(--mh-white) !important;
    padding:          0.75rem 1.5rem;
    text-transform:   uppercase;
    font-weight:      700;
    font-size:        0.9rem;
    border-radius:    4px;
    cursor:           pointer;
    transition:       background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}



/* — Hover / foco — */
.view-more:hover,
.view-more:focus {
    background-color: var(--mh-gold) !important;
    color:            var(--mh-navy) !important;
    transform:        translateY(-2px);
    outline:          none;
}

.btn-vino:hover {
    filter: brightness(0.9);
}

/* Tarjeta HOT */
.card-hot {
    border: 2px solid var(--vino);
}

/* Badge “HOT” */
.badge-hot {
    background-color: var(--vino) !important;
    color: var(--blanco) !important;
    border-radius: 0.25rem;
    padding: 0.25em 0.5em;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* FONDOS */
.bg-vino {
    background-color: var(--primary) !important;
}
.bg-vino-transparente {
    background: linear-gradient(
            to bottom,
            rgba(128, 0, 32, 0.95),
            rgba(128, 0, 32, 0.85),
            rgba(128, 0, 32, 0.75)
    );
    backdrop-filter: blur(2px);
}
.navbar-gradiente {
    background: linear-gradient(
            to bottom,
            rgba(128, 0, 32, 1)    0%,
            rgba(128, 0, 32, 0.6)  5%,
            rgba(128, 0, 32, 0.2) 10%,
            rgba(128, 0, 32, 0)   100%
    );
    z-index: 1050;
}

/* NAVBAR */
/* color adaptativo según fondo */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .nav-link span,
.navbar .nav-item a {
    color: #000;
    transition: color 0.4s ease;
}

.navbar.navbar-gradiente .nav-link,
.navbar.navbar-gradiente .navbar-brand,
.navbar.navbar-gradiente .nav-link span,
.navbar.bg-vino .nav-link,
.navbar.bg-vino .navbar-brand,
.navbar.bg-vino .nav-link span {
    color: #fff !important;
}
.navbar-transition {
    background-color: rgba(128, 0, 32, 0); /* transparente */
    transition: background-color 0.5s ease;
}

.navbar-transition.visible {
    background-color: rgba(128, 0, 32, 1); /* vino sólido */
}

.navbar.navbar-gradiente ion-icon,
.navbar.bg-vino ion-icon {
    color: #fff !important;
}



/* ion-icon dentro de nav */
.navbar .nav-link ion-icon {
    color: currentColor;
    transition: transform 0.2s;
}
.navbar .nav-link:hover ion-icon {
    transform: scale(1.1);
}

/* Animación para el icono de perfil en el navbar */
.profile-animated {
    animation: profile-spin 4s linear infinite;
    display: inline-block;
}

@keyframes profile-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
#recommendations {
    background: var(--blanco);
}
#recommendations h2 {
    color: var(--primary);
}
#recommendations .btn-vino {
    background: var(--primary);
    color: var(--blanco);
}
.rec-stack {
    position: absolute;
    width: 300px;
    border: 4px solid var(--blanco);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* HERO */
/* 1) Asegura el contexto de posicionamiento */
.hero {
    position: relative;
}

/* 2) Posiciona el botón encima de los dots */
.hero-btn {
    position: absolute;
    bottom: 22rem;            /* ajusta para separarlo verticalmente */
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--primary);
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: filter 0.2s;
    pointer-events: auto;
    cursor: pointer;
    z-index: 25;             /* más alto que .slider-dots (z-index:20) */
}

.hero-btn:hover {
    filter: brightness(0.9);
}
/* 1) Contenedor principal: posición y recorte */
.hero-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%; /* hereda del .hero, que debería tener altura vía hero.css */
}

/* 2) Cada slide apilado y oculto por defecto */
/* 1) Las slides ocultas no reciben NINGÚN evento */
.hero-slider .slide {
    position: absolute;
    inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;       /* ⇐ deshabilitamos los clicks en TODAS */
}

/* 2) Sólo la activa es visible y recibe eventos */
.hero-slider .slide.active {
    opacity: 1;
    pointer-events: auto;       /* ⇐ la única que puede clicar */
}

/* 3) Imagen debajo que no robe el click */
.hero-slider .slide .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;       /* ⇐ la imagen ni la toca el cursor */
}

/* 4) Overlay y botón sí reciben los eventos */
.hero-slider .slide .hero-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: auto;       /* ⇐ el contenedor central */
    z-index: 10;
}
.hero-slider .slide .hero-overlay .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--primary);
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: filter 0.2s;
    cursor: pointer;
    pointer-events: auto;       /* ⇐ el propio botón */
    position: relative;
    z-index: 11;
}
.hero-slider .slide .hero-overlay .hero-btn:hover {
    filter: brightness(0.9);
}

/* 7) Puntos de navegación (“dots”) */
.slider-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}
.slider-dots .dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}
.slider-dots .dot.active {
    background: #fff;
}

/* 8) Flechas de navegación */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    border-color: var(--blanco);
    border: 4px;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 20;
}
.hero-arrow-left  { left: 1rem; }
.hero-arrow-right { right: 1rem; }
.hero-arrow ion-icon {
    color: #fff;
    font-size: 1.5rem;
}


/* ===== BUSCADOR COMPACTO ===== */
.search-card {
    background: var(--blanco);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    max-width: 600px;
    margin: 0 auto;
}
.search-card form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.search-card .form-control {
    flex: 1;
    border-radius: 50px;
    border: 1px solid var(--primary);
    padding: 0.5rem 1rem;
    height: 40px;
}
.btn-search {
    width: 40px;
    height: 40px;
    background: var(--blanco);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

/* Filtros inline */
.search-card .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.search-card .filters select {
    border: 1px solid var(--primary);
    border-radius: 6px;
    height: 38px;
    padding: 0 .75rem;
}
.search-card .filters select[name="tipo"] {
    flex: 1.5;
    min-width: 160px;
}
.search-card .filters select[name="habitaciones"],
.search-card .filters select[name="banos"],
.search-card .filters select[name="precio"],
.search-card .filters select[name="transaccion"] {
    flex: 1;
    min-width: 120px;
}
.search-card .filters a {
    align-self: center;
}

/* SERVICIOS */
#services h2 {
    color: var(--primary);
}
.service-card {
    border: 2px solid var(--primary);
    border-radius: 12px;
    background: var(--blanco);
    transition: transform .3s, box-shadow .3s;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* RECOMENDACIONES */
#recommendations {
    background: var(--blanco);
}
#recommendations h2 {
    color: var(--primary);
}
#recommendations .btn-vino {
    background: var(--primary);
    color: var(--blanco);
}
.rec-stack {
    position: absolute;
    width: 300px;
    border: 4px solid var(--blanco);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.top-img { top: 0; left: 10%; transform: rotate(-2deg); }
.mid-img { top: 20%; left: 5%; transform: rotate(1deg); }
.bot-img { top: 40%; left: 0; transform: rotate(-1deg); }

/* CAPACIDAD DE COMPRA RD */
#capacidad-compra-rd {
    background-color: #f8f9fa;
}
.purchase-card {
    border: none;
    border-radius: 12px;
}
.purchase-card .fs-2 {
    color: var(--primary);
}
.purchase-card small {
    font-size: 0.85rem;
}
.purchase-card strong,
.purchase-card span {
    font-size: 1.1rem;
    display: block;
}
.purchase-card .row > [class*="col-"] {
    border-right: 1px solid #e9ecef;
    padding-right: 1rem;
}
.purchase-card .row > [class*="col-"]:last-child {
    border-right: none;
}
.purchase-card .btn-vino {
    background: var(--primary) !important;
    color: var(--blanco) !important;
    border: none;
}

/* RESPONSIVO */
@media (max-width: 767px) {
    .search-card {
        padding: 1rem;
    }
    .search-card form {
        flex-direction: column;
    }
    .search-card .form-control,
    .btn-search {
        width: 100%;
        height: 44px;
    }
    .btn-search {
        margin-top: 0.5rem;
    }
    .search-card .filters {
        flex-direction: column;
    }
    .search-card .filters select {
        width: 100%;
    }
    .rec-stack {
        display: none;
    }
    .purchase-card .row > [class*="col-"] {
        border-right: none;
        padding-right: 0;
    }
}

/* CURSOR BOTÓN */
.clickable-card {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.clickable-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* BOTONES VINO */
.btn-vino {
    background-color: var(--vino) !important;
    border-color:     var(--vino) !important;
    color:            var(--blanco) !important;
}
.btn-vino:hover,
.btn-vino:focus {
    filter:       brightness(0.9);
    box-shadow:   0 0 0 0.25rem rgba(128,0,32,0.5);
}
.btn-vino:hover {
    background-color: var(--color-secondary);
    color: var(--color-accent);
}

/* FOCUS EN CAMPOS */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(128,0,32,0.25);
}

/* TITULARES */
h2,
h4 {
    color: var(--color-primary);
}

.publish-wizard .step {
    position: relative;
    text-align: center;
    flex: 1;
}
.publish-wizard .step .circle {
    width: 16px;
    height: 16px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s;
}
.publish-wizard .step .label {
    font-size: .9rem;
    color: #666;
}
.publish-wizard .step::before,
.publish-wizard .step::after {
    content: '';
    position: absolute;
    top: 8px;
    height: 2px;
    background: #ddd;
    width: 50%;
    z-index: -1;
}
.publish-wizard .step::before { left: 0; }
.publish-wizard .step::after  { right: 0; }
.publish-wizard .step:first-child::before { display: none; }
.publish-wizard .step:last-child::after  { display: none; }

/* Estado activo */
.publish-wizard .step.active .circle {
    background: var(--solvia-red);
}
.publish-wizard .step.active .label {
    color: var(--solvia-red);
}
/* Pasos completados */
.publish-wizard .step.active ~ .step .circle {
    background: #eee;
}
.publish-wizard .step.active ~ .step::before {
    background: #eee;
}

#login-prompt h2,
#recommendations h2,
#services h2 {
    color: var(--vino) !important;
}

/* Asegura que cualquier elemento con clase text-vino también lo refleje */
.text-vino {
    color: var(--vino) !important;
}
/* --- Nuevo estilo de tarjeta sin bordes --- */
.property-card {
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}
.card.property-card {
    border: none !important;
    outline: none !important;
}
.card-divider {
    width: 96%;                /* ajusta el largo a tu gusto */
    border-top: 2px solid #ccc; /* color y grosor */
    margin: 0.5rem auto;        /* centrar y separar verticalmente */
}
.sidebar-container {
    padding-left: 20px !important;
    padding-top:    0 !important;
    padding-right:  0 !important;
    padding-bottom: 0 !important;
}
.props-grid-wrapper {
    background-color: #e1e9ec;
}
/* Barra animada en la base, sólo para tarjetas hot */
.property-card.hot::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg,
    #FFD700 0%,
    #ff8b07 50%,
    #e1bb68 100%
    );
    background-size: 200% 200%;
    animation: goldGradient 3s ease infinite;
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
}
.card.property-card.hot {
    position: relative !important;
    border: 3px solid transparent !important;
    border-radius: .75rem !important;

    /* doble fondo: interior blanco + degradado en el borde */
    background-image:
            linear-gradient(white, white) !important;
linear-gradient(135deg,
#FFD700 0%,
#FFC107 50%,
#FFB300 100%
) !important;

    background-origin: padding-box, border-box !important;
    background-clip: padding-box, border-box !important;

    /* animación */
    background-size: 200% 200% !important;
    animation: goldGradient 3s ease infinite !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

@keyframes goldGradient {
    0%   { background-position: 0% 50%, 0% 50%; }
    50%  { background-position: 100% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}

/* Cuerpo dorado animado sólo en tarjetas hot */
.property-card.hot .card-body {
    /* degradado dorado animado */
    background: linear-gradient(
            135deg,
            #FFD700 0%,
            #ff8b07 50%,
            #e1bb68 100%
    );
    background-size: 200% 200%;
    animation: goldGradient 4s ease infinite;

    /* para que encaje con el radio de la tarjeta */
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;

    /* opcional: contraste del texto */
    color: #212529;
}
.property-card.hot .px-3 {
padding-bottom: 0.5rem;
    background: linear-gradient(#fff, #c5ccd7);
    border-bottom: 2px;
    border-color: #efa748;


    background-size: 200% 200%;

}
/* 1) Texto blanco en el cuerpo dorado */
.property-card.hot .card-body,
.property-card.hot .card-body h5,
.property-card.hot .card-body p {
    color: #ffffff !important;
}

/* 2) Badges Venta/Solar dorados con texto blanco */
.property-card.hot .transaction-badge,
.property-card.hot .type-badge {
    background: linear-gradient(135deg,
    #c7c7c7 0%,
    #6c6c6c 50%,
    #a2afbe 100%
    ) !important;
    color: #ffffff !important;
    border: none !important;
}
/* Ajuste fino: pesos y tamaños */
.property-card h5 {
    font-weight: 600;
    font-size: 1rem;
}
.property-card p {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.3;
}
.property-card .badge {
    font-weight: 500;
    font-size: 0.75rem;
}
.hot-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    /* Degradado dorado */
    background: linear-gradient(135deg,
    #FFD700 0%,
    #ff8b07 50%,
    #e1bb68 100%
    );
    color: #ffffff;
    font-family: 'Manrope', sans-serif;

    font-size: 0.75rem;
    padding: 0.5em 0.75em;
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background-size: 200% 200%;
    animation: goldGradient 3s ease infinite;
}
@keyframes goldGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Badge de transacción (Venta / Alquiler) */
.transaction-badge {
    background-color: #de1846;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
}

/* Badge de tipo de propiedad (Casa / Apartamento / Solar) */
.type-badge {
    background-color: #4b0520;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
}

/* Ajuste de espaciado sobre la imagen */
.property-card .px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Loader spinner color */
.spinner-border { color: var(--vino); }