/* ============================================================
   demo-beauty-salon  ·  Peluquería & Estética (editorial claro)
   Blueprint "Estudio Malva". LIGHT / porcelana + malva + berenjena.
   Re-skineable: la escala de color la deriva SkinColorService en runtime
   desde los 6 brand_defaults.colors (skin:"auto"). Este archivo define:
   (A) el diseño del home/header/footer/page-header (Capa 1 visual)
   (B) el ensamble de los módulos services/gallery/team (Capa 2).
   Estructura porcelana/ink = tokens NEUTROS fijos (legibilidad garantizada
   ante cualquier re-skin). Los ACENTOS siguen la marca: var(--primary)
   (malva), var(--quaternary) (malva profundo), var(--tertiary) (champagne).
   Scope SIEMPRE html.demo-beauty-salon …  ·  NUNCA @if($activeDemo).
   ============================================================ */

/* Tokens neutros del demo (no atados a la marca → siempre legibles) +
   radio editorial (pisa el 0 del bloque brandColors inline). */
html.demo-beauty-salon{
    --border-radius:0px;
    --bs-porcelain:#F6F1ED;
    --bs-porcelain-2:#EFE7E1;
    --bs-ink:#2B2126;
    --bs-ink-soft:#5A4A52;
    --bs-line:rgba(43,33,38,.12);
    --bs-line-light:rgba(246,241,237,.14);
    scroll-behavior:smooth;
}
html.demo-beauty-salon body{
    background:var(--bs-porcelain);
    color:var(--bs-ink);
    font-family:var(--font-family-primary,'Jost','Avenir Next',Montserrat,system-ui,sans-serif);
    font-weight:300;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
html.demo-beauty-salon .body{background:var(--bs-porcelain)}
html.demo-beauty-salon .main{background:var(--bs-porcelain);overflow-x:hidden}
html.demo-beauty-salon img{max-width:100%}

html.demo-beauty-salon .bs-serif{font-family:var(--font-family-secondary,'Cormorant Garamond',Didot,Georgia,serif);font-weight:500;line-height:1.06;letter-spacing:.005em}
html.demo-beauty-salon .bs-serif em{font-style:italic;color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
html.demo-beauty-salon .bs-muted{color:var(--bs-ink-soft)}

html.demo-beauty-salon .bs-eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--primary,#9E6B82);font-weight:400;display:inline-block}
html.demo-beauty-salon .bs-eyebrow--light{color:#E6D6DF}

/* botones */
html.demo-beauty-salon .bs-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-family-primary,'Jost',sans-serif);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--bs-ink);transition:.25s;cursor:pointer;text-decoration:none;background:transparent;color:var(--bs-ink)}
html.demo-beauty-salon .bs-btn--fill{background:var(--bs-ink);color:var(--bs-porcelain);border-color:var(--bs-ink)}
html.demo-beauty-salon .bs-btn--fill:hover{background:var(--quaternary,#7C5065);border-color:var(--quaternary,#7C5065)}
html.demo-beauty-salon .bs-btn--ghost:hover{background:var(--bs-ink);color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-btn--light{border-color:var(--bs-porcelain);color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-btn--light:hover{background:var(--bs-porcelain);color:var(--bs-ink)}
html.demo-beauty-salon .bs-btn--light-ghost{border-color:rgba(246,241,237,.55);color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-btn--light-ghost:hover{background:var(--bs-porcelain);color:var(--bs-ink)}

/* ── topbar ── */
html.demo-beauty-salon .bs-topbar{background:var(--bs-ink);color:var(--bs-porcelain);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
html.demo-beauty-salon .bs-tb-in{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:9px 32px;flex-wrap:wrap;gap:8px}
html.demo-beauty-salon .bs-tb-in span{opacity:.85}
html.demo-beauty-salon .bs-tb-accent{color:#CBA6B6 !important;opacity:1 !important}

/* ── header ── */
html.demo-beauty-salon .bs-header{position:sticky;top:0;z-index:40;background:rgba(246,241,237,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bs-line)}
html.demo-beauty-salon .bs-hin{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 32px}
html.demo-beauty-salon .bs-brand{display:flex;align-items:center;text-decoration:none}
html.demo-beauty-salon .bs-nav{display:flex;gap:32px;align-items:center;margin-left:auto}
html.demo-beauty-salon .bs-nav a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bs-ink-soft);transition:.2s;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
html.demo-beauty-salon .bs-nav a:hover,html.demo-beauty-salon .bs-nav a.on{color:var(--primary,#9E6B82);border-color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-hright{display:flex;align-items:center;gap:14px}
html.demo-beauty-salon .bs-nav-cta{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--bs-ink);color:var(--bs-ink);transition:.25s;text-decoration:none;white-space:nowrap}
html.demo-beauty-salon .bs-nav-cta:hover{background:var(--bs-ink);color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
html.demo-beauty-salon .bs-burger span{width:24px;height:2px;background:var(--bs-ink);display:block}
@media(max-width:900px){
  html.demo-beauty-salon .bs-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:14px;background:var(--bs-porcelain);padding:20px 32px;border-bottom:1px solid var(--bs-line)}
  html.demo-beauty-salon .bs-nav.open{display:flex}
  html.demo-beauty-salon .bs-burger{display:flex}
}
@media(max-width:560px){html.demo-beauty-salon .bs-nav-cta{display:none}}

/* ── hero ── */
html.demo-beauty-salon .bs-hero{padding:70px 0 90px;position:relative}
html.demo-beauty-salon .bs-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
html.demo-beauty-salon .bs-hero-copy .bs-eyebrow{margin-bottom:22px}
html.demo-beauty-salon .bs-hero-copy h1{font-size:clamp(2.8rem,6vw,4.7rem);margin:0 0 26px;color:var(--bs-ink)}
html.demo-beauty-salon .bs-lead{font-size:1.08rem;color:var(--bs-ink-soft);max-width:36ch;margin:0 0 34px}
html.demo-beauty-salon .bs-hero-actions{display:flex;gap:16px;flex-wrap:wrap}
html.demo-beauty-salon .bs-hero-figure{position:relative}
html.demo-beauty-salon .bs-hero-figure img{width:100%;height:560px;object-fit:cover;display:block;filter:saturate(.96)}
html.demo-beauty-salon .bs-hero-frame{position:absolute;inset:18px;border:1px solid rgba(246,241,237,.6);pointer-events:none}
html.demo-beauty-salon .bs-hero-tag{position:absolute;left:-26px;bottom:44px;background:var(--bs-porcelain);padding:18px 24px;border-left:2px solid var(--tertiary,#C09A54)}
html.demo-beauty-salon .bs-hero-tag b{font-size:1.5rem;display:block;line-height:1;color:var(--bs-ink)}
html.demo-beauty-salon .bs-hero-tag span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-hero-mark{position:absolute;top:30px;right:0;font-style:italic;font-size:8rem;color:var(--primary,#9E6B82);opacity:.14;z-index:0;line-height:1;pointer-events:none}
@media(max-width:820px){
  html.demo-beauty-salon .bs-hero-grid{grid-template-columns:1fr;gap:36px}
  html.demo-beauty-salon .bs-hero-figure img{height:420px}
  html.demo-beauty-salon .bs-hero-tag{left:16px}
}

/* ── section shell ── */
html.demo-beauty-salon .bs-services,
html.demo-beauty-salon .bs-looks,
html.demo-beauty-salon .bs-team,
html.demo-beauty-salon .bs-quote-sec,
html.demo-beauty-salon .bs-sec{padding:96px 0}
html.demo-beauty-salon .bs-shead{max-width:640px;margin-bottom:54px}
html.demo-beauty-salon .bs-shead--center{margin-left:auto;margin-right:auto;text-align:center}
html.demo-beauty-salon .bs-shead .bs-eyebrow{margin-bottom:16px}
html.demo-beauty-salon .bs-shead h2{font-size:clamp(2rem,4vw,3.1rem);color:var(--bs-ink);margin:0}
html.demo-beauty-salon .bs-shead p{color:var(--bs-ink-soft);margin-top:16px;font-size:1.02rem}

/* ── services ── */
html.demo-beauty-salon .bs-services{background:var(--bs-porcelain-2)}
html.demo-beauty-salon .bs-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bs-line)}
html.demo-beauty-salon .bs-svc{background:var(--bs-porcelain);overflow:hidden;text-decoration:none;color:var(--bs-ink);display:block;transition:.25s}
html.demo-beauty-salon .bs-svc:hover{background:#fff}
html.demo-beauty-salon .bs-svc-ph{height:220px;overflow:hidden}
html.demo-beauty-salon .bs-svc-ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
html.demo-beauty-salon .bs-svc:hover .bs-svc-ph img{transform:scale(1.05)}
html.demo-beauty-salon .bs-svc-body{padding:26px 28px 30px}
html.demo-beauty-salon .bs-svc-body h3{font-size:1.5rem;margin:0 0 8px;color:var(--bs-ink)}
html.demo-beauty-salon .bs-svc-body p{font-size:.9rem;color:var(--bs-ink-soft);margin:0 0 16px;min-height:2.6em}
html.demo-beauty-salon .bs-svc-price{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary,#9E6B82);display:flex;align-items:center;justify-content:space-between;gap:12px}
html.demo-beauty-salon .bs-svc-price em{font-style:normal;border-bottom:1px solid var(--bs-line);padding-bottom:2px;color:var(--bs-ink-soft)}
@media(max-width:900px){html.demo-beauty-salon .bs-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){html.demo-beauty-salon .bs-svc-grid{grid-template-columns:1fr}}

/* ── looks / gallery preview ── */
html.demo-beauty-salon .bs-looks-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
html.demo-beauty-salon .bs-look{overflow:hidden;position:relative;margin:0}
html.demo-beauty-salon .bs-look img{width:100%;height:100%;object-fit:cover;transition:.7s}
html.demo-beauty-salon .bs-look:hover img{transform:scale(1.06)}
html.demo-beauty-salon .bs-look.tall{grid-row:span 2}
html.demo-beauty-salon .bs-look.wide{grid-column:span 2}
html.demo-beauty-salon .bs-look::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(43,33,38,.28));opacity:0;transition:.3s}
html.demo-beauty-salon .bs-look:hover::after{opacity:1}
html.demo-beauty-salon .bs-looks-more{text-align:center;margin-top:40px}
@media(max-width:820px){html.demo-beauty-salon .bs-looks-grid{grid-template-columns:repeat(2,1fr)}html.demo-beauty-salon .bs-look.wide,html.demo-beauty-salon .bs-look.tall{grid-column:auto;grid-row:auto}}

/* ── team (ink section) ── */
html.demo-beauty-salon .bs-team{background:var(--bs-ink);color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-team .bs-eyebrow{color:#CBA6B6}
html.demo-beauty-salon .bs-team .bs-shead h2{color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-team .bs-shead p{color:rgba(246,241,237,.7)}
html.demo-beauty-salon .bs-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
html.demo-beauty-salon .bs-stylist figure{overflow:hidden;margin:0 0 20px;height:340px}
html.demo-beauty-salon .bs-stylist img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12)}
html.demo-beauty-salon .bs-stylist h3{font-size:1.5rem;color:var(--bs-porcelain);margin:0}
html.demo-beauty-salon .bs-role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tertiary,#C09A54);margin-top:6px}
@media(max-width:820px){html.demo-beauty-salon .bs-team-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ── testimonio ── */
html.demo-beauty-salon .bs-quote{text-align:center;max-width:820px;margin:0 auto}
html.demo-beauty-salon .bs-quote-mark{font-style:italic;font-size:5rem;color:#CBA6B6;line-height:.4;display:block;margin-bottom:18px}
html.demo-beauty-salon .bs-quote blockquote{font-size:clamp(1.5rem,3vw,2.2rem);font-style:italic;line-height:1.35;color:var(--bs-ink);margin:0}
html.demo-beauty-salon .bs-quote cite{display:block;margin-top:26px;font-style:normal;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary,#9E6B82)}

/* ── cta band ── */
html.demo-beauty-salon .bs-cta{background:var(--quaternary,#7C5065);color:var(--bs-porcelain);text-align:center}
html.demo-beauty-salon .bs-cta h2{font-size:clamp(2.1rem,4.5vw,3.4rem);margin:16px 0 18px;color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-cta p{color:rgba(246,241,237,.85);max-width:44ch;margin:0 auto 34px}
html.demo-beauty-salon .bs-cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── page header (about/contact/módulos) ── */
html.demo-beauty-salon .bs-pagehead{background:var(--bs-porcelain-2);padding:88px 0 64px;text-align:center;border-bottom:1px solid var(--bs-line)}
html.demo-beauty-salon .bs-crumb ol{list-style:none;display:flex;gap:10px;justify-content:center;padding:0;margin:0 0 16px;color:var(--bs-ink-soft);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em}
html.demo-beauty-salon .bs-crumb a{color:var(--bs-ink-soft);text-decoration:none}
html.demo-beauty-salon .bs-crumb a:hover{color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-crumb span{color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-pagehead h1{font-size:clamp(2.4rem,5vw,3.8rem);color:var(--bs-ink);margin:0}
html.demo-beauty-salon .bs-pagehead p{color:var(--bs-ink-soft);margin:16px auto 0;max-width:56ch}

/* ── about ── */
html.demo-beauty-salon .bs-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
html.demo-beauty-salon .bs-about-title{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--bs-ink);margin:14px 0 20px}
html.demo-beauty-salon .bs-about-grid p{color:var(--bs-ink-soft);margin:0 0 16px}
html.demo-beauty-salon .bs-about-img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){html.demo-beauty-salon .bs-about-grid{grid-template-columns:1fr;gap:32px}}

/* ── contact ── */
html.demo-beauty-salon .bs-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
html.demo-beauty-salon .bs-contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;color:var(--bs-ink-soft)}
html.demo-beauty-salon .bs-contact-list strong{color:var(--bs-ink);display:block;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:4px}
html.demo-beauty-salon .bs-contact-form form{display:grid;gap:16px}
html.demo-beauty-salon .bs-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
html.demo-beauty-salon .bs-input{background:#fff;border:1px solid var(--bs-line);padding:14px 16px;color:var(--bs-ink);font-size:.95rem;width:100%;font-family:inherit}
html.demo-beauty-salon .bs-input:focus{outline:none;border-color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-input::placeholder{color:var(--bs-ink-soft);opacity:.7}
html.demo-beauty-salon .bs-contact-form .bs-btn--fill{justify-self:start}
html.demo-beauty-salon .bs-alert{background:rgba(158,107,130,.12);border:1px solid var(--primary,#9E6B82);color:var(--quaternary,#7C5065);padding:14px 18px;margin-bottom:20px}
@media(max-width:820px){html.demo-beauty-salon .bs-contact-grid{grid-template-columns:1fr;gap:36px}html.demo-beauty-salon .bs-form-row{grid-template-columns:1fr}}

/* ── footer (ink) ── */
html.demo-beauty-salon .bs-footer{background:var(--bs-ink);color:rgba(246,241,237,.72);padding:70px 0 40px;border-top:3px solid var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-fin{max-width:1200px;margin:0 auto;padding:0 32px}
html.demo-beauty-salon .bs-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--bs-line-light)}
html.demo-beauty-salon .bs-fbrand p{color:rgba(246,241,237,.72);font-size:.9rem;max-width:34ch;margin:0}
html.demo-beauty-salon .bs-footer h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#CBA6B6;margin:0 0 18px;font-weight:400}
html.demo-beauty-salon .bs-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
html.demo-beauty-salon .bs-footer a{color:rgba(246,241,237,.72);font-size:.9rem;text-decoration:none;transition:.2s}
html.demo-beauty-salon .bs-footer a:hover{color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-footer li{color:rgba(246,241,237,.72);font-size:.88rem}
html.demo-beauty-salon .bs-social{display:flex;gap:12px;margin-bottom:18px}
html.demo-beauty-salon .bs-social a{width:36px;height:36px;border:1px solid var(--bs-line-light);display:flex;align-items:center;justify-content:center;color:var(--bs-porcelain)}
html.demo-beauty-salon .bs-social a:hover{background:var(--primary,#9E6B82);border-color:var(--primary,#9E6B82)}
html.demo-beauty-salon .bs-footer .bs-fcta{border-color:rgba(246,241,237,.5);color:var(--bs-porcelain);display:inline-block}
html.demo-beauty-salon .bs-footer .bs-fcta:hover{background:var(--bs-porcelain);color:var(--bs-ink)}
html.demo-beauty-salon .bs-fbot{display:flex;justify-content:space-between;padding-top:24px;color:rgba(246,241,237,.6);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;gap:10px}
@media(max-width:820px){html.demo-beauty-salon .bs-fgrid{grid-template-columns:1fr 1fr}}

/* ============================================================
   CAPA B · Ensamble de módulos (páginas internas)
   services/gallery/team se sirven con markup Porto genérico. beauty-salon
   ESTÁ en is_demo_light_themed() → esas vistas ya deciden light solas
   (fondos claros + texto oscuro). La Capa A GLOBAL (cd-system-base.css) ya
   alinea botones/badges/paginación/links a var(--primary)/var(--border-radius).
   Acá va SOLO lo que la whitelist light + Capa A no cubren para que se vea
   nativo al editorial del demo: aire del page-header, filtros, tipografía
   serif en los títulos de módulo y el acento malva.
   ============================================================ */

/* Todas las internas usan page-header-beauty-salon (dynamic-header): sin
   margen extra sobre el header sticky. */
html.demo-beauty-salon .main .bs-pagehead{margin-top:0}

/* Títulos de módulo (services/gallery/team/faqs) en la serif editorial */
html.demo-beauty-salon .main h1,
html.demo-beauty-salon .main h2,
html.demo-beauty-salon .main h3,
html.demo-beauty-salon .main .card-title{font-family:var(--font-family-secondary,'Cormorant Garamond',Georgia,serif)}

/* Acento de marca en enlaces/negritas de los módulos (malva, no el default) */
html.demo-beauty-salon .main .text-color-primary,
html.demo-beauty-salon .main .read-more{color:var(--primary,#9E6B82) !important}

/* Nav-pills de filtro (gallery/team) en editorial claro */
html.demo-beauty-salon .main .sort-source .nav-link{color:var(--bs-ink-soft);border-color:transparent;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
html.demo-beauty-salon .main .sort-source .nav-link:hover{color:var(--primary,#9E6B82)}
html.demo-beauty-salon .main .sort-source .nav-item.active .nav-link,
html.demo-beauty-salon .main .sort-source .nav-link.active{color:var(--bs-ink);border-bottom:2px solid var(--primary,#9E6B82)}

/* Cards de módulo (services/team): superficie porcelana, borde fino, hover
   suave. Porto default = card blanca con sombra dura → la suavizamos para
   que respire el editorial. Literales inline legibles sobre porcelana. */
html.demo-beauty-salon .main .card.custom-box-shadow-1,
html.demo-beauty-salon .main article.post .card{background:#fff !important;border:1px solid var(--bs-line) !important;box-shadow:0 10px 30px rgba(43,33,38,.06) !important}
html.demo-beauty-salon .main .card .text-color-dark{color:var(--bs-ink) !important}
html.demo-beauty-salon .main .card .text-color-dark:hover{color:var(--primary,#9E6B82) !important}

/* team member role acento champagne (coherente con el home) */
html.demo-beauty-salon .main .team-list .text-color-primary{color:var(--tertiary,#C09A54) !important}

/* Fallback isotope: si el JS no inicializa, las cards de team/gallery
   arrancan ocultas → forzamos visibles (red de seguridad, SIN !important
   para no romper el filtro por categoría cuando el JS sí corre). */
html.demo-beauty-salon .main .team-list .isotope-item,
html.demo-beauty-salon .main .gallery-list .isotope-item,
html.demo-beauty-salon .main .sort-destination .isotope-item{opacity:1;visibility:visible}

/* Porto .section trae border-top 5px #f4f4f4: en el editorial se ve como
   una línea dura → suavizada a la línea del demo. */
html.demo-beauty-salon .main section.section,
html.demo-beauty-salon .main .section{border-top-color:var(--bs-line) !important}