/* ===================================================================
   Tema Peluquería & Barbería
   Variantes: salon (crema/terracota, serif), estetica (blanco/salvia,
   geométrica liviana) y barberia (grafito/ámbar, mayúsculas de impacto).
   Paleta, fuentes y radio llegan de theme.json; acá van formas y carácter.
   =================================================================== */

[data-preset="hair-salon"] {
  /* Color de marca para texto (AA sobre el fondo) y texto sobre botones de marca */
  --brand-ink: var(--brand-1);
  --on-brand: #FFFFFF;
  --radius-btn: 999px;
  --radius-sm: calc(var(--radius) * .6);
  --hero-grad-text: none;
}
[data-preset="hair-salon"][data-variant="atelier"] { --brand-ink: #18181B; --on-brand: #FFFFFF; --radius-btn: 0.75rem; --radius-sm: 0.5rem; }
[data-preset="hair-salon"][data-variant="barberia"] { --on-brand: #18181B; --radius-btn: var(--radius); --radius-sm: var(--radius); }
[data-preset="hair-salon"][data-variant="barberia"][data-theme="light"] { --brand-ink: #92400E; }
[data-preset="hair-salon"][data-variant="salon"][data-theme="light"] { --brand-ink: #A84C35; }
[data-preset="hair-salon"][data-variant="estetica"][data-theme="light"] { --brand-ink: #4A6F5F; }
[data-preset="hair-salon"][data-variant="salon"][data-theme="dark"] { --brand-ink: #E9967F; }
[data-preset="hair-salon"][data-variant="estetica"][data-theme="dark"] { --brand-ink: #9CC2A6; }

[data-preset="hair-salon"][data-variant="atelier"] .wt-display { font-weight: 700 !important; letter-spacing: -0.025em; }
[data-preset="hair-salon"][data-variant="atelier"] h2.wt-display { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.1; }
[data-preset="hair-salon"][data-variant="atelier"] .wt-tag { background: #F4F4F5; border: 1px solid rgba(24, 24, 27, 0.08); color: #18181B; padding: .35rem .85rem; border-radius: 999px; letter-spacing: .14em; font-size: .72rem; font-weight: 600; }
[data-preset="hair-salon"][data-variant="atelier"] .wt-tag::before,
[data-preset="hair-salon"][data-variant="atelier"] .wt-tag::after { display: none; }
[data-preset="hair-salon"][data-variant="atelier"] .wt-header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
[data-preset="hair-salon"][data-variant="atelier"] .wt-card { background: #FFFFFF; border: 1px solid rgba(24, 24, 27, 0.08); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.05); }
[data-preset="hair-salon"][data-variant="atelier"] .wt-card:hover { border-color: rgba(24, 24, 27, 0.20); }
[data-preset="hair-salon"][data-variant="atelier"] .wt-btn-primary { background: #18181B; color: #FFFFFF; border: 1px solid #18181B; box-shadow: 0 4px 14px -4px rgba(0,0,0,.25); }
[data-preset="hair-salon"][data-variant="atelier"] .wt-btn-primary:hover { background: #000000; border-color: #000000; }
[data-preset="hair-salon"][data-variant="atelier"] .wt-btn-secondary { background: #FFFFFF; color: #18181B; border: 1px solid rgba(24, 24, 27, 0.18); }
[data-preset="hair-salon"][data-variant="atelier"] .wt-btn-secondary:hover { border-color: #18181B; background: #FAFAFA; }

[data-preset="hair-salon"] body.wt-body { letter-spacing: 0; }
[data-preset="hair-salon"] .wt-brand { color: var(--brand-ink); }
[data-preset="hair-salon"] ::selection { background: var(--brand-1); color: var(--on-brand); }

/* Títulos */
[data-preset="hair-salon"] .wt-display { letter-spacing: 0; }
[data-preset="hair-salon"][data-variant="salon"] .wt-display { font-weight: 600 !important; letter-spacing: -.01em; }
[data-preset="hair-salon"][data-variant="salon"] h2.wt-display { font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1.05; }
[data-preset="hair-salon"][data-variant="estetica"] .wt-display { font-weight: 400 !important; letter-spacing: .01em; }
[data-preset="hair-salon"][data-variant="estetica"] h2.wt-display { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
[data-preset="hair-salon"][data-variant="barberia"] .wt-display { font-weight: 900 !important; text-transform: uppercase; letter-spacing: .01em; }
[data-preset="hair-salon"][data-variant="barberia"] h3.wt-display { font-weight: 700 !important; letter-spacing: .03em; }

/* Texto destacado del título: sin degradado, con el color o la cursiva del tema */
[data-preset="hair-salon"] .wt-grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--brand-ink); }
[data-preset="hair-salon"][data-variant="salon"] .wt-grad-text { font-style: italic; }

/* Etiquetas de sección */
[data-preset="hair-salon"] .wt-tag,
[data-preset="hair-salon"] .wt-tag-brand {
  background: none; border: 0; padding: 0; border-radius: 0;
  color: var(--brand-ink); letter-spacing: .22em; font-size: .7rem;
}
[data-preset="hair-salon"][data-variant="salon"] .wt-tag::before,
[data-preset="hair-salon"][data-variant="salon"] .wt-tag::after { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: .6; }
[data-preset="hair-salon"][data-variant="barberia"] .wt-tag {
  padding: .3rem .7rem; border: 1px solid var(--brand-1); color: var(--brand-ink); letter-spacing: .18em;
}

/* Botones: color sólido de marca */
[data-preset="hair-salon"] .wt-btn { border-radius: var(--radius-btn); letter-spacing: .01em; }
[data-preset="hair-salon"] .wt-btn-primary {
  color: var(--on-brand); background: var(--brand-1);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--brand-1) 80%, transparent);
}
[data-preset="hair-salon"] .wt-btn-primary:hover { background: color-mix(in srgb, var(--brand-1) 88%, black); }
[data-preset="hair-salon"] .wt-btn-secondary { background: transparent; border: 1px solid var(--border-strong); }
[data-preset="hair-salon"] .wt-btn-secondary:hover { border-color: var(--brand-1); }
[data-preset="hair-salon"][data-variant="barberia"] .wt-btn { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
[data-preset="hair-salon"] .wt-tab.active { background: var(--brand-1); color: var(--on-brand); }
[data-preset="hair-salon"] .wt-bk-num { background: var(--brand-1); color: var(--on-brand); }

/* Tarjetas */
[data-preset="hair-salon"] .wt-card { backdrop-filter: none; }
[data-preset="hair-salon"][data-variant="estetica"] .wt-card { box-shadow: none; }
[data-preset="hair-salon"][data-variant="barberia"] .wt-card { box-shadow: none; border-color: var(--border-strong); }
[data-preset="hair-salon"] .wt-chip { border-radius: 999px; }
[data-preset="hair-salon"][data-variant="barberia"] .wt-chip { border-radius: var(--radius); text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; }

/* Barra de anuncio y header */
[data-preset="hair-salon"] .wt-topbar { background: var(--brand-1); color: var(--on-brand); }
[data-preset="hair-salon"][data-variant="barberia"] .wt-header {
  border-bottom: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)),
    repeating-linear-gradient(-45deg, var(--brand-2) 0 10px, #F4F4F5 10px 20px, #2563EB 20px 30px, #F4F4F5 30px 40px);
  background-size: 100% calc(100% - 4px), 100% 100%;
  background-repeat: no-repeat;
}
[data-preset="hair-salon"] .wt-nav-link:hover { color: var(--brand-ink); }

/* Secciones alternadas para dar ritmo */
[data-preset="hair-salon"] main > section:nth-of-type(even),
[data-preset="hair-salon"] main > div:nth-of-type(even) > section { background: var(--bg-alt); }

/* Lista de precios */
[data-preset="hair-salon"] .wt-pl-dots { border-bottom-style: dotted; }
[data-preset="hair-salon"][data-variant="salon"] .wt-price-list h3.wt-display { font-size: 1.7rem; font-style: italic; }

/* Equipo */
[data-preset="hair-salon"] .wt-team-photo img { transition: transform .5s ease; }
[data-preset="hair-salon"] .wt-team article:hover .wt-team-photo img { transform: scale(1.04); }
[data-preset="hair-salon"][data-variant="barberia"] .wt-team-photo img { filter: grayscale(.35) contrast(1.05); }

/* Reseñas */
[data-preset="hair-salon"] .wt-stars { color: var(--brand-1); }
[data-preset="hair-salon"][data-variant="salon"] .wt-testimonials blockquote { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; line-height: 1.4; color: var(--text); }

/* Hero del tema (themes/hair-salon/blocks/hero.php) */
.hs-hero { position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hs-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hs-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.72) 100%); }
[data-variant="estetica"] .hs-hero::before { background: linear-gradient(90deg, rgba(20,26,23,.78) 0%, rgba(20,26,23,.45) 55%, rgba(20,26,23,.1) 100%); }
[data-variant="estetica"] .hs-hero { align-items: center; }
.hs-hero-inner { position: relative; z-index: 2; width: 100%; }
.hs-hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hs-hero .wt-grad-text { color: #fff; }
[data-variant="salon"] .hs-hero .wt-grad-text { color: #F6D6CB; }
[data-variant="barberia"] .hs-hero .wt-grad-text { color: var(--brand-1); }
[data-variant="estetica"] .hs-hero .wt-grad-text { color: #CFE3D4; }
.hs-hero-sub { color: rgba(255,255,255,.88); }
.hs-hero-sub strong { color: #fff; }
.hs-hero .wt-btn-secondary { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.hs-hero .wt-btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.hs-hero-pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: .4rem .9rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.hs-hero-metric { border-left: 2px solid var(--brand-1); padding-left: .8rem; }
.hs-hero-metric b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; color: #fff; }
.hs-hero-metric span { font-size: .78rem; color: rgba(255,255,255,.78); }

/* Footer del tema */
[data-preset="hair-salon"] .hs-footer { background: var(--bg-alt); border-top: 1px solid var(--border); }
[data-preset="hair-salon"][data-variant="barberia"] .hs-footer { background: #0B0B0C; }
[data-preset="hair-salon"][data-variant="barberia"][data-theme="light"] .hs-footer { background: var(--bg-alt); }
.hs-footer a:hover { color: var(--brand-ink); }