/* ================================================================
   Child Theme — "Noir & Or" Dark Luxury Palette
   Diseño: fondo negro profundo + Oro Museo genuino (#D4AF37)
   Versión 2.0 — Premium Edition
   ================================================================ */

/* ----------------------------------------------------------------
   GOOGLE FONTS — asegurar carga de Playfair Display
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ----------------------------------------------------------------
   CSS CUSTOM PROPERTIES — Paleta "Noir & Or"
   ---------------------------------------------------------------- */
:root {
	/* Fondos */
	--dark-bg:     #09090B;   /* Negro puro con leve tinte frío — más profundo */
	--darker-bg:   #050507;   /* Para footer y capas inferiores */
	--panel-bg:    #111116;   /* Paneles, cards, widgets — levemente azulado */
	--panel-hover: #16161C;   /* Estado hover de paneles */

	/* Oro Museo — el verdadero color del oro */
	--gold-accent: #D4AF37;   /* Oro clásico brillante — el real */
	--gold-bright: #F0C93A;   /* Oro vivo en hover/focus */
	--gold-dim:    #A8892A;   /* Oro apagado para estados secundarios */
	--gold-glow:   rgba(212, 175, 55, 0.18); /* Aura dorada */
	--gold-shine:  rgba(212, 175, 55, 0.06); /* Brillo sutil en fondos */

	/* Tipografía */
	--text-light:  #F5F0E8;   /* Blanco cálido — más elegante que blanco puro */
	--text-lighter:#FFFFFF;
	--text-muted:  #A09080;   /* Gris tostado cálido — no frío */
	--text-subtle: #6B5F52;   /* Para texto muy secundario */

	/* Bordes */
	--border-dark: #1C1C22;   /* Separadores invisibles */
	--border-mid:  #2A2A32;   /* Bordes visibles sutiles */
	--border-gold: #D4AF37;   /* Bordes dorados */
	--border-gold-dim: rgba(212, 175, 55, 0.3); /* Bordes dorados sutiles */

	/* Efectos */
	--radius-sm:   3px;
	--radius-md:   6px;
	--shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.6);
	--shadow-gold: 0 0 20px rgba(212, 175, 55, 0.2);
	--transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   1. GLOBAL — FONDOS Y TIPOGRAFÍA BASE
   ================================================================ */
body,
.rh_wrap,
#page-container,
.rh_page,
.rh_section,
.rh_content,
.rh_page__wrap,
.elementor-page {
	background-color: var(--dark-bg) !important;
	color: var(--text-light) !important;
	font-family: 'Inter', sans-serif !important;
}

/* Headings con gradiente dorado — efecto premium */
h1, h2, h3, h4, h5, h6,
.rh_page__title,
.rh_section__title,
.rh_prop_card__title a,
.rh_list_card__title a {
	font-family: 'Playfair Display', serif !important;
	background: linear-gradient(135deg, #D4AF37 0%, #F0C93A 50%, #A8892A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/* Fallback para navegadores sin soporte */
	color: var(--gold-accent);
}

p, li, blockquote {
	color: var(--text-muted);
	line-height: 1.75;
}

span {
	color: inherit;
}

.rh_prop_card__priceLabel {
	color: var(--text-muted);
}

a {
	color: var(--gold-accent);
	transition: var(--transition);
	text-decoration: none;
}
a:hover {
	color: var(--gold-bright);
}

/* Línea divisora dorada elegante */
hr {
	border: none;
	border-top: 1px solid var(--border-gold-dim);
}

/* ================================================================
   2. HEADER & NAVEGACIÓN
   ================================================================ */
.rh_header_modern,
.rh_header,
.rh-header-advance,
.rh_menu_modern,
.rh_menu_classic,
.site-header,
.header-wrapper,
.elementor-location-header {
	background-color: rgba(9, 9, 11, 0.96) !important;
	border-bottom: 1px solid var(--border-gold-dim) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
}

.rh_menu__user a,
.main-menu ul li a,
.rh_menu_modern ul li a {
	color: var(--text-light) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	transition: var(--transition) !important;
}
.main-menu ul li a:hover,
.rh_menu_modern ul li a:hover {
	color: var(--gold-accent) !important;
}

/* Submenu oscuro */
.main-menu ul ul,
.rh_menu_modern ul ul {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-gold-dim) !important;
	box-shadow: var(--shadow-dark) !important;
}

/* ================================================================
   3. BOTONES & FORMULARIOS
   ================================================================ */

