/* =========================================================================
   Urban Spa — dark warm reskin  (stimuloscenter.com look)
   PRESENTATION ONLY. No WooCommerce / Appointments / WPML data is touched.

   Strategy: the live Divi theme sets a tan palette with high-specificity rules
   (e.g. `body .et_pb_button`, `#page-container #top-header{...!important}`), so
   this file uses `html`-prefixed selectors + !important to out-rank them and
   repaint the whole shell deep dark warm, with gold accents and serif headings.

   Fonts are enqueued from functions.php (Cormorant Garamond + Inter).
   Palette sampled from stimuloscenter.com.
   ========================================================================= */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
	--us-bg:        #1e1913;   /* deep warm base / page shell   */
	--us-bg-2:      #241d15;   /* raised sections               */
	--us-bg-3:      #2d2519;   /* cards / raised surfaces       */
	--us-border:    #4a3d29;   /* hairline borders on dark      */

	--us-text:      #efe7db;   /* primary text on dark          */
	--us-muted:     #bcae98;   /* secondary text                */
	--us-cream:     #f6f2ea;   /* headings / bright text        */
	--us-ink:       #1c160e;   /* text on gold buttons          */

	--us-gold:      #d4af37;   /* accent                        */
	--us-gold-dk:   #b8912b;   /* accent hover                  */
	--us-whatsapp:  #25d366;

	--us-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--us-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--us-radius: 14px;
	--us-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
}

/* ---- 2. Repaint the whole shell dark ------------------------------------ */
html body,
html body #page-container,
html #et-main-area,
html #main-content,
html body.et_cover_background {
	background-color: var(--us-bg) !important;
	background-image: none !important;
}

html body {
	color: var(--us-text) !important;
	font-family: var(--us-sans) !important;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

/* Sections: clear the tan/white FILL colour but KEEP any background image
   (transparent background-color never removes a background-image), so hero /
   photo sections stay intact while flat sections show the dark base. */
html #page-container .et_pb_section {
	background-color: transparent !important;
}
/* Gentle alternating warmth on flat sections. */
html #page-container .et_pb_section:nth-of-type(even) {
	background-color: rgba(255,255,255,.02) !important;
}
/* Dark scrim over photo/parallax sections for text contrast. */
html #page-container .et_pb_section.et_pb_with_background > .et_pb_row {
	position: relative;
}

/* ---- 3. Typography ------------------------------------------------------ */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html .et_pb_module h1, html .et_pb_module h2, html .et_pb_module h3,
html .et_pb_module h4, html .et_pb_module h5, html .et_pb_module h6,
html .et_pb_text h1, html .et_pb_text h2, html .et_pb_text h3 {
	font-family: var(--us-serif) !important;
	font-weight: 500 !important;
	letter-spacing: .01em;
	line-height: 1.12;
	color: var(--us-cream) !important;
}
html body h1, html .et_pb_module h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
html body h2, html .et_pb_module h2 { font-size: clamp(2rem, 3.8vw, 3rem); }

html body p, html body li, html body span:not([class*="menu"]),
html body .et_pb_text_inner, html body .et_pb_blurb_description {
	color: var(--us-text);
}
html body .et_pb_bg_layout_light *,
html body .et_pb_bg_layout_dark * { color: inherit; }
html body .et_pb_bg_layout_light,
html body .et_pb_bg_layout_light p,
html body .et_pb_bg_layout_light li { color: var(--us-text) !important; }

html body a { color: var(--us-gold); }
html body a:hover { color: var(--us-gold-dk); }

/* ---- 4. Buttons — gold pills (match Divi's `body .et_pb_button` weight) -- */
html body .et_pb_button,
html body a.et_pb_button,
html #content input.button,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce .button.alt,
html body .woocommerce #respond input#submit,
html body input.et_pb_button {
	font-family: var(--us-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--us-ink) !important;
	background-color: var(--us-gold) !important;
	border: 1px solid var(--us-gold) !important;
	border-radius: 3px !important;
	padding: .95em 2.1em !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
html body .et_pb_button::after { color: var(--us-ink) !important; }

html body .et_pb_button:hover,
html body a.et_pb_button:hover,
html #content input.button:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover {
	background-color: var(--us-gold-dk) !important;
	border-color: var(--us-gold-dk) !important;
	color: var(--us-ink) !important;
	letter-spacing: 2px !important;
	transform: translateY(-1px);
}

/* Second hero button ("View services") as a gold outline / ghost pill. */
html body .et_pb_button_1,
html body .et_pb_button.us-ghost {
	background-color: transparent !important;
	color: var(--us-gold) !important;
	border-color: var(--us-gold) !important;
}
html body .et_pb_button_1:hover {
	background-color: var(--us-gold) !important;
	color: var(--us-ink) !important;
}

