/* Peluquería Encarna · servicios.html (se carga después de css/styles.css)
   Hero partido, barra de categorías fina y bloques 50/50 foto/texto alternos. */

.page-servicios main{display:block}
.sv-item__photo img,.hero__media img{color:transparent;font-size:0}

/* ---------- Barra de categorías (fija bajo la cabecera) ---------- */
.sv-cats{
  position:sticky;top:var(--sv-header-h,0px);z-index:20;
  background:var(--cream);border-bottom:1px solid var(--line);
}
.sv-cats__list{
  margin:0 auto;padding:0 var(--gutter);max-width:calc(var(--wrap) + 2*var(--gutter));
  display:flex;gap:clamp(1.4rem,4vw,3.4rem);justify-content:center;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sv-cats__list::-webkit-scrollbar{display:none}
.sv-cats__list li{flex:0 0 auto}
.sv-cats a{
  display:block;padding:1.15rem 0 1.05rem;color:var(--ink-soft);text-decoration:none;
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1;
  border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .2s,border-color .2s;
}
.sv-cats a:hover{color:var(--ink)}
.sv-cats a.is-current{color:var(--ink);border-bottom-color:var(--gold)}

/* ---------- Categorías ---------- */
.sv-cat{scroll-margin-top:calc(var(--sv-header-h,0px) + 48px)}
.sv-cat__head{
  max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;
  padding:clamp(56px,8vw,112px) var(--gutter) clamp(28px,4vw,48px);
}
.sv-cat__title{
  display:flex;align-items:center;gap:1.6rem;
  font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,1.5rem + 2.7vw,3.9rem);line-height:1;color:var(--ink);
}
.sv-cat__title::after{content:"";flex:1 1 auto;height:1px;background:var(--line-strong);min-width:40px}

/* ---------- Bloques 50/50 ---------- */
.sv-item{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:min(640px,80vh);
  scroll-margin-top:calc(var(--sv-header-h,0px) + 56px);background:var(--white);
}
.sv-item + .sv-item{border-top:1px solid var(--cream)}
.sv-item__photo{margin:0;position:relative;min-height:420px}
.sv-item__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-item--flip .sv-item__photo{order:2}
.sv-item__body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(48px,7vw,112px) var(--pad-x)}
.sv-item__name{font-size:clamp(2.1rem,1.4rem + 2vw,3.3rem);line-height:1.05;margin-bottom:1.4rem;max-width:14ch}
.sv-item__body p{color:var(--ink-soft);max-width:44ch;margin-bottom:1rem}
.sv-item__body .sv-item__price{
  margin:.6rem 0 2rem;padding-top:1rem;border-top:1px solid var(--line);min-width:min(260px,100%);
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
}
.sv-item--dark{background:var(--charcoal);color:#fff}
.sv-item--dark .sv-item__body p{color:rgba(255,255,255,.85);font-weight:300}
.sv-item--dark .sv-item__body .sv-item__price{color:#fff;border-top-color:rgba(255,255,255,.3)}
.sv-item--dark .btn--outline{border-color:rgba(255,255,255,.75);color:#fff}
.sv-item--dark .btn--outline:hover{background:#fff;color:var(--charcoal)}

/* ---------- CTA final (usa .cta-photo de styles.css) ---------- */
.sv-cta{margin-top:clamp(64px,9vw,120px)}
.sv-cta .sv-cta__note{margin:1.8rem 0 0;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}

@media (max-width:860px){
  .sv-item{grid-template-columns:1fr;min-height:0}
  .sv-item--flip .sv-item__photo{order:0}
  .sv-item__photo{min-height:0;aspect-ratio:4/3.6}
  .sv-item__body{padding:44px var(--gutter) 56px}
}
@media (max-width:560px){
  .sv-cats__list{justify-content:flex-start}
  .sv-cat__title{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .page-servicios *{transition:none!important;scroll-behavior:auto!important}
}