/*
 * DAN SPA FOR MEN — Sistema de marca
 * Paleta corporativa aplicada con jerarquía y consistencia
 * según el documento de revisión (mayo 2026).
 *
 * brand-color (legacy) se mantiene editable desde admin/brand,
 * pero los acentos premium se aplican vía la paleta fija de marca.
 */

:root {
  /* Paleta editable (admin/brand) */
  --brand-color:        #5C3A2E;
  --brand-color-light:  #8a5647;

  /* Paleta corporativa Dan Spa For Men */
  --brand-bg:           #282829;   /* Fondos oscuros, navbar, footer */
  --brand-deep:         #5C3A2E;   /* Café chocolate, secciones alternas */
  --brand-accent:       #D79E67;   /* Cobre, logo, acentos */
  --brand-cream:        #E9D698;   /* Crema, texto sobre oscuro */
  --brand-cta:          #F15F36;   /* Naranja llama, botón principal */
  --brand-gold:         #FFCC29;   /* Ámbar dorado, precios destacados */

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Lustria', Georgia, serif;
  --font-body:    'Raleway', 'Open Sans', system-ui, sans-serif;
}

/* ─── Tipografía premium ──────────────────────────────── */
body,
.section-title p,
.txt-block p,
.p-lg, .p-md, .p-sm, .p-xl {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.tra-header,
.h2-lg, .h3-lg, .h3-md, .h3-xl,
.h4-xs, .h5-md, .h5-sm, .h5-xs, .h5-xl, .h6-lg {
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}

/* Sans-serif para subtítulos de utilidad / labels */
.tra-header {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
  font-size: 13px;
}

/* ─── Fondos ─────────────────────────────────────────── */
.bg-color-03 { background-color: var(--brand-color) !important; }
.bg-color-09 { background-color: var(--brand-color) !important; }

/* ─── Botón sólido primario (btn-color-02) — CTA ─────── */
.btn-color-02,
.scroll .btn-color-02,
.white-color .btn-color-02,
.color-02-hover:hover,
.scroll .color-02-hover:hover,
.white-color .color-02-hover:hover {
  color: #fff !important;
  background-color: var(--brand-cta) !important;
  border-color: var(--brand-cta) !important;
  letter-spacing: 1px;
  font-weight: 600;
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn-color-02:hover,
.color-02-hover:hover {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(241, 95, 54, 0.28);
}

/* ─── Botón sólido secundario (btn-color-01) ─────────── */
.btn-color-01,
.scroll .btn-color-01,
.white-color .btn-color-01,
.color-01-hover:hover,
.scroll .color-01-hover:hover,
.white-color .color-01-hover:hover {
  color: #fff !important;
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* ─── Botón outline primario (btn-tra-01 / btn-tra-02) ── */
.btn-tra-01,
.scroll .btn-tra-01,
.white-color .btn-tra-01,
.tra-01-hover:hover,
.scroll .tra-01-hover:hover,
.white-color .tra-01-hover:hover {
  color: var(--brand-deep) !important;
  background-color: transparent !important;
  border-color: var(--brand-accent) !important;
}
.btn-tra-01:hover {
  background-color: var(--brand-accent) !important;
  color: #fff !important;
  border-color: var(--brand-accent) !important;
}

.btn-tra-02,
.scroll .btn-tra-02,
.white-color .btn-tra-02,
.tra-02-hover:hover,
.scroll .tra-02-hover:hover,
.white-color .tra-02-hover:hover {
  color: var(--brand-deep) !important;
  background-color: transparent !important;
  border-color: var(--brand-deep) !important;
}

/* ─── Texto color primario (txt-color-02) ────────────── */
.txt-color-02,
.txt-color-02 h2, .txt-color-02 h3, .txt-color-02 h4,
.txt-color-02 h5, .txt-color-02 h6, .txt-color-02 p,
.txt-color-02 a, .txt-color-02 li, .txt-color-02 i,
.txt-color-02 span,
.white-color .txt-color-02 {
  color: var(--brand-accent) !important;
}

/* ─── Icono de teléfono en el header ─────────────────── */
.wsmenu-list li.header-phone a span {
  background-color: var(--brand-cta) !important;
}

/* ─── Línea dorada bajo títulos de sección ───────────── */
.section-title h3::after {
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-gold), var(--brand-accent)) !important;
}

/* ─── Botón "Reservar" siempre visible en navbar ─────── */
/* Específico para sobrescribir el CSS del template menu.css */
.wsmenu > .wsmenu-list > li.header-reserve > a.header-cta-btn,
.header-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 22px !important;
  background: var(--brand-cta) !important;
  color: #fff !important;
  border-radius: 30px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1 !important;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.wsmenu > .wsmenu-list > li.header-reserve > a.header-cta-btn:hover,
.header-cta-btn:hover {
  background: var(--brand-accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(241, 95, 54, 0.35);
  text-decoration: none;
}

/* Reset del ícono dentro del botón Reservar: el template global
   le pone margin-right:12px y otros estilos que rompen el layout. */
.wsmenu > .wsmenu-list > li.header-reserve > a.header-cta-btn > i,
.header-cta-btn > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #fff !important;
  vertical-align: baseline !important;
}

/* Wrapper del item de menú: centrar verticalmente con los demás items
   (los otros <a> tienen padding 10/10 + line-height 50 = ~70px de alto) */
.wsmenu > .wsmenu-list > li.header-reserve {
  display: inline-flex !important;
  align-items: center !important;
  height: 70px;
  padding: 0 14px !important;
  line-height: 1 !important;
  vertical-align: middle;
  float: left;
}
.wsmenu > .wsmenu-list > li.header-reserve > a.header-cta-btn {
  margin: 0 !important;
  height: auto;
}

/* ─── Precios destacados (texto dorado) ──────────────── */
.price-tag {
  color: var(--brand-gold);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ─── Tarjetas premium (sombras suaves) ──────────────── */
.sbox-3, .sbox-10 {
  border-radius: 12px;
  overflow: hidden;
}