/* Modern & Sophisticated CSS Override - ENHANCED VISIBILITY */
:root {
    --primary-color: #071112;
    --accent-color: #c1a57b;
    /* Dorado sofisticado */
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #333333;
    --text-light: #777777;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 20px 60px -10px rgba(0, 0, 0, 0.25);
    --border-radius: 8px;
}

/* Force Body Background */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-family: var(--font-body) !important;
    line-height: 1.8 !important;
}

/* ==============================
   NAVIGATION MENU - MODERN STYLE
   ============================== */

/* Header con fondo blanco y sombra - STICKY */
.header-area {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

.main-header.header-sticky.sticky-bar {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important;
    position: sticky !important;
    top: 0 !important;
}

/* Logo */
.logo img {
    max-height: 50px !important;
    transition: transform 0.3s !important;
}

.logo:hover img {
    transform: scale(1.05) !important;
}

/* Menu principal */
.main-menu nav ul li {
    margin: 0 5px !important;
    position: relative !important;
}

.main-menu nav ul li a {
    color: var(--primary-color) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    padding: 28px 18px !important;
    transition: all 0.3s !important;
    position: relative !important;
    text-transform: none !important;
}

/* Efecto hover con línea dorada */
.main-menu nav ul li a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 30px !important;
    height: 2px !important;
    background: var(--accent-color) !important;
    transition: transform 0.3s !important;
}

/* FORZAR COLOR DORADO EN HOVER - Alta especificidad */
.header-area .main-header .main-menu nav ul li a:hover,
.header-area .main-header .main-menu nav ul#navigation li a:hover,
.main-menu.black-menu nav ul li a:hover,
.main-menu nav ul li a:hover {
    color: #c1a57b !important;
}

.main-menu nav ul li a:hover::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* Dropdown menu moderno - Semi-transparente */
.main-menu nav ul li .dropdown-menu {
    display: block !important;
    position: absolute !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1000 !important;
}

.main-menu nav ul li.dropdown:hover .dropdown-menu,
.main-menu nav ul li .dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
    pointer-events: auto !important;
}

.main-menu nav ul li .dropdown-menu li a {
    padding: 12px 25px !important;
    font-size: 14px !important;
    color: var(--text-color) !important;
    transition: all 0.3s !important;
    display: block !important;
}

.main-menu nav ul li .dropdown-menu li a::after {
    display: none !important;
}

.main-menu nav ul li .dropdown-menu li a:hover {
    background: rgba(193, 165, 123, 0.1) !important;
    padding-left: 30px !important;
    color: var(--accent-color) !important;
}

/* HAMBURGER MENU - Estilo Moderno con DORADO */
.hamburger {
    padding: 15px !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: opacity 0.3s, transform 0.3s !important;
}

.hamburger:hover {
    opacity: 0.8 !important;
}

.hamburger-box {
    width: 30px !important;
    height: 24px !important;
    display: inline-block !important;
    position: relative !important;
}

.hamburger-inner {
    display: block !important;
    top: 50% !important;
    margin-top: -2px !important;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px !important;
    height: 3px !important;
    background-color: var(--accent-color) !important;
    border-radius: 4px !important;
    position: absolute !important;
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s !important;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "" !important;
    display: block !important;
}

.hamburger-inner::before {
    top: -8px !important;
}

.hamburger-inner::after {
    bottom: -8px !important;
}

/* Hamburger activo */
.hamburger.is-active .hamburger-inner {
    transform: rotate(45deg) !important;
}

.hamburger.is-active .hamburger-inner::before {
    opacity: 0 !important;
}

.hamburger.is-active .hamburger-inner::after {
    transform: rotate(-90deg) translateX(8px) !important;
    bottom: 0 !important;
}

/* HERO SECTION - TEXTO BLANCO */
.slider-area h1,
.slider-area h2,
.slider-area h3,
.slide-content h1,
.slide-content h2,
.slide-content h3,
.hero__caption h1,
.hero__caption h2,
.hero__caption h3 {
    color: #ffffff !important;
    text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
    font-size: 70px !important;
}

.slide-content2 h4,
.slide-content2 p,
.slide-content2 span {
    color: #ffffff !important;
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Headers normales (no hero) */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-color) !important;
    letter-spacing: -0.5px !important;
    font-family: var(--font-heading) !important;
}

/* Section titles - más grandes y con color dorado */
.section-tittle h2 {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    position: relative !important;
    padding-bottom: 20px !important;
}

.section-tittle h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 80px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%) !important;
}