/* --- Botones principales --- */
.rh_btn,
.rh_btn--primary,
.rh_btn--secondary,
button,
input[type="submit"],
input[type="button"],
.elementor-button,
.submit-button {
	background: linear-gradient(135deg, #D4AF37, #A8892A) !important;
	color: #09090B !important;
	border: 1px solid var(--gold-accent) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	border-radius: var(--radius-sm) !important;
	transition: var(--transition) !important;
	box-shadow: 0 2px 12px var(--gold-glow) !important;
}

.rh_btn:hover,
button:hover,
input[type="submit"]:hover,
.elementor-button:hover {
	background: transparent !important;
	color: var(--gold-accent) !important;
	box-shadow: 0 0 24px var(--gold-glow), inset 0 0 0 1px var(--gold-accent) !important;
}

/* --- Campos de texto --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select,
.rh_prop_search__select {
	background-color: var(--panel-bg) !important;
	color: var(--text-light) !important;
	border: 1px solid var(--border-mid) !important;
	border-radius: var(--radius-sm) !important;
	font-family: 'Inter', sans-serif !important;
	transition: var(--transition) !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
	color: var(--text-subtle) !important;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--gold-accent) !important;
	box-shadow: 0 0 0 3px var(--gold-glow) !important;
	outline: none !important;
}

/* Labels de formularios */
label,
.rh_form label {
	color: var(--text-muted) !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}

/* ================================================================
   4. PROPERTY CARDS & WIDGETS
   ================================================================ */
.rh_prop_card,
.rh_list_card,
.rh_slide__desc,
.rh_widget,
aside.sidebar .widget,
.rh_prop_card__details,
.rh_property__schedule_tour,
.rh_property_mortgage,
.rh_property__comments,
#respond,
.rh_agent_form,
.rh_agent_profile,
.rh_property_agent,
.rh_property_agent_detail,
.widget,
.rh_sidebar .widget,
.rh_property__common_note,
.rh_property__meta,
.rh_property__meta_wrap,
.rh_property__features_wrap,
.rh_property__additional_details,
.rh_property__tour,
.rh_property__video,
.rh_property__map_wrap {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark) !important;
	box-shadow: var(--shadow-dark) !important;
	border-radius: var(--radius-md) !important;
	transition: var(--transition) !important;
}

/* Hover con aura dorada */
.rh_prop_card:hover,
.rh_list_card:hover {
	border-color: var(--border-gold-dim) !important;
	box-shadow: var(--shadow-dark), var(--shadow-gold) !important;
	transform: translateY(-3px) !important;
}

/* Precios en dorado brillante */
.rh_prop_card__price,
.rh_list_card__price,
.price {
	color: var(--gold-accent) !important;
	font-weight: 700 !important;
	font-family: 'Playfair Display', serif !important;
	font-size: 1.1em !important;
}

/* Badge de estado (en venta, rematado, etc.) */
.rh_prop_card__badge,
.rh_label,
.rh_prop_card__label {
	background: linear-gradient(135deg, #D4AF37, #A8892A) !important;
	color: #09090B !important;
	font-weight: 600 !important;
	border-radius: var(--radius-sm) !important;
}

/* ================================================================
   5. BARRA DE BÚSQUEDA AVANZADA
   ================================================================ */
.rh_prop_search,
.rh_prop_search__form,
.advance-search {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-gold-dim) !important;
	box-shadow: var(--shadow-dark) !important;
}

.rh_prop_search__advance {
	background-color: var(--darker-bg) !important;
	border-top: 1px solid var(--border-dark) !important;
}

.rh_prop_search__option label,
.advance-search label {
	color: var(--gold-accent) !important;
}

/* El botón de búsqueda principal */
.rh_prop_search__submit,
.advance-search .search-submit {
	background: linear-gradient(135deg, #D4AF37, #A8892A) !important;
	color: #09090B !important;
	font-weight: 700 !important;
}

/* ================================================================
   6. CALCULADORA DE HIPOTECA & SIDEBAR WIDGETS
   ================================================================ */
.rh_property_mortgage .rh_property_mortgage__chart circle,
.rh_property_mortgage .donut-ring {
	stroke: var(--border-mid) !important;
}
.rh_property_mortgage .rh_property_mortgage__chart .donut-segment {
	stroke: var(--gold-accent) !important;
}
.rh_property_mortgage__result,
.rh_property_mortgage__total {
	color: var(--gold-accent) !important;
	font-family: 'Playfair Display', serif !important;
}

/* Slider (range input) en dorado */
input[type="range"] {
	accent-color: var(--gold-accent) !important;
}

/* ================================================================
   7. COMENTARIOS / LEAVE A REPLY
   ================================================================ */
.comment-respond,
#respond,
.rh_property__comments,
.comment-form,
.comments-area {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark) !important;
	border-radius: var(--radius-md) !important;
	padding: 24px !important;
}

.comment-list .comment-body {
	background-color: var(--panel-hover) !important;
	border: 1px solid var(--border-dark) !important;
	border-radius: var(--radius-sm) !important;
}

/* ================================================================
   8. FOOTER
   ================================================================ */
.rh_footer,
.site-footer,
.elementor-location-footer {
	background-color: var(--darker-bg) !important;
	border-top: 1px solid var(--border-gold-dim) !important;
	color: var(--text-muted) !important;
}

