/* =========================================================================
   Peluquería archetype — Estudio Bera reference fixture
   --------------------------------------------------------------------------
   Editorial DNA from research/peluqueria.md: Hare & Bone (warm paper +
   camel/tan accent + tight statement type), Murdock London (small wordmark
   in corner, never centred), Marco Ambrosi (terracotta as the one bold
   accent, used sparingly), Hagi's Barbershop (single oversized serif
   word as section divider), La Barberia de Gràcia (narrative prose, not
   bullet lists), The Haircut (constraint as design — two colours + one
   typeface family carry whole sections).
   ========================================================================= */

/* ---------- Fonts (self-hosted, no CDN) ----------
   Pairing: Fraunces (display, variable axes wght+ital) + Manrope (body,
   variable axis wght). Both via Google Fonts OFL, downloaded with a
   browser User-Agent so the gstatic CDN returns the real variable woff2
   (UA-less requests get a 404 HTML page). NO INTER — Inter is the
   visual signature of every Lovable / V0 / Hostinger output and
   research/peluqueria.md explicitly forbids it (anti-pattern #4).
*/
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/Fraunces-Regular.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/Fraunces-Italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/Manrope-Variable.woff2") format("woff2-variations");
}

/* ---------- Tokens (hex codes verbatim from research/peluqueria.md
                       §"Recommended archetype — Color palette") ---------- */
:root {
  --paper:        #f4efe7;  /* warm off-white — never #ffffff */
  --ink:          #1a1614;  /* warm near-black — never #000000 */
  --accent-warm:  #b4825a;  /* camel / tobacco (Hare & Bone, Murdock) */
  --accent-soft:  #e8ddd0;  /* cream — for sectioned backgrounds */
  --accent-bold:  #c9543c;  /* terracotta (Marco Ambrosi); ≤1 element/page */
  --ink-muted:    #6b6b6b;  /* mid-grey for secondary type */

  --rule:         #d8cfc1;  /* hairline rule, slightly darker than paper */
  --paper-deep:   #ece4d6;  /* deeper paper for inverted strip backgrounds */

  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-x: clamp(20px, 4.4vw, 72px);
  --pad-y: clamp(72px, 10vw, 144px);
  --container: 1280px;
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
figure { margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 8px; padding: 8px 14px;
  background: var(--ink); color: var(--paper); border-radius: 2px;
  font-size: 13px;
}
.skip:focus { left: 8px; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---------- Header — small wordmark in a corner (Murdock-style)
              never large + centred (anti-pattern #1) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 239, 231, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px;
  gap: 24px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 0.45em;
}
.wordmark-mark {
  display: inline-block; width: 9px; height: 9px;
  background: var(--accent-warm);
  border-radius: 999px;
  transform: translateY(-0.05em);
}
.wordmark-name { font-style: italic; }
.wordmark-place {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.site-nav {
  display: flex; align-items: baseline; gap: 28px;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.site-nav a {
  transition: color 140ms ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent-warm);
}
.site-nav .lang {
  font-feature-settings: "tnum";
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
.site-nav .lang.is-active { color: var(--ink); }

/* ---------- Eyebrow — italic display + uppercase sans, paired ---------- */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 14px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 32px;
}
.eyebrow .eyebrow-rule {
  display: inline-block; width: 36px; height: 1px;
  background: var(--accent-warm);
  transform: translateY(-3px);
}

/* ---------- HERO — asymmetric, type-led
              (Hare & Bone left-rail rhythm + Hagi's serif weight) ---------- */
.hero {
  padding-top: clamp(56px, 9vw, 132px);
  padding-bottom: clamp(64px, 9vw, 128px);
  position: relative;
}
.hero-wrap {
  display: grid;
  /* Two-thirds type / one-third image — asymmetric on purpose. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: end;
}
.hero-headline { min-width: 0; }
.hero-title {
  font-family: var(--display);
  font-weight: 380;            /* variable weight just below 400 */
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(46px, 7.6vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
}
.hero-title em {
  font-style: italic;
  color: var(--accent-warm);
  font-weight: 380;
}
.hero-title .hero-soft {
  color: var(--ink-muted);
  font-style: italic;
}
.hero-meta {
  display: flex; flex-direction: column; gap: 28px;
  align-self: end;
  border-left: 1px solid var(--rule);
  padding-left: clamp(20px, 2.2vw, 32px);
  max-width: 40ch;
}
.hero-lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.38;
  color: var(--ink);
  margin: 0;
}
.hero-cta {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}

/* ---------- CTAs — solid ink-on-paper OR underlined link.
              NO gradients (anti-pattern §"Hard rules"), NO pill of pastel. */
.btn {
  display: inline-flex; align-items: baseline; gap: 0.55em;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;          /* near-square, not a pill */
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn::after {
  content: "→";
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  transform: translateY(-1px);
  transition: transform 140ms ease;
}
.btn:hover {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: var(--paper);
}
.btn:hover::after { transform: translate(2px, -1px); }

.btn-link {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--accent-warm);
  padding-bottom: 2px;
  display: inline-block;
}
.btn-link:hover { color: var(--accent-warm); }

.hero-fine {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 34ch;
}

/* ---------- Section scaffolding — single oversized serif word /
              short statement carries each opener (Hagi's pattern) ---------- */
.section {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
  border-top: 1px solid var(--rule);
}
.section-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--accent-warm);
  margin: 0 0 14px;
  letter-spacing: 0;
}
.section-title {
  font-family: var(--display);
  font-weight: 380;
  font-variation-settings: "SOFT" 30;
  font-size: clamp(40px, 5.8vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
  color: var(--ink);
}
.section-title em { font-style: italic; color: var(--accent-warm); font-weight: 380; }
.section-kicker {
  font-family: var(--display);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 6px 0 0;
  max-width: 44ch;
}

/* ---------- Ambience strip — single full-bleed photograph
              + small caption in italic underneath (no card frame) ---------- */
.section-ambience {
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}
.ambience {
  display: grid;
  grid-template-columns: 1fr;
}
.ambience-figure { margin: 0; }
.ambience-figure img {
  width: 100%;
  height: clamp(360px, 56vw, 720px);
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.98);  /* slightly warm-graded */
}
.ambience-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 64px);
  padding: 28px 0 0;
  border-top: 1px solid var(--rule);
  margin-top: 0;
}
.ambience-caption .eyebrow { margin-bottom: 0; }
.ambience-caption p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}

