/*============================================================
  THEME FOREST — InmoCampestre Redesign
  Paleta: Forest #4D4738 | Olive #BAB9A7 | Aloe #755F4A | Sand #C0AE94
  Diseño: premium, elegante, natural, arquitectura + lujo
  Compatible: Windows 11 · VS Code · cPanel
============================================================*/

/* ==========================================================
   1. CSS VARIABLES — Sistema de Diseño
   ========================================================== */
:root {
    /* --- Colores Principales --- */
    --color-primary:    #4D4738;  /* Forest  → botones, títulos, footer, nav scroll */
    --color-secondary:  #755F4A;  /* Aloe    → hover, detalles, líneas, etiquetas */
    --color-accent:     #BAB9A7;  /* Olive   → fondos tarjetas, secciones alternas */
    --color-background: #C0AE94;  /* Sand    → fondo principal, bloques claros */
    --color-surface:    #FFFFFF;  /* Blanco  → formularios, cajas */
    --color-border:     #D5CFC4;  /* Olive claro → bordes suaves */

    /* --- Texto --- */
    --color-text:       #3D3830;  /* Forest claro → legible pero cálido */
    --color-text-light: #6B6358;  /* Aloe suave → subtítulos */
    --color-text-white: #FFFFFF;  /* Blanco → sobre fondos oscuros */

    /* --- Estados --- */
    --color-hover:      #755F4A;  /* Aloe */
    --color-active:     #4D4738;  /* Forest */
    --color-success:    #5C8A5E;  /* Verde natural */

    /* --- Efectos --- */
    --shadow-sm:  0 2px 8px rgba(77, 71, 56, 0.08);
    --shadow-md:  0 4px 16px rgba(77, 71, 56, 0.12);
    --shadow-lg:  0 8px 32px rgba(77, 71, 56, 0.16);
    --radius:     8px;
    --transition: 0.3s ease;
}

/* ==========================================================
   2. RESET GLOBAL — Texto y Fondo
   ========================================================== */
body {
    color: var(--color-text);
    background-color: #FAF8F5;
}

p {
    color: var(--color-text-light);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
}

a {
    color: var(--color-primary);
    transition: var(--transition);
}
a:hover, a:focus {
    color: var(--color-hover);
}

/* ==========================================================
   3. BOTONES — Rediseño Completo
   ========================================================== */

/* Botón Principal (antes: #db8c23 naranja) */
.default-btn {
    padding: 12px 28px;
    color: var(--color-text-white);
    background-color: var(--color-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-transform: capitalize;
    border: none;
}
.default-btn::before {
    background-color: var(--color-hover) !important;
}
.default-btn::after {
    background-color: var(--color-hover) !important;
}
.default-btn:hover {
    color: var(--color-text-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.default-btn i {
    font-size: 20px;
    position: relative;
    top: 3px;
    transition: var(--transition);
}

/* Botón activo / destacado */
.default-btn.active {
    margin-left: 20px;
    color: var(--color-text-white);
    background-color: transparent;
}
.default-btn.active::before {
    background-color: var(--color-secondary) !important;
}
.default-btn.active::after {
    background-color: var(--color-secondary) !important;
}

/* Botón BG — Override de colores planos */
.default-bg-buttercup {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}
.default-regal-blue {
    background-color: var(--color-primary) !important;
    color: var(--color-text-white);
}
.default-sante-fe {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-white);
}
.default-dark-blue {
    background-color: var(--color-primary) !important;
    color: var(--color-text-white);
}
.default-hot-toddy {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-white);
}

/* Botón Secundario (borde) — para usar con .btn-outline */
.default-btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}
.default-btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* ==========================================================
   4. SECCIÓN TÍTULOS
   ========================================================== */
.section-title span {
    color: var(--color-secondary);
}
.section-title h2 {
    color: var(--color-primary);
}
.section-title h2 b {
    color: var(--color-secondary);
}