.rh_footer::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.rh_footer__title,
.rh_footer h3,
.footer-widget-title {
	background: linear-gradient(135deg, #D4AF37 0%, #F0C93A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: var(--gold-accent);
	font-family: 'Playfair Display', serif !important;
}

/* ================================================================
   9. ELEMENTOR — OVERRIDES GLOBALES
   ================================================================ */
.elementor-section,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-background-overlay,
.elementor-container,
.elementor-widget-container,
.elementor-widget-text-editor,
.elementor-text-editor {
	background-color: transparent !important;
	color: var(--text-light) !important;
}

body .elementor-section.elementor-section-boxed > .elementor-container {
	background-color: transparent !important;
}

/* Headings de Elementor con gradiente dorado */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-icon-box-title,
.elementor-image-box-title {
	background: linear-gradient(135deg, #D4AF37 0%, #F0C93A 50%, #A8892A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: var(--gold-accent);
	font-family: 'Playfair Display', serif !important;
}

.elementor-icon-box-description,
.elementor-image-box-description,
.elementor-text-editor p {
	color: var(--text-muted) !important;
}

/* Divider dorado con glow */
.elementor-widget-divider .elementor-divider-separator {
	border-color: var(--border-gold-dim) !important;
}

/* Iconos Elementor en dorado */
.elementor-icon i,
.elementor-icon svg,
.elementor-icon-box-icon i {
	color: var(--gold-accent) !important;
	fill: var(--gold-accent) !important;
}

/* ================================================================
   10. EFECTOS PREMIUM — ANIMACIONES & MICRO-INTERACCIONES
   ================================================================ */

/* Shimmer sutil en cards al hacer hover */
@keyframes gold-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}

/* Separadores decorativos en secciones */
.rh_section__title::after,
.rh_page__title::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background: linear-gradient(90deg, #D4AF37, #F0C93A);
	margin-top: 10px;
	border-radius: 2px;
}

/* Scroll suave global */
html {
	scroll-behavior: smooth;
}

/* Selection color — cuando el usuario selecciona texto */
::selection {
	background-color: var(--gold-glow);
	color: var(--gold-bright);
}

/* Scrollbar personalizada (Chrome/Edge) */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: var(--darker-bg);
}
::-webkit-scrollbar-thumb {
	background: var(--gold-dim);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--gold-accent);
}

/* ================================================================
   11. FORCE OVERRIDE — Schedule Tour & Mortgage Widgets
   Estos widgets tienen background inline/propio del tema
   ================================================================ */

/* Schedule A Tour — fondo oscuro con borde dorado sutil */
.rh_property__schedule_tour,
.rh_property__schedule_tour *:not(input):not(textarea):not(button):not(select),
.si-schedule-property,
.rh-schedule-tour-wrap,
[class*="schedule_tour"],
[class*="schedule-tour"] {
	background-color: var(--panel-bg) !important;
	color: var(--text-light) !important;
}
.rh_property__schedule_tour {
	border: 1px solid var(--border-gold-dim) !important;
}

/* Mortgage Calculator — fondo oscuro */
.rh_property_mortgage,
.rh_property_mortgage *:not(input):not(canvas):not(svg):not(circle):not(path),
[class*="mortgage"] {
	background-color: var(--panel-bg) !important;
	color: var(--text-light) !important;
}
.rh_property_mortgage {
	border: 1px solid var(--border-gold-dim) !important;
}

/* Leave a Reply — fondo oscuro */
#respond,
.comment-respond,
.rh_property__comments,
[class*="comments"] {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark) !important;
}

/* Inputs dentro de estos widgets */
.rh_property__schedule_tour input,
.rh_property__schedule_tour textarea,
.rh_property__schedule_tour select,
.rh_property_mortgage input {
	background-color: var(--darker-bg) !important;
	border: 1px solid var(--border-mid) !important;
	color: var(--text-light) !important;
}

/* Toggle "In Person / Virtual" — estilo premium */
.rh_schedule_tour__type_selector,
[class*="type_selector"],
[class*="tour_type"] {
	background-color: var(--border-dark) !important;
	border-radius: 20px !important;
}
.rh_schedule_tour__type_selector .active,
[class*="type_selector"] .selected,
[class*="type_selector"] input:checked + label {
	background: linear-gradient(135deg, #D4AF37, #A8892A) !important;
	color: #09090B !important;
}

/* Sidebar de texto junto al formulario */
.rh_property__schedule_tour .rh_property__schedule_widget_sidebar,
[class*="schedule_widget_sidebar"] {
	background-color: transparent !important;
}
.rh_property__schedule_tour h3,
.rh_property__schedule_tour h4,
.rh_property__schedule_tour p {
	color: var(--text-muted) !important;
}
.rh_property__schedule_tour h2,
.rh_property__schedule_tour h3 strong {
	color: var(--gold-accent) !important;
}