/* Valores medidos en kaleidohair.com (CSS de Divi):
   h1 hero: Castoro Titling 110px, letter-spacing .08em, #f6f6f6
   h3 hero: Canela Light Italic 36px
   botones: Josefin Sans 14px, letter-spacing 2px, borde 1px
   menú: Montserrat mayúsculas · acento dorado #cfaf87 */
:root {
  --black: #000;
  --ink: #1e1e1e;
  --white: #f6f6f6;
  --gold: #cfaf87;
  --serif-title: "Castoro Titling", Georgia, serif;
  --serif-script: "Cormorant Garamond", "Canela Light Italic", Georgia, serif;
  --sans-label: "Josefin Sans", Helvetica, Arial, sans-serif;
  --sans: "Montserrat", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: #fff; line-height: 1.7; }
a { color: inherit; text-decoration: none; }

/* ---------- barra superior + cabecera ---------- */
.header {
  position: sticky; top: 0; z-index: 20;
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8%;
}
.brand-logo { display: block; height: 68px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn-outline) {
  font: 500 12px/1 var(--serif-title); letter-spacing: .1em; text-transform: uppercase;
  transition: color .25s;
}
.nav a:not(.btn-outline):hover { color: var(--gold); }

/* ---------- botones ---------- */
.btn-outline {
  display: inline-block; padding: 14px 30px;
  border: 1px solid var(--gold); color: var(--white);
  font: 400 14px/1 var(--sans-label); letter-spacing: 2px; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.btn-outline:hover { background: var(--gold); color: var(--black); }
.btn-outline.small { padding: 12px 22px; border-color: var(--white); font-size: 12px; }
.btn-outline.dark { color: var(--black); border-color: var(--black); }
.btn-outline.dark:hover { background: var(--black); color: var(--white); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: calc(100vh - 92px); min-height: calc(100svh - 92px);
  display: grid; place-items: center; text-align: center; color: var(--white); overflow: hidden;
  background: #0a0909;
}
/* Foto provisional (img/hero-tijeras.jpg) (Pexels, licencia gratuita, uso comercial permitido; ver CREDITOS.txt). */
.hero-bg {
  position: absolute; inset: 0; background: url("img/hero-tijeras.jpg") center 62% / cover no-repeat;
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)); }

.hero-content { position: relative; z-index: 2; padding: 0 6%; max-width: 900px; }
.hero-logo { display: block; height: clamp(110px, 18vh, 170px); width: auto; margin: 0 auto 26px; opacity: .95; }
.script { font: italic 300 24px/1.3 var(--serif-script); padding-bottom: 10px; color: #e9e2d8; }
.script.dark { color: var(--ink); font-size: 30px; margin-bottom: 28px; }
.hero h1 {
  font: 400 clamp(22px, 3.4vw, 44px)/1.1 var(--serif-title);
  letter-spacing: .14em; padding-bottom: 16px;
}
.tagline {
  font: 500 clamp(12px, 1.2vw, 15px)/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 34px;
}

/* ---------- intro ---------- */
.intro { text-align: center; padding: 100px 8% 60px; max-width: 900px; margin: 0 auto; }
.eyebrow {
  font: 400 14px/1.5 var(--sans); letter-spacing: 4px; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
h2 { font: 400 clamp(28px, 4vw, 45px)/1.2 var(--serif-title); color: #000; margin-bottom: 22px; }
.intro p { font-weight: 500; color: #676767; }

/* ---------- tarjetas ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 40px 8% 100px; }
.card-img { aspect-ratio: 4 / 5; margin-bottom: 18px; background: #e8e2da; }
.card-img { background-size: cover; background-repeat: no-repeat; }
.img-a { background-image: url("img/color.jpg"); background-position: 30% center; }
.img-b { background-image: url("img/corte.jpg"); background-position: center; }
.img-c { background-image: url("img/tratamientos.jpg"); background-position: center; }
.label { font: 400 11px/1.5 var(--sans-label); letter-spacing: 2px; text-transform: uppercase; color: #000; }
.card h3 { font: 500 14px/1.5 var(--sans); letter-spacing: 2px; text-transform: uppercase; }

/* ---------- CTA + pie ---------- */
.cta { text-align: center; padding: 90px 8%; background: #f4efe8; }
.cta .label { font-size: 12px; margin-bottom: 10px; }
.footer { background: var(--black); color: var(--white); text-align: center; padding: 26px;
  font: 400 12px/1 var(--sans-label); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .nav a:not(.btn-outline) { display: none; }
  .script { font-size: 20px; }
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } html { scroll-behavior: auto; } }