.section-title-two span {
    color: var(--color-secondary);
}
.section-title-two span::before {
    background-color: var(--color-secondary);
}
.section-title-two h2 {
    color: var(--color-primary);
}
.section-title-two h2 b {
    color: var(--color-secondary);
}

.section-color {
    color: var(--color-secondary);
}
.section-span-bg {
    color: var(--color-secondary);
}
.section-span-bg::before {
    background-color: var(--color-secondary);
}
.section-span-bg2 {
    color: var(--color-secondary);
}
.section-span-bg2::before {
    background-color: var(--color-secondary);
}
.section-color2 {
    color: var(--color-secondary) !important;
}

/* ==========================================================
   5. HEADER / NAVBAR — Transparente → Forest al scroll
   ========================================================== */

/* Top header bar */
.top-header {
    background-color: var(--color-primary);
}
.top-header .top-header-left li a {
    color: var(--color-accent);
}
.top-header .top-header-left li a:hover {
    color: var(--color-text-white);
}
.top-header .top-header-right li {
    color: var(--color-accent);
}
.top-header .top-header-right li i {
    color: var(--color-accent);
}
.top-header .top-header-right li a {
    color: var(--color-accent);
}

/* Main Nav */
.main-nav nav .navbar-nav .nav-item:hover a,
.main-nav nav .navbar-nav .nav-item .active {
    color: var(--color-secondary) !important;
}
.main-nav nav .navbar-nav .nav-item a {
    color: var(--color-text-light);
}
.main-nav nav .navbar-nav .nav-item a:hover,
.main-nav nav .navbar-nav .nav-item a:focus {
    color: var(--color-secondary) !important;
}
.main-nav nav .navbar-nav .nav-item a.active {
    color: var(--color-secondary) !important;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu {
    background-color: #FFFFFF !important;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li {
    border-bottom: 1px solid var(--color-accent);
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
    color: var(--color-text-light) !important;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover {
    color: var(--color-secondary) !important;
}

/* Top Nav */
.top-nav nav .navbar-nav .nav-item:hover a,
.top-nav nav .navbar-nav .nav-item .active {
    color: var(--color-secondary) !important;
}
.top-nav nav .navbar-nav .nav-item a:hover,
.top-nav nav .navbar-nav .nav-item a:focus {
    color: var(--color-secondary) !important;
}
.top-nav nav .navbar-nav .nav-item a.active {
    color: var(--color-secondary) !important;
}

/* Oftop Nav (transparente sobre slider) — fondo semi-oscuro para legibilidad */
.oftop-nav {
    background-color: rgba(30, 28, 24, 0.9);
    backdrop-filter: blur(8px);
}
.oftop-nav .navbar-nav .nav-link,
.navbar-area .oftop-nav .navbar-nav .nav-link,
.sticky-nav .oftop-nav .navbar-nav .nav-link {
    color: #FFFFFF !important;
}
.oftop-nav .navbar-nav .nav-link:hover,
.oftop-nav .navbar-nav .nav-link:focus,
.oftop-nav .navbar-nav .nav-link.active,
.navbar-area .oftop-nav .navbar-nav .nav-item:hover a,
.navbar-area .oftop-nav .navbar-nav .nav-item .active {
    color: var(--color-accent) !important;
}

/* Sticky Nav — Forest sólido, texto blanco garantizado */
.sticky-nav .oftop-nav {
    background-color: #4D4738 !important;
    backdrop-filter: none;
}
.sticky-nav .oftop-nav .navbar-nav .nav-link {
    color: #FFFFFF !important;
}
.sticky-nav .oftop-nav .navbar-nav .nav-link:hover,
.sticky-nav .oftop-nav .navbar-nav .nav-link.active,
.sticky-nav .oftop-nav .navbar-nav .dropdown-toggle {
    color: #BAB9A7 !important;
}

/* Side btn area */
.side-btn-area .call-btn {
    color: var(--color-primary);
}
.side-btn-area .call-btn:hover {
    color: var(--color-secondary);
}

/* Sticky (scroll) */
.sticky-nav .main-nav {
    background-color: #FFFFFF;
}

/* ==========================================================
   6. HOME SLIDER
   ========================================================== */
.home-slider-area .owl-nav .owl-prev {
    background-color: var(--color-primary) !important;
}
.home-slider-area .owl-nav .owl-prev:hover {
    background-color: var(--color-secondary) !important;
}
.home-slider-area .owl-nav .owl-next {
    background-color: var(--color-primary) !important;
}
.home-slider-area .owl-nav .owl-next:hover {
    background-color: var(--color-secondary) !important;
}
.home-slider-content span {
    color: var(--color-primary);
}
.home-slider-content h1 {
    color: var(--color-primary);
}
.home-slider-content h1 b {
    color: var(--color-secondary);
}
.home-slider-content .home-slider-btn .default-btn {
    background-color: var(--color-primary);
}
.home-slider-content .home-slider-btn .default-btn.active {
    background-color: var(--color-primary);
}

/* Home Slider Two */
.home-slider-two .owl-nav .owl-prev:hover {
    color: var(--color-secondary) !important;
}
.home-slider-two .owl-nav .owl-next:hover {
    color: var(--color-secondary) !important;
}
.home-slider-item .slider-content .discover-btn {
    color: var(--color-primary);
    border-radius: var(--radius);
    transition: var(--transition);
}
.home-slider-item .slider-content .discover-btn:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.home-slider-item .slider-content .slider-cell-btn:hover {
    color: var(--color-accent);
}

/* ==========================================================
   7. PROPIEDADES / CARDS
   ========================================================== */
.property-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.property-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.property-card .content {
    background-color: #FFFFFF;
    border-color: var(--color-accent);
    border-radius: 0 0 var(--radius) var(--radius);
}
.property-card .content span {
    color: var(--color-secondary);
}
.property-card .content span::before {
    background-color: var(--color-secondary);
}
.property-card .content a h3 {
    color: var(--color-primary);
}
.property-card .content .learn-more-btn {
    color: var(--color-secondary);
}
.property-card .content .learn-more-btn:hover {
    color: var(--color-primary);
}

/* ==========================================================
   8. SECCIONES — Ritmo visual alternado
   ========================================================== */
.section-bg {
    background-color: var(--color-background) !important;
}

/* Sección alterna 1 (Sand) */
.property-section-two,
.service-area,
.gallery-area,
.team-area,
.testimonial-area,
.blog-area {
    background-color: var(--color-background);
}

/* Sección alterna 2 (Olive) */
.apartment-offer-two,
.counter-area,
.efficiency-area,
.development-area {
    background-color: var(--color-accent);
}

/* Sección con bg oscuro */
.project-area {
    background-color: #FAF8F5;
}

/* ==========================================================
   9. OFERTAS / OFFER ITEMS
   ========================================================== */
.offer-item {
    border-color: var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.offer-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.offer-item h3 {
    color: var(--color-primary);
}
.offer-item i {
    color: var(--color-accent);
}

.offer-item-bg::before {
    background-color: var(--color-secondary);
}
.offer-item-bg:hover {
    border-color: var(--color-secondary);
}
.offer-item-bg.active {
    border-color: var(--color-secondary);
}

.offer-item-bg2 {
    background-color: #FFFFFF;
    border: none !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.offer-item-bg2::before {
    background-color: var(--color-primary) !important;
}
.offer-item-bg2:hover::before {
    background-color: var(--color-primary) !important;
}
.offer-item-bg2:hover i {
    color: var(--color-accent);
}
.offer-item-bg2.active::before {
    background-color: var(--color-primary);
}
.offer-item-bg2.active i {
    color: var(--color-accent);
}

/* ==========================================================
   10. INNOVATION / DEVELOPMENT CARDS
   ========================================================== */
.orgin-card,
.innovation-content,
.development-card,
.efficiency-card {
    border-radius: var(--radius);
    transition: var(--transition);
}

/* ==========================================================
   11. FORMULARIOS
   ========================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select,
.form-control {
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background-color: #FFFFFF;
    color: var(--color-text);
    transition: var(--transition);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(77, 71, 56, 0.1);
    outline: none;
}

/* Botón submit del formulario */
.contact-form button[type="submit"],
.contact-form .default-btn {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-radius: var(--radius);
    border: none;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.contact-form button[type="submit"]:hover,
.contact-form .default-btn:hover {
    background-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

/* ==========================================================
   12. MAP CONTENT BOXES
   ========================================================== */
.map-content .map-content-left {
    background-color: var(--color-secondary);
    border-radius: var(--radius);
}
.map-content .map-content-right {
    background-color: var(--color-primary);
    border-radius: var(--radius);
}
.map-content .map-content-left:hover {
    background-color: var(--color-primary);
}
.map-content .map-content-right:hover {
    background-color: var(--color-secondary);
}

/* ==========================================================
   13. FOOTER — Forest background, sin márgenes extra
   ========================================================== */
.footer-area {
    background-color: var(--color-primary);
    margin: 0;
}
.footer-top {
    background-color: var(--color-primary);
    padding-left: 0;
    padding-right: 0;
}
.footer-bottom {
    background-color: #3D3830;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Quitar margen inferior cuando el footer está dentro de otra sección */
.project-area .footer-area,
section .footer-area {
    margin-bottom: 0;
}
/* Footer full-width — pegado a bordes (rompe el container padre) */
.footer-area,
.footer-top,
.footer-bottom {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
.footer-area .container,
.footer-top .container,
.footer-bottom .container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}
.single-footer-widget h3 {
    color: var(--color-text-white);
}
.single-footer-widget p {
    color: var(--color-accent);
}
.single-footer-widget .footer-list li a {
    color: var(--color-accent);
}
.single-footer-widget .footer-list li a:hover {
    color: var(--color-text-white);
}
.single-footer-widget .footer-list li a i {
    color: var(--color-accent);
}
.single-footer-widget .footer-contact-list li {
    color: var(--color-accent);
}
.single-footer-widget .footer-contact-list li span {
    color: var(--color-text-white);
}
.single-footer-widget .footer-contact-list li a {
    color: var(--color-accent);
}
.single-footer-widget .footer-contact-list li a:hover {
    color: var(--color-text-white);
}
.single-footer-widget .social-link li a {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-accent);
    border-radius: 50%;
    transition: var(--transition);
}
.single-footer-widget .social-link li a:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
}
.footer-bottom p {
    color: var(--color-accent);
}
.footer-bottom p a {
    color: var(--color-text-white);
}

/* Crédito de diseño (JTM) */
.footer-bottom p .footer-sep {
    opacity: .55;
    padding: 0 6px;
}
.footer-bottom p a.jtm-credit {
    color: var(--color-text-white);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 1px;
    transition: var(--transition);
}
.footer-bottom p a.jtm-credit:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.footer-profile .content span {
    color: var(--color-text-white);
}
.footer-profile .content a {
    color: var(--color-accent);
}
.single-footer-widget .footer-profile li .content {
    margin-left: 0;
    padding-top: 0;
}
.single-footer-widget .footer-contact-list li,
.single-footer-widget .footer-profile li .content,
.single-footer-widget .footer-contact-list li a,
.single-footer-widget .footer-profile li .content a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================
   14. INNER BANNER / BREADCRUMB
   ========================================================== */
.inner-banner {
    background-color: var(--color-primary);
}
.inner-banner h3 {
    color: var(--color-text-white);
}
.inner-banner ul li a {
    color: var(--color-accent);
}
.inner-banner ul li {
    color: var(--color-text-white);
}

/* ==========================================================
   15. COUNTER / STATS
   ========================================================== */
.counter-area {
    background-color: var(--color-primary);
}
.counter-color {
    color: var(--color-accent) !important;
}
.single-counter i {
    color: var(--color-accent);
}
.single-counter .content h3 {
    color: var(--color-text-white);
}
.single-counter .content span {
    color: var(--color-accent);
}

/* ==========================================================
   16. PROJECT DETAILS
   ========================================================== */
.project-details-content span {
    color: var(--color-secondary);
}
.project-details-content h2 {
    color: var(--color-primary);
}
.project-list li {
    color: var(--color-text);
}
.project-list li i {
    color: var(--color-secondary);
}

/* ==========================================================
   17. CONTACT / SERVICE CARDS
   ========================================================== */
.contact-info-card,
.service-card {
    background-color: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.contact-info-card:hover,
.service-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.contact-info-card i,
.service-card i {
    color: var(--color-secondary);
}
.contact-info-card h3,
.service-card h3 {
    color: var(--color-primary);
}
.contact-info-card p a,
.service-card p a {
    color: var(--color-secondary);
}
.contact-info-card p a:hover,
.service-card p a:hover {
    color: var(--color-primary);
}

/* ==========================================================
   18. HOUSE / APARTMENT SLIDERS
   ========================================================== */
.apartment-item ul li a {
    color: var(--color-secondary);
}
.apartment-item ul li a:hover {
    color: var(--color-primary);
}

.house-content-two h2 {
    color: var(--color-primary);
}
.house-list li {
    color: var(--color-text-light);
}
.house-list li i {
    color: var(--color-secondary);
}

/* ==========================================================
   19. FAQ / ACCORDION
   ========================================================== */
.accordion-button:not(.collapsed) {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}
.accordion-button:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(77, 71, 56, 0.15);
}

/* ==========================================================
   20. PAGINATION
   ========================================================== */
.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.page-link {
    color: var(--color-primary);
}
.page-link:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* ==========================================================
   21. BACK TO TOP
   ========================================================== */
.back-to-top {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.back-to-top:hover {
    background-color: var(--color-secondary);
    transform: translateY(-3px);
}

/* ==========================================================
   22. TESTIMONIALS
   ========================================================== */
.testimonial-card {
    background-color: #FFFFFF;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.testimonial-card:hover {
    box-shadow: var(--shadow-md);
}

/* ==========================================================
   23. GALLERY ITEMS
   ========================================================== */
.project-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.project-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* ==========================================================
   24. PROYECTOS-ROW (Side-by-side sections)
   ========================================================== */
.proyectos-row .blog-area,
.proyectos-row .project-area {
    margin-bottom: 0;
    padding-top: 0;
    height: 100%;
}
.proyectos-row .section-title-two h2 {
    min-height: 150px;
}

/* ==========================================================
   25. BLOG / NEWS
   ========================================================== */
.blog-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.blog-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.blog-card:hover .content a h3 {
    color: var(--color-secondary);
}

/* ==========================================================
   26. TEAM CARDS
   ========================================================== */
.team-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.team-card:hover {
    box-shadow: var(--shadow-md);
}
.team-card .content h3 {
    color: var(--color-primary);
}
.team-card .content span {
    color: var(--color-secondary);
}

/* ==========================================================
   6. OFTOP SLIDER (Slider Clásico) — mejoras de visibilidad
   ========================================================== */
/* Slider area — fondo neutro */
.oftop-slider-area {
    background-color: var(--color-primary);
}

/* Botones del slider — siempre visibles */
.oftop-slider-content .oftop-slider-btn .price-btn {
    background-color: rgba(77, 71, 56, 0.5);
    border-color: var(--color-accent);
}
.oftop-slider-content .oftop-slider-btn .price-btn:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* Ring button */
.oftop-slider-content .oftop-slider-btn .ring-btn {
    background-color: rgba(77, 71, 56, 0.5);
    border-color: var(--color-accent);
}

/* ==========================================================
   28. PROGRESS / LOADING / MISC
   ========================================================== */
.preloader {
    background-color: var(--color-primary);
}

/* Property Details Section — fondo claro, texto oscuro */
.property-details {
    background-color: #FFFFFF;
}
.property-details-list ul li i {
    color: var(--color-secondary);
}
.property-details-list ul li span {
    color: var(--color-text-light);
}
.property-details-list ul li a {
    color: var(--color-primary);
}
.property-details-list ul li:hover a {
    color: var(--color-secondary);
}

/* Room Details */
.room-details-area {
    background-color: #FAF8F5;
}

/* ==========================================================
   29. ANIMACIONES Y TRANSICIONES GLOBALES
   ========================================================== */
*,
*::before,
*::after {
    transition-timing-function: ease;
}

/* Hover elegante en cards genéricas */
[class*="-card"]:hover {
    transition: var(--transition);
}

/* Botones — suavidad */
button,
a.default-btn,
.default-btn {
    transition: background-color var(--transition),
                color var(--transition),
                transform var(--transition),
                box-shadow var(--transition);
}

/* ==========================================================
   30. ACCESIBILIDAD — Contraste AA+
   ========================================================== */
/* Asegurar que texto sobre fondos oscuros sea legible */
.oftop-nav nav .navbar-nav .nav-item a,
.sticky-nav .oftop-nav .navbar-nav .nav-item a,
.footer-top {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus visible para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================
   31. THEME DARK — Compatibilidad (si se activa)
   ========================================================== */
.theme-dark .property-card .content {
    background-color: #2A2723;
    border-color: #3D3830;
}
.theme-dark .property-card .content a h3 {
    color: var(--color-accent);
}
.theme-dark .property-card .content .learn-more-btn:hover {
    color: var(--color-accent);
}
.theme-dark .single-footer-widget h3,
.theme-dark .single-footer-widget p {
    color: var(--color-accent);
}

/* ==========================================================
   32. MENU MOVIL (meanmenu) — debe verse igual que la barra de PC
   Antes heredaba el naranja #db8c23 de meanmenu.css, mientras que
   en PC la barra es Forest #4D4738. Ahora coinciden.
   ========================================================== */
@media only screen and (max-width: 991px) {

    /* Barra superior movil = mismo color que la barra de PC */
    html:not(.theme-dark) .mean-container .mean-bar {
        background-color: var(--color-primary);
        border-bottom: none;
    }

    /* Icono hamburguesa: blanco sobre fondo oscuro */
    .mean-container a.meanmenu-reveal,
    .mean-container a.meanmenu-reveal.meanclose {
        color: var(--color-text-white);
    }
    .mean-container a.meanmenu-reveal span {
        background: var(--color-text-white);
    }

    /* Logo movil */
    .mobile-nav .logo img {
        max-height: 42px;
        width: auto;
    }

    /* Panel desplegable: blanco con enlaces en tono forest */
    .mean-container .mean-nav {
        background: var(--color-surface);
    }
    .mean-container .mean-nav ul li a {
        color: var(--color-text);
        border-top: 1px solid var(--color-border);
        text-transform: capitalize;
    }
    .mean-container .mean-nav ul li a.active {
        color: var(--color-primary);
        font-weight: 600;
    }
    .mean-container .mean-nav ul li a:hover,
    .mean-container .mean-nav ul li a:focus {
        background: rgba(77, 71, 56, 0.07);
        color: var(--color-primary);
    }
    .mean-container .mean-nav ul li li a {
        color: var(--color-text-light);
        border-top: 1px solid var(--color-border);
    }
    .mean-container .mean-nav ul li a.mean-expand {
        color: var(--color-primary);
    }
    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: rgba(77, 71, 56, 0.1);
    }
}

/* ==========================================================
   FIN DEL TEMA FOREST
   ========================================================== */