/* ---------- Services — typographic table, one row per service,
              with a rule + price column. NEVER a 3-card grid
              (anti-pattern #2 in research/peluqueria.md). ---------- */
.services-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.services-intro p {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.34;
  color: var(--ink);
  margin: 0;
  max-width: 44ch;
}

.services-table {
  border-top: 1px solid var(--ink);
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 5fr) minmax(0, 1.2fr);
  column-gap: clamp(24px, 3.2vw, 56px);
  align-items: baseline;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
}
.service-row .idx {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent-warm);
  line-height: 1;
}
.service-row h3 {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
}
.service-row p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.62;
  max-width: 58ch;
  opacity: 0.82;
}
.service-meta {
  text-align: right;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  line-height: 1.5;
  align-self: start;
  padding-top: 12px;
}
.service-meta .price {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 2px;
}

/* ---------- Manifesto / philosophy section — borrowed from Larry King
              (column logic). Narrow text column biased to the right,
              section number floating in the wide left margin. ---------- */
.section-philosophy { background: var(--paper-deep); border-top: none; }
.philosophy-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.philosophy-wrap .section-meta { padding-top: 8px; }
.philosophy-body {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.32;
  color: var(--ink);
  margin: 0;
  /* Drop cap on the first paragraph, La Barberia / Hagi's pattern */
}
.philosophy-body p { margin: 0 0 1.2em; }
.philosophy-body p:last-child { margin-bottom: 0; }
.philosophy-body p:first-of-type::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 5.2em;
  line-height: 0.82;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent-warm);
}
.philosophy-body em { font-style: italic; color: var(--accent-warm); }

/* ---------- Gallery — editorial spread (1 big + 2 small, then 1 big),
              never a uniform 3×N grid. Single full-bleed photographs are
              the load-bearing element in the references. ---------- */
.gallery-spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(40px, 5vw, 72px);
}
.gallery-spread figure { margin: 0; position: relative; }
.gallery-spread img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.98);
}
/* Layout: 1st = wide, 2nd = tall, 3rd+4th = stacked half-half, 5th = wide, 6th = small */
.g1 { grid-column: span 8; aspect-ratio: 16 / 11; }
.g2 { grid-column: span 4; aspect-ratio: 3 / 4; }
.g3 { grid-column: span 5; aspect-ratio: 4 / 3; }
.g4 { grid-column: span 7; aspect-ratio: 4 / 3; }
.g5 { grid-column: span 4; aspect-ratio: 3 / 4; }
.g6 { grid-column: span 8; aspect-ratio: 16 / 11; }

.gallery-caption {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  text-align: right;
}