/* Blog Cards - MÁS VISIBLES */
.blog_area {
    background-color: transparent !important;
    padding: 80px 0 !important;
}

.blog_item {
    background: var(--card-bg) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 50px !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: none !important;
}

.blog_item:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-10px) !important;
}

.blog_item_img img {
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    transition: transform 0.6s ease !important;
    width: 100% !important;
}

.blog_item:hover .blog_item_img img {
    transform: scale(1.05) !important;
}

.blog_item_date {
    background: linear-gradient(135deg, var(--accent-color) 0%, #a08862 100%) !important;
    padding: 18px 28px !important;
    bottom: 0px !important;
    left: 0px !important;
    border-radius: 0 !important;
}

.blog_item_date h3 {
    font-size: 24px !important;
    color: #fff !important;
}

.blog_item_date p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.blog_details {
    padding: 40px !important;
    background: #fff !important;
}

.blog_details h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
    color: var(--primary-color) !important;
    transition: color 0.3s !important;
}

.blog_details h2:hover {
    color: var(--accent-color) !important;
}

/* Sidebar Widgets - MÁS SOMBRA */
.blog_right_sidebar .single_sidebar_widget {
    background: #fff !important;
    padding: 35px !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--border-radius) !important;
    margin-bottom: 35px !important;
    border: none !important;
    transition: box-shadow 0.3s !important;
}

.blog_right_sidebar .single_sidebar_widget:hover {
    box-shadow: var(--shadow-hover) !important;
}

.widget_title {
    font-size: 22px !important;
    margin-bottom: 30px !important;
    position: relative !important;
    padding-bottom: 18px !important;
    font-weight: 600 !important;
}

.widget_title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%) !important;
}

.post_category_widget .cat-list li {
    border-bottom: 1px solid #eee !important;
    transition: all 0.3s !important;
}

.post_category_widget .cat-list li:hover {
    background-color: #f9f9f9 !important;
    padding-left: 10px !important;
}

.post_category_widget .cat-list li a {
    color: var(--text-color) !important;
    transition: color 0.3s !important;
}

.post_category_widget .cat-list li:hover a {
    color: var(--accent-color) !important;
}

/* Inputs con borde dorado al focus */
.form-control {
    border: 2px solid #eee !important;
    padding: 15px !important;
    height: 50px !important;
    background: #fafafa !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.3s !important;
}

.form-control:focus {
    background: #fff !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(193, 165, 123, 0.1) !important;
}

/* Botones con ACENTO DORADO */
.boxed-btn,
.button,
.btn,
.border-btn {
    background: var(--accent-color) !important;
    color: #fff !important;
    border: 2px solid var(--accent-color) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 16px 35px !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.4s !important;
}

.boxed-btn:hover,
.button:hover,
.btn:hover,
.border-btn:hover {
    background: transparent !important;
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(193, 165, 123, 0.3) !important;
}

/* Pagination con dorado */
.blog-pagination .page-link {
    border: none !important;
    color: var(--text-light) !important;
    font-family: var(--font-heading) !important;
    width: 45px !important;
    height: 45px !important;
    line-height: 45px !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: all 0.3s !important;
}

.blog-pagination .page-link:hover {
    background-color: rgba(193, 165, 123, 0.1) !important;
    color: var(--accent-color) !important;
}

.blog-pagination .page-item.active .page-link {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(193, 165, 123, 0.5) !important;
}

/* Gallery items - más sombra */
.box {
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.4s !important;
}

/* Blog Cards - MÁS VISIBLES */
.blog_area {
    background-color: transparent !important;
    padding: 80px 0 !important;
}

.blog_item {
    background: var(--card-bg) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-soft) !important;
    margin-bottom: 50px !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: none !important;
}

.blog_item:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-10px) !important;
}

.blog_item_img img {
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    transition: transform 0.6s ease !important;
    width: 100% !important;
}

.blog_item:hover .blog_item_img img {
    transform: scale(1.05) !important;
}

.blog_item_date {
    background: linear-gradient(135deg, var(--accent-color) 0%, #a08862 100%) !important;
    padding: 18px 28px !important;
    bottom: 0px !important;
    left: 0px !important;
    border-radius: 0 !important;
}

.blog_item_date h3 {
    font-size: 24px !important;
    color: #fff !important;
}

.blog_item_date p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.blog_details {
    padding: 40px !important;
    background: #fff !important;
}

.blog_details h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
    color: var(--primary-color) !important;
    transition: color 0.3s !important;
}

