/*
 Theme Name: Salon Elegancia (Starter)
 Theme URI: https://example.com/salon-elegancia
 Author: ChatGPT
 Version: 1.0
 Description: Tema listo con portada, promociones y catálogo (negro/dorado). Incluye imágenes demo.
 Requires at least: 6.0
 Tested up to: 6.6
 Text Domain: salon-elegancia
*/
:root{
  --gold:#c7a141;
  --bg:#0d0d0d;
  --card:#101010;
  --muted:#bfbfbf;
}
body{background:var(--bg); color:#eee; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
a{color:var(--gold); text-decoration:none}
.header{position:sticky; top:0; z-index:9999; background:#0d0d0d; border-bottom:1px solid rgba(199,161,65,.25);}
.container{max-width:1200px; margin:0 auto; padding:16px;}
.logo img{height:52px; width:auto}
.hero{min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; background:#000 url('assets/images/hero_salon.jpg') center/cover no-repeat; position:relative;}
.hero::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 4px rgba(199,161,65,.5);}
.hero .inner{position:relative; z-index:2; max-width:900px; padding:24px}
.btn{display:inline-block; padding:14px 24px; border-radius:50px; font-weight:700; margin:10px}
.btn-gold{background:var(--gold); color:#121212}
.btn-outline{border:2px solid #fff; color:#fff}
.section{padding:60px 0}
.section h2{font-size:clamp(28px,4vw,44px); text-align:center; margin-bottom:28px}
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card); border:1px solid rgba(199,161,65,.25); border-radius:20px; overflow:hidden; display:flex; flex-direction:column}
.card img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.card .body{padding:16px}
.card h3{margin:6px 0 10px}
.card .btn{align-self:center; margin:16px 0 22px}
.testi{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.testi .box{background:var(--card); border:1px solid rgba(199,161,65,.25); border-radius:16px; padding:18px}
.footer{border-top:1px solid rgba(199,161,65,.25); padding:24px 0; margin-top:40px; color:var(--muted);}
@media(max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .hero{min-height:60vh} }