/* WhatsApp stays green. */
html body .urbanspa-whatsapp-reserva__button,
html body a[href*="wa.me"].et_pb_button,
html body a[href*="api.whatsapp.com"].et_pb_button,
.joinchat__button {
	background-color: var(--us-whatsapp) !important;
	border-color: var(--us-whatsapp) !important;
	color: #fff !important;
}

/* ---- 5. Header + top bar + nav ------------------------------------------ */
/* Divi colours this with `.et_secondary_nav_enabled #page-container #top-header`
   (!important), so we match that class + extra elements to out-rank it. */
html body.et_secondary_nav_enabled #page-container #top-header,
html body .et_fixed_nav #page-container .et-fixed-header#top-header,
html body #page-container #top-header {
	background-color: var(--us-bg) !important;
}
html body #top-header .container,
html body #et-secondary-nav { background-color: transparent !important; }
html #main-header,
html .et-fixed-header#main-header {
	background-color: rgba(20,16,11,.92) !important;
	box-shadow: none !important;
}
html #top-menu li a,
html #et-secondary-nav li a { color: var(--us-text) !important; }
html #top-menu li a:hover,
html #et-secondary-nav li a:hover { color: var(--us-gold) !important; }
html #et-secondary-nav li ul,
html #top-menu li ul { background-color: var(--us-bg-3) !important; }

/* Promo banner (Simple Banner plugin) — kill the purple, go dark + gold. */
html .simple-banner,
html #simple-banner,
html .simple-banner-container {
	background-color: var(--us-bg-3) !important;
	color: var(--us-cream) !important;
	border-bottom: 1px solid var(--us-border) !important;
}
html .simple-banner a { color: var(--us-gold) !important; }

/* ---- 6. Cards, accordion, products -------------------------------------- */
html body .et_pb_blurb,
html body .et_pb_blog_grid article.et_pb_post,
html body .woocommerce ul.products li.product,
html body .et_pb_wc_related_products li.product,
html body .et_pb_wc_upsells li.product {
	background: var(--us-bg-3) !important;
	border: 1px solid var(--us-border) !important;
	border-radius: var(--us-radius) !important;
	box-shadow: var(--us-shadow);
}

html body .woocommerce .price,
html body .woocommerce ul.products li.product .price,
html body .et_pb_module .price {
	color: var(--us-gold) !important;
	font-weight: 600 !important;
}
html body .woocommerce .price del { color: var(--us-muted) !important; }

/* FAQ accordion / toggles. */
html body .et_pb_accordion .et_pb_toggle,
html body .et_pb_toggle {
	background: var(--us-bg-3) !important;
	border: 1px solid var(--us-border) !important;
	border-radius: 10px !important;
	margin-bottom: .75rem !important;
}
html body .et_pb_toggle_title { color: var(--us-cream) !important; }
html body .et_pb_toggle_open { background: var(--us-bg-2) !important; }
html body .et_pb_accordion .et_pb_toggle_title::before { color: var(--us-gold) !important; }

/* ---- 7. Footer ---------------------------------------------------------- */
html #main-footer,
html #footer-bottom {
	background-color: #17120c !important;
	color: var(--us-muted) !important;
}
html #main-footer h1, html #main-footer h2,
html #main-footer h3, html #main-footer h4 { color: var(--us-cream) !important; }
html #main-footer a { color: var(--us-muted) !important; }
html #main-footer a:hover { color: var(--us-gold) !important; }

/* =========================================================================
   ELEMENTOR LAYER — the homepage (and header/footer) are built in Elementor,
   whose per-element rules (e.g. `.elementor-404633 .elementor-element-xxx
   .elementor-button{background:#D6B981}`) are high-specificity, so every rule
   here uses !important to win. This is what actually transforms the page.
   ========================================================================= */

/* Darken all Elementor section/column/container FILLS. Clearing background-color
   keeps any background-IMAGE (hero photos stay), while flat tan/white/cream
   sections fall through to the deep dark base. Also kills the tan motion-effect
   overlay that formed the beige surround behind the hero. */
html body .elementor-section,
html body .elementor-top-section,
html body .elementor-inner-section,
html body .elementor-column-wrap,
html body .elementor-widget-wrap,
html body .e-con,
html body .e-con-inner {
	background-color: transparent !important;
}

/* Motion-effects layers carry the beige/tan/cream "panels" (as solid colours AND
   as a CSS gradient on "Our Story"), plus the hero photo. Nuke ALL of them
   (background shorthand clears colour + gradient + image)... */
