/* Andorra Tatuaje Capilar — estilos compartidos (todas las páginas) */
:root{
  --negro:#0d0d0f; --negro2:#16161a; --gris:#8a8f98; --blanco:#f7f6f3;
  --acento:#c9a35b; --acento2:#e0c386; --verde:#2f8f6b;
  --radio:14px; --sombra:0 10px 30px rgba(0,0,0,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--negro);color:var(--blanco);line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--acento);text-decoration:none}
a:hover{color:var(--acento2)}
.container{width:min(1120px,92%);margin:0 auto}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(13,13,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid #222}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.logo{font-weight:800;font-size:1.15rem;color:var(--blanco);letter-spacing:.5px}
.logo span{color:var(--acento)}
nav ul{display:flex;gap:1.2rem;list-style:none;flex-wrap:wrap}
nav a{color:#d7d7d7;font-size:.95rem}
nav a.activo,nav a:hover{color:var(--acento)}
.menu-btn{display:none;background:none;border:1px solid #333;color:var(--blanco);padding:.5rem .8rem;border-radius:8px;cursor:pointer;font-size:1rem}

/* Hero */
.hero{position:relative;min-height:62vh;display:flex;align-items:center;text-align:left}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,15,.92),rgba(13,13,15,.55))}
.hero-inner{position:relative;padding:4rem 0}
h1{font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.15;font-weight:800}
h1 em{color:var(--acento);font-style:normal}
.sub{margin:.9rem 0 1.6rem;color:#cfd2d8;font-size:1.08rem;max-width:620px}

/* Botones */
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;border:none;transition:.2s}
.btn-primario{background:var(--acento);color:#141414}
.btn-primario:hover{background:var(--acento2);transform:translateY(-2px)}
.btn-sec{border:1px solid #3a3a3f;color:var(--blanco);margin-left:.6rem}
.btn-sec:hover{border-color:var(--acento)}
.cta-whatsapp{position:fixed;right:18px;bottom:18px;z-index:60;background:#25d366;color:#fff;border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:var(--sombra)}

/* Secciones */
section{padding:3.5rem 0}
h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.6rem}
h3{margin:1.2rem 0 .5rem;color:var(--acento2)}
.kicker{color:var(--acento);text-transform:uppercase;letter-spacing:2px;font-size:.8rem;font-weight:700}
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2rem}
.card{background:var(--negro2);border:1px solid #24242a;border-radius:var(--radio);padding:1.6rem;box-shadow:var(--sombra)}
.card img{border-radius:10px;margin-bottom:1rem;aspect-ratio:4/3;object-fit:cover;width:100%}
.card p{color:#c9ccd3;font-size:.95rem}

/* FAQ */
details{background:var(--negro2);border:1px solid #24242a;border-radius:10px;padding:1rem 1.2rem;margin:.7rem 0}
summary{cursor:pointer;font-weight:700}
details p{margin-top:.6rem;color:#c9ccd3}

/* Formulario */
form{display:grid;gap:1rem;max-width:560px}
input,textarea,select{width:100%;padding:.85rem 1rem;border-radius:10px;border:1px solid #333;background:#1b1b20;color:var(--blanco);font-size:1rem}
label{font-size:.9rem;color:#c9ccd3}

/* Pie */
footer{border-top:1px solid #222;padding:2.4rem 0;color:#9aa0aa;font-size:.9rem}
footer .cols{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer h4{color:var(--blanco);margin-bottom:.5rem}
.legal{margin-top:1.5rem;border-top:1px solid #1d1d22;padding-top:1rem;font-size:.8rem}

/* Tabla precios */
table{width:100%;border-collapse:collapse;margin-top:1.2rem}
th,td{padding:.8rem;border-bottom:1px solid #24242a;text-align:left}
th{color:var(--acento2)}

.breadcrumb{font-size:.85rem;color:#9aa0aa;margin:1rem 0}
@media(max-width:760px){
  .menu-btn{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--negro2);flex-direction:column;padding:1rem;border-bottom:1px solid #222}
  nav ul.abierto{display:flex}
  .btn-sec{margin-left:0;margin-top:.6rem}
}