/* -===========Estilos Globales========*/

:root {
    --beig: #D8CFC4;
    --marron: #5A4634;
    --oro: #B89B5E;
    --blanco: #F7F5F2;
    --negro: #1E1E1E;
}

.hero-logo {
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.page-hero{
    min-height: 380px;
    background:
            linear-gradient(180deg, rgba(30,30,30,.50), rgba(30,30,30,.35)),
            url('../../assets/img/slide3.jpg') center/cover no-repeat;
    color: var(--blanco);
    position: relative;
}
.page-hero .hero-inner{ padding-top: 110px; padding-bottom: 80px; }

/* Acento lujo */
.text-accent { color: var(--oro) !important; }

/* Botón principal del hero (si no quieres el azul por defecto) */
.btn-primary{
    background: var(--marron);
    border-color: var(--marron);
}
.btn-primary:hover{
    background: #3F3226;
    border-color: #3F3226;
}

/* ===== FIX NAVBAR BS5 ===== */

/* no fuerces todos los <a> a marrón dentro del navbar */
.navbar a,
.navbar a:focus,
.navbar a:hover {
    color: var(--blanco) !important;
    text-decoration: none;
}

/* estilo del navbar encima del hero */
.navbar {
    background: rgba(30,30,30,.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* links del menú */
.navbar .nav-link {
    color: var(--blanco) !important;
    padding: .5rem .75rem;
}

/* hover del menú (tu look lujo) */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--blanco) !important;
    border-bottom: 3px solid var(--marron);
    text-shadow: 1px 1px 1px var(--negro);
    background-color: rgba(90, 70, 52, 0.55);
}

.navbar { z-index: 9999; }

/* marca */
.navbar .navbar-brand {
    color: var(--blanco) !important;
}

/* toggler visible en móvil */
.navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,.35);
}
.navbar-dark .navbar-toggler-icon {
    filter: brightness(2);
}


/* ===== CAROUSEL BS5 FIX ===== */
.carousel {
    height: 500px;
    margin-bottom: 60px;
}

.carousel-item {
    height: 500px;
}

.carousel-item > img {
    height: 500px;
    object-fit: cover;
}


/* ====== GLOBALES ====== */
body{
    padding-bottom: 40px;
    color: var(--negro);
    background-color: var(--blanco);
}

*::-moz-selection{ background: var(--marron); color: var(--blanco); }
*::selection{ background: var(--marron); color: var(--blanco); }

a{
    color: var(--marron);
}
a:hover, a:focus{
    color: var(--marron);
    text-decoration: underline;
}

/* flecha footer (si sigues usando icono) */
.flecha{
    font-size: 30px;
    color: var(--marron);
}

/* ====== NAVBAR WRAPPER (si lo sigues usando) ====== */
.navbar-wrapper{
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 9999;
}

/* ====== CARDS OVERLAY (tu wrapper de imágenes) ====== */
.img-wrapper{
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}
/* IMPORTANTE: en BS5 NO uses position:absolute aquí */
.wrapper{
    margin-top: -280px;         /* sube el overlay encima de la imagen */
    margin-left: 20px;
    margin-right: 20px;
    padding: 16px;
    background-color: rgba(90, 70, 52, 0.78);
    border: none;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.wrapper-text{
    color: #fff !important;
}

/* ====== MARKETING ====== */
.marketing .col-lg-4{
    text-align: center;
}

/* ====== FEATURETTES ====== */
.featurette-divider{
    margin: 80px 0;
}

.featurette-heading{
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* responsive */
@media (min-width: 768px){
    .featurette-heading{ font-size: 50px; }
}
@media (min-width: 992px){
    .featurette-heading{ margin-top: 120px; }
}