html body .elementor-motion-effects-layer {
	background: transparent !important;
}
/* ...then restore ONLY the hero photo layer. */
html body .elementor-element-6df80cc .elementor-motion-effects-layer {
	background-image: url("https://healingspa.es/wp-content/uploads/2026/07/hs-portada-inicio.png") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
/* The "Our Story" section is an Elementor container with id="historia" and custom
   CSS `#historia{background:linear-gradient(...)}` — an ID selector, so only an
   id-based override (or !important on one) beats it. */
html body #historia {
	background: transparent !important;
	background-image: none !important;
}

/* Elementor buttons -> gold pills (covers both the filled and white/outline
   variants used on the page). */
html body .elementor-button,
html body a.elementor-button,
html body .elementor-button-wrapper .elementor-button {
	background-color: var(--us-gold) !important;
	color: var(--us-ink) !important;
	fill: var(--us-ink) !important;
	border: 1px solid var(--us-gold) !important;
	border-radius: 3px !important;            /* rectangular, like stimuloscenter */
	padding: 17px 40px !important;
	font-family: var(--us-sans) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	transition: background-color .18s ease, color .18s ease, transform .18s ease !important;
}
html body .elementor-button:hover,
html body a.elementor-button:hover {
	background-color: var(--us-gold-dk) !important;
	color: var(--us-ink) !important;
	transform: translateY(-1px);
}
/* Secondary hero buttons ("View Services" etc.) -> gold OUTLINE to pair with the
   filled primary, exactly like the stimuloscenter hero. */
html body .elementor-element-c63c005 .elementor-button,
html body .elementor-element-cf5222e .elementor-button,
html body .elementor-button.us-outline {
	background-color: transparent !important;
	color: var(--us-gold) !important;
	fill: var(--us-gold) !important;
	border: 1px solid var(--us-gold) !important;
}
html body .elementor-element-c63c005 .elementor-button:hover,
html body .elementor-element-cf5222e .elementor-button:hover {
	background-color: var(--us-gold) !important;
	color: var(--us-ink) !important;
	fill: var(--us-ink) !important;
}
/* WhatsApp Elementor buttons stay green. */
html body .elementor-button[href*="wa.me"],
html body .elementor-button[href*="whatsapp"] {
	background-color: var(--us-whatsapp) !important;
	border-color: var(--us-whatsapp) !important;
	color: #fff !important; fill: #fff !important;
}

/* Elementor headings -> serif; recolour the tan (#D6B981) headings to cream. */
html body .elementor-heading-title {
	font-family: var(--us-serif) !important;
	color: var(--us-cream) !important;
	font-weight: 500 !important;
}

/* Elementor body copy -> readable cream on the new dark base. */
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor *,
html body .elementor-widget-container > p,
html body .elementor-widget-container li,
html body .elementor-icon-list-text {
	color: var(--us-text) !important;
}
html body .elementor-widget-container a { color: var(--us-gold) !important; }

/* Elementor cards / boxes / image-boxes -> warm dark surfaces. */
html body .elementor-widget-icon-box .elementor-icon-box-wrapper,
html body .elementor-widget-image-box .elementor-image-box-content,
html body .elementor-widget-price-box,
html body .e-con.has-background {
	color: var(--us-text) !important;
}

/* Elementor ACCORDION (the FAQ) — was dark-text-on-dark and unreadable. */
html body .elementor-accordion .elementor-accordion-item {
	background: var(--us-bg-3) !important;
	border: 1px solid var(--us-border) !important;
	border-radius: 10px !important;
	margin-bottom: .6rem !important;
	overflow: hidden;
}
html body .elementor-accordion .elementor-tab-title,
html body .elementor-accordion .elementor-accordion-title {
	color: var(--us-cream) !important;
	font-family: var(--us-serif) !important;
	font-size: 1.2rem !important;
	background: transparent !important;
}
html body .elementor-accordion .elementor-tab-title.elementor-active,
html body .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: var(--us-gold) !important;
}
html body .elementor-accordion .elementor-tab-content,
html body .elementor-accordion .elementor-tab-content * {
	color: var(--us-text) !important;
	background: transparent !important;
}
html body .elementor-accordion .elementor-accordion-icon,
html body .elementor-accordion .elementor-accordion-icon * {
	color: var(--us-gold) !important;
	fill: var(--us-gold) !important;
}

/* Google Reviews cards. The plugin's own CSS forces a light card and loads after
   ours, so instead of fighting it we keep the light card (a clean testimonial
   accent) and make ALL its text DARK — guaranteed readable. */