.blog_details h2:hover {
    color: var(--accent-color) !important;
}

/* Sidebar Widgets - MÁS SOMBRA */
.blog_right_sidebar .single_sidebar_widget {
    background: #fff !important;
    padding: 35px !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--border-radius) !important;
    margin-bottom: 35px !important;
    border: none !important;
    transition: box-shadow 0.3s !important;
}

.blog_right_sidebar .single_sidebar_widget:hover {
    box-shadow: var(--shadow-hover) !important;
}

.widget_title {
    font-size: 22px !important;
    margin-bottom: 30px !important;
    position: relative !important;
    padding-bottom: 18px !important;
    font-weight: 600 !important;
}

.widget_title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%) !important;
}

.post_category_widget .cat-list li {
    border-bottom: 1px solid #eee !important;
    transition: all 0.3s !important;
}

.post_category_widget .cat-list li:hover {
    background-color: #f9f9f9 !important;
    padding-left: 10px !important;
}

.post_category_widget .cat-list li a {
    color: var(--text-color) !important;
    transition: color 0.3s !important;
}

.post_category_widget .cat-list li:hover a {
    color: var(--accent-color) !important;
}

/* Inputs con borde dorado al focus */
.form-control {
    border: 2px solid #eee !important;
    padding: 15px !important;
    height: 50px !important;
    background: #fafafa !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.3s !important;
}

.form-control:focus {
    background: #fff !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(193, 165, 123, 0.1) !important;
}

/* Botones con ACENTO DORADO */
.boxed-btn,
.button,
.btn,
.border-btn {
    background: var(--accent-color) !important;
    color: #fff !important;
    border: 2px solid var(--accent-color) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 16px 35px !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.4s !important;
}

.boxed-btn:hover,
.button:hover,
.btn:hover,
.border-btn:hover {
    background: transparent !important;
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(193, 165, 123, 0.3) !important;
}

/* Pagination con dorado */
.blog-pagination .page-link {
    border: none !important;
    color: var(--text-light) !important;
    font-family: var(--font-heading) !important;
    width: 45px !important;
    height: 45px !important;
    line-height: 45px !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: all 0.3s !important;
}

.blog-pagination .page-link:hover {
    background-color: rgba(193, 165, 123, 0.1) !important;
    color: var(--accent-color) !important;
}

.blog-pagination .page-item.active .page-link {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(193, 165, 123, 0.5) !important;
}

/* Gallery items - más sombra */
.box {
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.4s !important;
}

.box:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-5px) !important;
}

/* MINI SLIDER (NAV) VISIBILITY FIX - BOTTOM RIGHT */
.slider-nav {
    position: absolute !important;
    bottom: 50px !important;
    left: auto !important;
    right: 30px !important;
    margin: 0 !important;
    z-index: 99 !important;
    width: 400px !important;
    /* Fixed width for stability */
    max-width: 40% !important;
    display: block !important;
}

/* Ensure thumbs are visible */
.slider-nav .slider-thumb {
    padding: 5px !important;
    opacity: 0.6 !important;
    transition: all 0.3s !important;
    cursor: pointer !important;
}

.slider-nav .slider-thumb img {
    max-width: 100% !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px !important;
}

.slider-nav .slick-center .slider-thumb {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    border: 2px solid var(--accent-color) !important;
}

/* Signature Alignment Force */
.slide-content2 {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row !important;
}

.slide-content2>div {
    text-align: left !important;
    padding-right: 20px !important;
}

.slide-content2 img {
    margin: 0 !important;
    align-self: center !important;
}

/* Ensure slider-area is relative for nav positioning */
.slider-area {
    position: relative !important;
}

/* Static Signature Overlay */
.hero-signature {
    position: absolute !important;
    bottom: 160px !important;
    right: 30px !important;
    z-index: 100 !important;
    display: block !important;
    pointer-events: none !important;
    /* Allow clicking through if needed */
}

.hero-signature img {
    max-width: 150px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Client Logo Carousel */
.client-logo-area {
    background: #fcfcfc;
    padding: 60px 0;
}

.single-client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 100px;
    background: transparent;
}

.single-client-logo img {
    max-width: 150px !important;
    max-height: 80px !important;
    width: auto !important;
    opacity: 0.6;
    transition: all 0.4s ease;
    filter: grayscale(100%);
}

.single-client-logo img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* About List Style */
.unordered-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 15px;
}

.unordered-list li {
    padding-bottom: 10px;
    color: #333;
}