/*
Theme Name: Jade Spa
Theme URI: https://quebuenaidea.com.ec/
Author: Que Buena Idea
Author URI: https://quebuenaidea.com.ec/
Description: Tema hijo ultra ligero de Hello Elementor para Jade Spa, con paleta dorada y neutros suaves pensados para spa.
Version: 1.0.1
Template: hello-elementor
Text Domain: jade-spa
*/

/* ================== Paleta Jade Spa ================== */
:root {
  /* Dorado principal (logo) */
  --jade-gold: #c89b3c;
  --jade-gold-dark: #a47412;
  --jade-gold-soft: #f4e0b6;

  /* Neutros para spa */
  --jade-cream: #fff9f2;
  --jade-white: #ffffff;
  --jade-charcoal: #111111;
  --jade-text: #2b2b2b;
}

/* ============ Base ============ */
body {
  background-color: var(--jade-cream);
  color: var(--jade-text);
}

/* Links claros, visibles y con buen contraste */
a,
a:visited {
  color: var(--jade-gold-dark);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--jade-gold);
  text-decoration: none;
}

/* Links dentro de textos Elementor */
.elementor-widget-text-editor a {
  color: var(--jade-gold-dark);
}
.elementor-widget-text-editor a:hover {
  color: var(--jade-gold);
}

/* ============ Botones globales ============ */
/* Pensados para resaltar en fondos claros y oscuros */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.elementor-button,
.elementor-button:visited {
  background-color: var(--jade-gold);
  color: var(--jade-white);
  border: 0;
  border-radius: 999px;
  padding: 0.75em 1.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease-in-out, transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button:focus {
  background-color: var(--jade-gold-dark);
  color: var(--jade-white);
  box-shadow: 0 6px 14px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}

/* Variante de botón contorno (por si la usas en Elementor) */
.jade-btn-outline,
.jade-btn-outline.elementor-button {
  background-color: transparent;
  color: var(--jade-gold-dark);
  border: 2px solid var(--jade-gold);
  box-shadow: none;
}
.jade-btn-outline:hover,
.jade-btn-outline.elementor-button:hover {
  background-color: var(--jade-gold);
  color: var(--jade-white);
}

/* ============ Navegación ============ */
.main-navigation a,
.site-header a,
.site-branding a {
  color: var(--jade-gold);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--jade-gold-soft);
}

/* Menú móvil Elementor */
.elementor-nav-menu--dropdown .elementor-nav-menu a {
  color: var(--jade-text);
}
.elementor-nav-menu--dropdown .elementor-nav-menu a:hover {
  color: var(--jade-gold-dark);
}

/* ============ Formularios ============ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
  border-radius: 999px;
  border: 1px solid #e4d6bd;
  padding: 0.6em 1em;
  background-color: var(--jade-white);
  color: var(--jade-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--jade-gold);
  box-shadow: 0 0 0 1px var(--jade-gold-soft);
  outline: none;
}

/* ============ Secciones suaves tipo spa ============ */
.jade-section-soft {
  background-color: var(--jade-white);
  border-radius: 24px;
  padding: 2.5rem 2rem;
}

/* Borde dorado para cajas destacadas */
.jade-border-gold {
  border: 1px solid var(--jade-gold);
  border-radius: 24px;
}

/* Texto dorado */
.jade-text-gold {
  color: var(--jade-gold-dark);
}