html body .grw-review .grw-review-inner.grw-backgnd {
	background-color: #ffffff !important;
	border-radius: var(--us-radius) !important;
}
html body .grw-review,
html body .grw-review p,
html body .grw-review div,
html body .grw-review span:not([class*="star"]):not([class*="Star"]) {
	color: #2a2118 !important;   /* dark ink, readable on the white card */
}
html body .grw-review [class*="name"],
html body .grw-review a[class*="name"] {
	color: #1c160e !important;
	font-weight: 600 !important;
}

/* ---- Hero: full-bleed cinematic (like the stimuloscenter hero) ---------- */
/* Drop the 40px rounded corners + side padding so the photo runs edge to edge. */
html body .elementor-element-6df80cc {
	--border-radius: 0px !important;
	border-radius: 0 !important;
	--padding-left: 0px !important;
	--padding-right: 0px !important;
	/* keep the theme's own fixed hero height (~800px desktop); avoid vh so it
	   stays predictable across viewports. */
}
/* Bigger, more dramatic serif hero headline. */
html body .elementor-element-118845a .elementor-heading-title {
	font-family: var(--us-serif) !important;
	font-size: clamp(3.2rem, 7vw, 6rem) !important;
	line-height: 1.02 !important;
	font-weight: 500 !important;
	color: var(--us-cream) !important;
}
/* [eliminado 2026-07-14] El titular del hero llevaba un ::before que inyectaba
   "1850 · Urban Spa · Barcelona" por CSS (no estaba en el HTML ni en la foto). */


/* Reusable eyebrow: add class `us-eyebrow` to any Elementor heading to get the
   gold uppercase label treatment (for section eyebrows added in the builder). */
html body .us-eyebrow .elementor-heading-title,
html body .elementor-heading-title.us-eyebrow {
	font-family: var(--us-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	color: var(--us-gold) !important;
}

/* =========================================================================
   DIVI THEME BUILDER bodies (single product / service pages). These live in
   `.et-db #et-boc .et-l` (NOT #page-container), and their sections/rows/tabs
   default to white/cream (#fff / #f8f6f0), which left product pages light and
   made the cream title invisible. Darken them and flip text to cream.
   ========================================================================= */
html .et-db #et-boc .et-l .et_pb_section,
html .et-db #et-boc .et-l .et_pb_row,
html .et-db #et-boc .et-l .et_pb_row_inner,
html .et-db #et-boc .et-l .et_pb_column,
html .et-db #et-boc .et-l .et_pb_all_tabs,
html .et-db #et-boc .et-l .et_pb_tabs,
html .et-db #et-boc .et-l ul.et_pb_tabs_controls,
html .et-db #et-boc .et-l ul.et_pb_tabs_controls li,
html #main-content {
	background-color: transparent !important;
}
html .et-db #et-boc .et-l,
html .et-db #et-boc .et-l p,
html .et-db #et-boc .et-l li,
html .et-db #et-boc .et-l span:not([class*="price"]),
html .et-db #et-boc .et-l .et_pb_text_inner,
html .et-db #et-boc .et-l .et_pb_tab {
	color: var(--us-text) !important;
}
html .et-db #et-boc .et-l h1,
html .et-db #et-boc .et-l h2,
html .et-db #et-boc .et-l h3,
html .et-db #et-boc .et-l h4,
html .et-db #et-boc .et-l .product_title,
html .et-db #et-boc .et-l .et_pb_tabs_controls li a {
	color: var(--us-cream) !important;
	font-family: var(--us-serif) !important;
}
/* Tabs: gold active tab, hairline borders. */
html .et-db #et-boc .et-l ul.et_pb_tabs_controls li.et_pb_tab_active { border-bottom: 2px solid var(--us-gold) !important; }
html .et-db #et-boc .et-l ul.et_pb_tabs_controls li.et_pb_tab_active a { color: var(--us-gold) !important; }
html .et-db #et-boc .et-l .et_pb_tabs { border: 1px solid var(--us-border) !important; }

/* ---- 8. Misc ------------------------------------------------------------ */
::selection { background: var(--us-gold); color: var(--us-ink); }
html body hr { border-color: var(--us-border) !important; }

/* Opt-in light section: add class `us-cream` in the builder to flip a section
   to the cream background with dark ink text. */
html body .et_pb_section.us-cream { background-color: var(--us-cream) !important; }
html body .et_pb_section.us-cream,
html body .et_pb_section.us-cream p,
html body .et_pb_section.us-cream li,
html body .et_pb_section.us-cream h1,
html body .et_pb_section.us-cream h2,
html body .et_pb_section.us-cream h3 { color: var(--us-ink) !important; }