/* ---------- Testimonials — two italic display quotes side-by-side,
              author identified in small caps below ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 88px);
  margin-top: clamp(40px, 5vw, 72px);
}
.testimonial { margin: 0; }
.testimonial blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.36;
  color: var(--ink);
  margin: 0;
  padding: 0;
  position: relative;
}
.testimonial blockquote::before {
  content: "“";
  font-family: var(--display);
  font-style: italic;
  font-size: 2.2em;
  line-height: 0;
  color: var(--accent-warm);
  position: absolute;
  left: -0.4em;
  top: 0.35em;
}
.testimonial figcaption {
  margin-top: 24px;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.testimonial-name { color: var(--ink); font-weight: 500; }

/* ---------- FAQ — numbered decimal-leading-zero list, magazine style ---------- */
.faq-list {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  counter-reset: faq;
  border-top: 1px solid var(--ink);
}
.faq-list li {
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: faq;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 0;
  align-items: baseline;
}
.faq-list li::before {
  content: counter(faq, decimal-leading-zero) ".";
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent-warm);
  grid-row: 1;
  line-height: 1;
}
.faq-list h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 1.85vw, 28px);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.008em;
  color: var(--ink);
  grid-column: 2;
  grid-row: 1;
}
.faq-list p {
  grid-column: 2;
  grid-row: 2;
  margin: 14px 0 0;
  color: var(--ink);
  opacity: 0.82;
  font-size: 16px;
  line-height: 1.62;
  max-width: 64ch;
}

/* ---------- Booking strip — dark, terracotta as the *single* bold accent
              on the page (research §"Color palette — accent-bold, ≤1
              element per page"). Asymmetric: copy biased to the right,
              giant italic word on the left. ---------- */
.section-booking {
  background: var(--ink);
  color: var(--paper);
  border-top: none;
}
.booking-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: end;
}
.booking-headline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(76px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--paper);
}
.booking-headline .acc { color: var(--accent-bold); }   /* THE one bold accent */
.booking-copy { display: flex; flex-direction: column; gap: 24px; max-width: 40ch; }
.booking-copy p {
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: rgba(244, 239, 231, 0.82);
  margin: 0;
}
.booking-cta { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; }
.btn-on-ink {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn-on-ink:hover {
  background: var(--accent-bold);
  border-color: var(--accent-bold);
  color: var(--paper);
}
.btn-link-on-ink {
  color: var(--paper);
  border-bottom-color: var(--accent-bold);
}
.btn-link-on-ink:hover { color: var(--accent-bold); }

/* ---------- Contact / hours / address — three columns, all left-aligned ---------- */
.section-contact { background: var(--paper-deep); border-top: none; }
.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  margin-top: clamp(48px, 5vw, 72px);
}
.contact-block h3 {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin: 0 0 16px;
}
.contact-block p,
.contact-block a {
  font-family: var(--display);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 6px;
}
.contact-block a {
  border-bottom: 1px solid var(--accent-warm);
  padding-bottom: 1px;
}
.hours-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.hours-list li {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.hours-list .day {
  color: var(--ink-muted);
  text-transform: capitalize;
  letter-spacing: 0.04em;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 7vw, 96px) 0 28px;
}
.footer-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.site-footer .wordmark { color: var(--paper); font-size: 24px; }
.site-footer .wordmark-mark { background: var(--accent-bold); }
.site-footer .wordmark-place { color: rgba(244, 239, 231, 0.55); }
.footer-tag {
  color: rgba(244, 239, 231, 0.7);
  margin: 18px 0 0;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.55;
}
.footer-label {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.45);
  margin: 0 0 14px;
  font-weight: 500;
}
.site-footer ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.site-footer ul a,
.footer-block p {
  color: rgba(244, 239, 231, 0.86);
  font-size: 14px;
  font-family: var(--body);
}
.site-footer ul a:hover { color: var(--paper); }
.footer-fine {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(244, 239, 231, 0.12);
  padding-top: 22px;
  margin: 36px 0 0;
  font-size: 12px;
  color: rgba(244, 239, 231, 0.5);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-fine em { font-style: italic; }

/* ---------- Responsive (≤920 px collapses asymmetric grids) ---------- */
@media (max-width: 920px) {
  .hero-wrap,
  .services-intro,
  .philosophy-wrap,
  .booking-wrap,
  .contact-wrap,
  .ambience-caption,
  .testimonials,
  .footer-wrap { grid-template-columns: 1fr; }

  .hero-meta { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 28px; }

  .service-row {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
  }
  .service-meta { grid-column: 2; text-align: left; padding-top: 16px; }

  .booking-headline { font-size: clamp(56px, 16vw, 88px); }

  .gallery-spread { grid-template-columns: repeat(6, 1fr); }
  .g1, .g6 { grid-column: span 6; }
  .g2, .g5 { grid-column: span 6; aspect-ratio: 4 / 3; }
  .g3, .g4 { grid-column: span 3; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .site-nav { gap: 14px; }
  .site-nav a:not(.lang) { display: none; }
  .wordmark-place { display: none; }
}