/* ============================================================
   MR. MOUSTACHE BARBERSHOP — mrmoustachedr.com
   El Estándar del Caballero Moderno
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand palette — taken from the logo */
  --black:       #0B0A09;
  --ink:         #100E0C;
  --charcoal:    #171512;
  --charcoal-2:  #211D19;

  --gold:        #DCB765;
  --gold-light:  #F0D79A;
  --gold-deep:   #C9A24B;
  --gold-line:   rgba(220, 183, 101, 0.40);
  --gold-faint:  rgba(220, 183, 101, 0.16);

  --cream:       #FAF7F1;
  --cream-dim:   rgba(250, 247, 241, 0.88);
  --cream-faint: rgba(250, 247, 241, 0.68);

  /* Type */
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --section-y: clamp(5rem, 11vw, 10rem);
  --gutter:    clamp(1.25rem, 5vw, 4.5rem);
  --maxw:      1240px;
  --maxw-text: 720px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--gold); color: var(--black); }

/* ---------- 3. TYPOGRAPHY PRIMITIVES ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.d-xl { font-size: clamp(2.6rem, 8.5vw, 6.6rem); }
.d-lg { font-size: clamp(2rem, 5.6vw, 4rem); }
.d-md { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.d-sm { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.eyebrow--muted { color: var(--cream-faint); }

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--cream-dim);
  max-width: var(--maxw-text);
}

.serif-italic {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-light);
}

.gold { color: var(--gold); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Stacked short lines, as written in the brand book */
.stack p { margin: 0; }
.stack--airy p { margin-bottom: 0.15em; }

/* ---------- 4. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 860px; }

section { position: relative; }

.section {
  padding-block: var(--section-y);
}

.section--alt   { background: var(--ink); }
.section--panel { background: var(--charcoal); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .eyebrow { margin-bottom: 1.4rem; }
.section-head .display { margin-bottom: 1.4rem; }

/* Thin gold rule used as a divider */
.rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  border: 0;
}

.rule--short {
  width: 72px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 1.75rem 0;
}

.rule--center { margin-inline: auto; }

/* Diamond ornament from the brand collateral */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 2rem 0;
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: clamp(38px, 8vw, 90px);
  background: var(--gold-line);
}
.ornament i {
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover { color: var(--black); }
.btn:hover::after { transform: translateY(0); }

.btn--solid { background: var(--gold); color: var(--black); }
.btn--solid:hover { color: var(--black); }
.btn--solid::after { background: var(--gold-light); }

.btn--ghost { border-color: var(--gold-line); color: var(--cream-dim); }
.btn--ghost:hover { border-color: var(--gold); color: var(--black); }

.btn--sm { padding: 0.8rem 1.5rem; font-size: 0.64rem; letter-spacing: 0.22em; }
.btn--block { width: 100%; }

/* Text link with animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.link:hover { border-color: var(--gold); color: var(--gold-light); }

/* ---------- 6. HEADER / NAV ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 1.1rem;
}

.header.is-scrolled {
  background: rgba(11, 10, 9, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--gold-faint);
  padding-block: 0.65rem;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.brand__mark { width: 52px; height: 52px; transition: width 0.5s var(--ease), height 0.5s var(--ease); }
.header.is-scrolled .brand__mark { width: 42px; height: 42px; }

.brand__text { line-height: 1.15; }
.brand__name {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  display: block;
}
.brand__tag {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.nav__desktop {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
}

.nav__link {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }

/* Language switch */
.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--gold-line);
  overflow: hidden;
}
.lang button {
  padding: 0.45rem 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-faint);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.lang button.is-active { background: var(--gold); color: var(--black); }
.lang button:not(.is-active):hover { color: var(--cream); }

/* Hamburger */
.burger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid var(--gold-line);
  transition: border-color 0.35s var(--ease);
}
.burger:hover { border-color: var(--gold); }
.burger span {
  display: block;
  width: 18px; height: 1px;
  background: var(--gold);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.header__cta { display: none; }

/* ---------- 7. FULLSCREEN MENU ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  display: flex;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 8.5rem 3.5rem;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
  margin-block: auto; /* centres when it fits, top-aligns when it overflows */
}

.menu__list { list-style: none; }
.menu__list li { overflow: hidden; }

.menu__item {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  line-height: 1.35;
  color: var(--cream);
  display: inline-block;
  transition: color 0.4s var(--ease), transform 0.5s var(--ease);
  transform: translateY(105%);
}
.menu.is-open .menu__item { transform: translateY(0); }
.menu__item:hover { color: var(--gold); }

.menu__num {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  margin-right: 0.9rem;
  vertical-align: middle;
}

.menu__aside { border-top: 1px solid var(--gold-faint); padding-top: 2rem; }
.menu__aside .eyebrow { margin-bottom: 1rem; }
.menu__aside p, .menu__aside a { color: var(--cream-dim); font-size: 0.92rem; }
.menu__aside a:hover { color: var(--gold); }
.menu__block { margin-bottom: 2rem; }

/* ---------- 8. HERO ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-block: 8rem 8.5rem;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,   rgba(201,162,75,0.13), transparent 62%),
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(201,162,75,0.09), transparent 60%),
    var(--black);
  z-index: 0;
}

/* Faint concentric rings echoing the logo badge */
.hero__rings {
  position: absolute;
  top: 50%; left: 50%;
  width: min(115vh, 115vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(201,162,75,0.10);
  z-index: 0;
  pointer-events: none;
}
.hero__rings::before, .hero__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,162,75,0.08);
}
.hero__rings::before { inset: 9%; }
.hero__rings::after  { inset: 20%; border-style: dotted; border-color: rgba(201,162,75,0.14); }

.hero__inner { position: relative; z-index: 2; width: 100%; text-align: center; }

.hero__mark { width: clamp(84px, 12vw, 118px); margin: 0 auto 2.4rem; }

.hero__title { margin-bottom: 2rem; }

.hero__sub {
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  color: var(--cream-dim);
  line-height: 1.85;
  margin-bottom: 1.6rem;
}

.hero__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3rem;
}
.hero__pillars span:not(:last-child)::after {
  content: "·";
  margin-left: 1.4rem;
  color: var(--gold-deep);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3.5rem;
}

.hero__place {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.scroll-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.scroll-cue span {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.scroll-cue i {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  display: block;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}

/* ---------- 9. SPLIT / EDITORIAL BLOCKS ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
  border: 1px solid var(--gold-faint);
  overflow: hidden;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder styling for image slots awaiting real photography */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, transparent, transparent 14px, rgba(201,162,75,0.035) 14px, rgba(201,162,75,0.035) 28px),
    var(--charcoal);
  text-align: center;
  padding: 1.5rem;
}
.ph img.ph__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.45;
  flex: 0 0 auto;
}
.ph__label {
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-faint);
  line-height: 1.9;
}

/* ---------- 10. SERVICE CATEGORIES ---------- */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cat {
  padding: 0.6rem 1.15rem;
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  border: 1px solid var(--gold-faint);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
  white-space: nowrap;
}
.cat:hover { color: var(--cream); border-color: var(--gold-line); }
.cat.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); }

.svc-group { margin-bottom: clamp(3rem, 6vw, 5rem); }
.svc-group.is-hidden { display: none; }

.svc-group__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--gold-faint);
}
.svc-group__title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  color: var(--gold);
  letter-spacing: 0.02em;
}
/* OJO: nada de flex-basis aquí. El encabezado es columna en el teléfono,
   así que un basis de 220px se aplicaba al ALTO y abría un hueco vacío.
   El basis vive en la consulta de pantalla ancha, donde ya es fila. */
.svc-group__sub { font-size: 0.88rem; color: var(--cream-faint); flex: 0 1 auto; }
.svc-group__count {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  border: 1px solid var(--gold-faint);
  padding: 0.15rem 0.5rem;
}

.svc-note {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--cream-faint);
  max-width: 60ch;
  margin: clamp(1rem, 2vw, 2rem) auto 0;
}

/* ---------- SERVICE CARDS ---------- */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gold-faint);
  border: 1px solid var(--gold-faint);
}

.svc {
  background: var(--ink);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.5s var(--ease);
  position: relative;
}
.svc:hover { background: var(--charcoal); }

.svc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.svc__name {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--cream);
  flex: 1 1 auto;
  min-width: 0;
}
.svc__price {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  color: var(--gold);
  white-space: nowrap;
  flex: 0 0 auto;
}
.svc__desc { color: var(--cream-dim); font-size: 0.93rem; }

.svc__inc {
  font-size: 0.79rem;
  line-height: 1.75;
  color: var(--cream-faint);
  padding-top: 0.9rem;
  border-top: 1px dotted rgba(201,162,75,0.18);
}
.svc__inc b {
  display: block;
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.35rem;
}

.svc__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gold-light);
}

.svc__note-in {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--cream-faint);
  border-left: 1px solid var(--gold-line);
  padding-left: 0.9rem;
}

.svc__foot { margin-top: auto; padding-top: 0.4rem; }

.svc--free .svc__price {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  padding: 0.25rem 0.6rem;
}
.svc__meta {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}


/* Tiered price rows (Curls, Faciales) */
.tiers { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.tiers li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--cream-dim);
  padding-bottom: 0.6rem;
  border-bottom: 1px dotted rgba(201,162,75,0.18);
}
.tiers li:last-child { border-bottom: 0; padding-bottom: 0; }
.tiers b { color: var(--gold); font-weight: 400; font-family: var(--serif); white-space: nowrap; }

/* ---------- 11. PILLAR GRID (The Standard) ---------- */
.pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--gold-faint); }

.pillar {
  background: var(--black);
  padding: clamp(1.9rem, 3.5vw, 2.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: background 0.5s var(--ease);
}
.pillar:hover { background: var(--ink); }
.pillar__num {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--gold-deep);
}
.pillar__name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  color: var(--gold);
  letter-spacing: 0.04em;
}
.pillar p { color: var(--cream-dim); font-size: 0.92rem; }

/* ---------- 12. ARTISTS ---------- */
.artists { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }

.artist { text-align: center; }
.artist__media {
  aspect-ratio: 3 / 4;
  background: var(--charcoal);
  border: 1px solid var(--gold-faint);
  overflow: hidden;
  margin-bottom: 1.1rem;
  transition: border-color 0.5s var(--ease);
}
.artist:hover .artist__media { border-color: var(--gold-line); }
.artist__media img { width: 100%; height: 100%; object-fit: cover; }
.artist__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--cream);
  margin-bottom: 0.3rem;
}
.artist__role {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.9rem;
}

/* ---------- 13. TRANSFORMATIONS ---------- */
.transforms { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }

.tf { border: 1px solid var(--gold-faint); background: var(--ink); }
.tf__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gold-faint); }
.tf__side { aspect-ratio: 1; background: var(--charcoal); position: relative; overflow: hidden; }
.tf__side img { width: 100%; height: 100%; object-fit: cover; }
.tf__tag {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(11,10,9,0.75);
  padding: 0.3rem 0.6rem;
  z-index: 2;
}
.tf__body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.tf__meta { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); }
.tf__meta b { color: var(--cream-dim); font-weight: 400; }

/* ---------- 14. TESTIMONIALS ---------- */
.quotes { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2rem); }

.quote {
  border-left: 1px solid var(--gold-line);
  padding: 0.4rem 0 0.4rem 1.6rem;
}
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--cream);
  margin-bottom: 1rem;
}
.quote cite {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- 15. JOURNAL ---------- */
.journal { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--gold-faint); border-block: 1px solid var(--gold-faint); }
.jrn {
  background: var(--black);
  padding: 1.5rem clamp(1rem, 2.5vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  transition: background 0.45s var(--ease), padding-left 0.45s var(--ease);
}
.jrn:hover { background: var(--ink); padding-left: calc(clamp(1rem, 2.5vw, 2rem) + 10px); }
.jrn__num { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gold-deep); flex-shrink: 0; }
.jrn__title { font-family: var(--serif); font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--cream); line-height: 1.45; }
.jrn__soon {
  margin-left: auto;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--gold-faint);
  padding: 0.25rem 0.55rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- 16. COLLECTION / CARDS ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }

.card {
  border: 1px solid var(--gold-faint);
  background: var(--ink);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.card:hover { border-color: var(--gold-line); background: var(--charcoal); }
.card__title { font-family: var(--serif); font-size: 1.35rem; color: var(--gold); letter-spacing: 0.03em; }
.card p { color: var(--cream-dim); font-size: 0.92rem; flex: 1; }

/* Gift card visual */
.giftcard {
  border: 1px solid var(--gold-line);
  background: linear-gradient(145deg, var(--charcoal-2), var(--ink));
  padding: clamp(1.9rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.giftcard::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-faint);
  pointer-events: none;
}
.giftcard__mark { width: 62px; margin-bottom: 1.5rem; }
.giftcard__rows { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; margin-block: 1.75rem; }
.giftcard__rows li {
  display: flex; gap: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  border-bottom: 1px dotted rgba(201,162,75,0.2);
  padding-bottom: 0.55rem;
}
.giftcard__rows b { color: var(--gold); font-weight: 400; min-width: 76px; }

/* ---------- 17. CONTACT & HOURS ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }

.info-list { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; }
.info-list li { display: flex; flex-direction: column; gap: 0.3rem; }
.info-list dt, .info-list .k {
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.info-list .v { color: var(--cream); font-size: 0.98rem; line-height: 1.7; }
.info-list a.v:hover { color: var(--gold); }

.hours { list-style: none; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--gold-faint);
  font-size: 0.9rem;
  color: var(--cream-dim);
}
.hours li:last-child { border-bottom: 0; }
.hours b { color: var(--cream); font-weight: 400; }

.map-embed {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--gold-faint);
  background: var(--charcoal);
  overflow: hidden;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.9) contrast(0.85); }

/* ---------- 18. FAQ ---------- */
.faq { border-top: 1px solid var(--gold-faint); }

.faq__item { border-bottom: 1px solid var(--gold-faint); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--cream);
  transition: color 0.35s var(--ease);
}
.faq__q:hover { color: var(--gold); }

.faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq__icon::after  { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.faq__item.is-open .faq__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease), opacity 0.45s var(--ease), padding-bottom 0.55s var(--ease);
  opacity: 0;
  color: var(--cream-dim);
  font-size: 0.95rem;
}
.faq__item.is-open .faq__a { max-height: 340px; opacity: 1; padding-bottom: 1.6rem; }
.faq__a p + p { margin-top: 0.6rem; }
.faq__a .link { margin-top: 1rem; }

/* ---------- 19. NEWSLETTER ---------- */
.newsletter form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.newsletter input {
  flex: 1 1 220px;
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--cream);
  padding: 1rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  outline: none;
  transition: border-color 0.4s var(--ease);
}
.newsletter input::placeholder { color: var(--cream-faint); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.68rem; }
.newsletter input:focus { border-color: var(--gold); }
.newsletter__note { font-size: 0.72rem; color: var(--gold); margin-top: 0.9rem; min-height: 1.2em; }

/* ---------- 20. FOOTER ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--gold-faint); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 3.5rem;
}

.footer__mark { width: 76px; margin-bottom: 1.5rem; }
.footer__col h4 { margin-bottom: 1.4rem; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer__links a { font-size: 0.85rem; color: var(--cream-dim); transition: color 0.35s var(--ease); }
.footer__links a:hover { color: var(--gold); }

.footer__bottom {
  border-top: 1px solid var(--gold-faint);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.footer__bottom a:hover { color: var(--gold); }

/* ---------- 21. BOOKING MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__veil { position: absolute; inset: 0; background: rgba(5,5,4,0.86); backdrop-filter: blur(6px); }

.modal__box {
  position: relative;
  width: min(520px, 100%);
  max-height: 90svh;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--gold-line);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.5s var(--ease);
}
.modal.is-open .modal__box { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--cream-faint);
  font-size: 1.3rem;
  line-height: 1;
  transition: color 0.35s var(--ease);
}
.modal__close:hover { color: var(--gold); }

.modal__mark { width: 66px; margin: 0 auto 1.4rem; }
.modal__svc {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
  min-height: 1em;
}
.modal__title { margin-bottom: 0.9rem; }
.modal__text { color: var(--cream-dim); font-size: 0.92rem; margin-bottom: 2rem; }
.modal__opts { display: flex; flex-direction: column; gap: 0.85rem; }

.opt {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--gold-line);
  text-align: left;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}
.opt:hover { background: var(--charcoal); border-color: var(--gold); }
.opt__icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--gold); }
.opt__label { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--cream); }
.opt__hint { display: block; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--cream-faint); margin-top: 0.15rem; }
.opt__arrow { margin-left: auto; color: var(--gold); font-size: 1rem; }

.modal__foot { margin-top: 1.6rem; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--cream-faint); }

/* ---------- 22. FLOATING WHATSAPP ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  transform: scale(0);
  transition: transform 0.5s var(--ease), background 0.35s var(--ease);
}
.wa-float.is-visible { transform: scale(1); }
.wa-float:hover { background: var(--gold-light); }
.wa-float svg { width: 27px; height: 27px; }

/* ---------- 23. SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Category chips scroll sideways on phones instead of stacking */
@media (max-width: 760px) {
  .cats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 0.85rem;
  }
  .cats::-webkit-scrollbar { display: none; }
  .cat { scroll-snap-align: start; }
  .svc-group__head { gap: 0.3rem 0.7rem; }
}

@media (max-height: 700px) {
  .scroll-cue { display: none; }
  .hero { padding-block: 7rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .menu__item { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 24. RESPONSIVE ---------- */
@media (min-width: 640px) {
  .services  { grid-template-columns: repeat(2, 1fr); }
  .pillars   { grid-template-columns: repeat(2, 1fr); }
  .cards     { grid-template-columns: repeat(2, 1fr); }
  .quotes    { grid-template-columns: repeat(2, 1fr); }
  .artists   { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .split          { grid-template-columns: 1fr 1fr; }
  .split--wide-l  { grid-template-columns: 1.15fr 1fr; }
  .transforms     { grid-template-columns: repeat(3, 1fr); }
  .quotes         { grid-template-columns: repeat(3, 1fr); }
  .journal        { grid-template-columns: repeat(2, 1fr); }
  .cards          { grid-template-columns: repeat(3, 1fr); }
  .contact-grid   { grid-template-columns: 1fr 1fr; }
  .contact-grid--three { grid-template-columns: 1.1fr 0.9fr 1.2fr; }
  .footer__grid   { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
  .menu__grid     { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .menu__aside    { border-top: 0; border-left: 1px solid var(--gold-faint); padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); }
}

@media (min-width: 1024px) {
  .nav__desktop { display: flex; }
  .header__cta  { display: inline-flex; }
  .pillars      { grid-template-columns: repeat(5, 1fr); }
  .services     { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .svc__top { flex-direction: column; gap: 0.35rem; }
  .btn { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .brand__text { display: none; }
}

/* ============================================================
   25. REDISEÑO 2026 — home editorial + páginas internas
   ============================================================ */

/* Salto al contenido (accesibilidad) */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--gold);
  color: var(--black);
  padding: 0.8rem 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

.nav__link.is-current { color: var(--gold); }
.nav__link.is-current::after { width: 100%; }
.menu__item.is-current { color: var(--gold); }

/* ---------- HERO EDITORIAL (home) ---------- */
.hero--editorial {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 9rem 7rem;
  position: relative;
  overflow: hidden;
}

/* Capa de fotografía a sangre completa */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--black);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,10,9,0.88) 0%, rgba(11,10,9,0.30) 45%, rgba(11,10,9,0.92) 100%),
    radial-gradient(ellipse 74% 58% at 50% 50%, transparent 34%, rgba(11,10,9,0.50) 100%);
}

.hero--editorial .hero__inner { position: relative; z-index: 2; }

.hero__title--xl {
  font-size: clamp(2.9rem, 9.5vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.hero__place--sm {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: 2.4rem;
}

/* ---------- BLOQUE EDITORIAL (secciones del home) ---------- */
.ed {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.ed__body { max-width: 42ch; }
.ed__k { margin-bottom: 1.6rem; }
.ed__t { margin-bottom: 1.6rem; }
.ed__p { color: var(--cream-dim); font-size: clamp(1rem, 1.35vw, 1.14rem); margin-bottom: 2.2rem; }
.ed__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
  border: 1px solid var(--gold-faint);
  overflow: hidden;
}
.ed__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .ed { grid-template-columns: 1fr 1fr; }
  .ed--flip .ed__media { order: -1; }
  .ed--wide { grid-template-columns: 0.9fr 1.1fr; }
}

/* Sección centrada, sin imagen */
.ed--center { text-align: center; }
.ed--center .ed__body { max-width: 32ch; margin-inline: auto; }

/* Los cuatro pilares en una línea */
.pillars-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  margin-block: clamp(2.5rem, 5vw, 3.5rem);
}
.pillars-line span {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  color: var(--gold);
  letter-spacing: 0.01em;
}

/* Manifiesto breve */
.manifesto {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.28;
  color: var(--cream);
}

/* ---------- INSTAGRAM ---------- */
.ig {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gold-faint);
  border: 1px solid var(--gold-faint);
}
@media (min-width: 700px)  { .ig { grid-template-columns: repeat(4, 1fr); } }

.ig__tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--charcoal);
  overflow: hidden;
  display: block;
}
.ig__tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease), opacity 0.5s var(--ease);
}
.ig__tile:hover img { transform: scale(1.06); opacity: 0.55; }

.ig__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  background: rgba(11,10,9,0.35);
}
.ig__tile:hover .ig__veil { opacity: 1; }
.ig__veil svg { width: 26px; height: 26px; }

.ig-handle {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- CABECERA DE PÁGINA INTERNA ---------- */
.pagehead {
  padding-block: clamp(8rem, 14vw, 12rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--gold-faint);
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201,162,75,0.10), transparent 65%);
  pointer-events: none;
}
.pagehead__inner { position: relative; z-index: 1; }
.pagehead .eyebrow { margin-bottom: 1.4rem; }
.pagehead .display { margin-bottom: 1.4rem; }
.pagehead .lede { margin-inline: auto; }

/* ---------- HISTORIA ---------- */
.story-body p {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.85;
  color: var(--cream-dim);
  margin-bottom: 1.6rem;
  max-width: 62ch;
}
.story-body p.is-lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--cream);
}
.story-close {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.25;
  margin-top: 1rem;
}
.story-close .gold { display: block; }

.story-year {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 12vw, 8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-line);
  letter-spacing: 0.04em;
}

/* ---------- PASOS (gift cards) ---------- */
.steps { list-style: none; counter-reset: s; display: grid; gap: 1px; background: var(--gold-faint); border: 1px solid var(--gold-faint); }
.steps li {
  counter-increment: s;
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  color: var(--cream-dim);
  font-size: 0.95rem;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  padding-top: 0.35rem;
  flex-shrink: 0;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- RESEÑAS ---------- */
.review-band {
  border: 1px solid var(--gold-line);
  background: linear-gradient(150deg, var(--charcoal-2), var(--ink));
  padding: clamp(2rem, 4.5vw, 3.2rem);
  text-align: center;
}
.stars {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 1.2rem;
  color: var(--gold);
}
.stars svg { width: 20px; height: 20px; }

/* ---------- UTILIDADES ---------- */
.stack-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.stack-cta--left { justify-content: flex-start; }

[hidden] { display: none !important; }


/* ---------- HERO: la pregunta + la línea de marca ---------- */
.hero__question {
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 18ch;
  margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  text-wrap: balance;
}

.hero__brandline {
  font-size: clamp(0.62rem, 1.1vw, 0.76rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem);
  position: relative;
  padding-top: 1.8rem;
}
.hero__brandline::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 1px;
  background: var(--gold-line);
}


/* Retratos del equipo: pocos por fila, grandes */
.artist__media { aspect-ratio: 3 / 4; }
.artist__name  { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
/* En pantallas anchas cabe en una línea; en el teléfono DEBE poder
   partirse, o "Estilista Profesional" empuja toda la página a lo ancho
   y el botón del menú se sale de la pantalla. */
@media (min-width: 900px) { .artist__role { white-space: nowrap; } }

@media (min-width: 1100px) {
  .artists { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
}


/* ---------- HERO: la pregunta como línea reflexiva bajo el titular ---------- */
.hero__mirror {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  color: var(--gold-light);
  max-width: 26ch;
  margin: 0 auto clamp(2.2rem, 4.5vw, 3.2rem);
  position: relative;
  padding-top: 1.9rem;
  text-wrap: balance;
}
.hero__mirror::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 1px;
  background: var(--gold-line);
}

.hero--editorial .hero__title--xl { margin-bottom: 0; }


/* Dos redes bajo un mismo usuario */
.sublinks { display: flex; gap: 1.1rem; margin-top: 0.35rem; }
.sublinks a {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--gold-faint);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.sublinks a:hover { border-bottom-color: var(--gold); color: var(--gold-light); }

/* ============================================================
   26. NUESTRA HISTORIA — editorial por capítulos
   ============================================================ */

/* ---------- Intro ---------- */
.story-intro {
  min-height: 88svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(9rem, 16vw, 13rem) clamp(5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.story-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 30%, rgba(201,162,75,0.12), transparent 68%);
  pointer-events: none;
}
.story-intro__inner { position: relative; z-index: 1; }
.story-intro .eyebrow { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.story-intro__t {
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.story-intro__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.6;
  color: var(--gold-light);
  position: relative;
  padding-top: 2rem;
}
.story-intro__sub::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 1px;
  background: var(--gold-line);
}

/* ---------- Capítulo ---------- */
.chapter { padding-block: clamp(4.5rem, 10vw, 9rem); }

.chapter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.chapter__label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.chapter__label--center { text-align: center; }

.chapter__body p,
.story-body p {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.9;
  color: var(--cream-dim);
  max-width: 58ch;
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.chapter__body p:last-child,
.story-body p:last-child { margin-bottom: 0; }

.chapter__lead {
  font-family: var(--serif) !important;
  font-size: clamp(1.3rem, 2.6vw, 2rem) !important;
  line-height: 1.42 !important;
  color: var(--cream) !important;
  max-width: 30ch !important;
}

/* Año en grande, contorneado */
.year-mark {
  font-family: var(--serif);
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-line);
  display: block;
}

@media (min-width: 900px) {
  .chapter__grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 6vw, 6rem); }
  .chapter__aside { position: sticky; top: 22vh; }
}

/* ---------- Banda a sangre (capítulo 02) ---------- */
.band {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
  border-block: 1px solid var(--gold-faint);
}

.band__media {
  min-height: 58vw;
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.band__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.band__media .ph { position: absolute; inset: 0; }

.band__body {
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.band__body p {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.9;
  color: var(--cream-dim);
  max-width: 46ch;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

.band__statement {
  font-family: var(--serif) !important;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em;
  color: var(--gold) !important;
  max-width: 16ch !important;
  margin-bottom: 0 !important;
  position: relative;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.band__statement::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 1px;
  background: var(--gold);
}

@media (min-width: 900px) {
  .band { grid-template-columns: 1fr 1fr; }
  .band__media { min-height: 86vh; }
}

/* ---------- Capítulo 03 · los cuatro valores ---------- */
.chapter--vision { background: var(--black); }

.values-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.6rem);
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--gold-faint);
}
.values-line span {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  color: var(--gold);
  letter-spacing: -0.01em;
}

/* ---------- Retícula de familia ---------- */
.family-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.family-grid > div {
  background: var(--charcoal);
  border: 1px solid var(--gold-faint);
  overflow: hidden;
  position: relative;
}
.family-grid img { width: 100%; height: 100%; object-fit: cover; }
.family-grid__tall  { aspect-ratio: 3 / 4; }
.family-grid__wide  { aspect-ratio: 4 / 3; }
.family-grid__small { aspect-ratio: 1; }

@media (min-width: 800px) {
  .family-grid {
    grid-template-columns: 1.1fr 1.4fr 0.9fr;
    align-items: end;
  }
  .family-grid__wide { aspect-ratio: 4 / 5; }
  .family-grid__small { aspect-ratio: 3 / 4; }
}

/* ---------- Capítulo 04 ---------- */
.chapter--legacy { background: var(--ink); }

/* ---------- Cierre ---------- */
.closing {
  padding-block: clamp(7rem, 16vw, 14rem);
  background: var(--black);
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(201,162,75,0.10), transparent 70%);
  pointer-events: none;
}
.closing .wrap { position: relative; z-index: 1; }

.closing__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  color: var(--cream-dim);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.closing__big {
  font-size: clamp(2rem, 7.5vw, 6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  max-width: 16ch;
  margin-inline: auto;
}

/* ============================================================
   27. LEGIBILIDAD — texto más grande y con más contraste
   Pensado para lectura cómoda a partir de los 40.
   ============================================================ */

.eyebrow            { font-size: 0.82rem; letter-spacing: 0.26em; }
.lede, .ed__p       { font-size: clamp(1.14rem, 1.5vw, 1.34rem); line-height: 1.8; }
.btn                { font-size: 0.86rem; letter-spacing: 0.16em; padding: 1.15rem 2.3rem; }
.btn--sm            { font-size: 0.78rem; letter-spacing: 0.14em; padding: 0.95rem 1.7rem; }
.nav__link          { font-size: 0.8rem; letter-spacing: 0.14em; }
.menu__aside p,
.menu__aside a      { font-size: 1.02rem; }
.brand__name        { font-size: 1.05rem; }
.brand__tag         { font-size: 0.62rem; }
.lang button        { font-size: 0.72rem; padding: 0.5rem 0.8rem; }
.hero__place--sm    { font-size: 0.76rem; letter-spacing: 0.24em; }
.cat                { font-size: 0.8rem; letter-spacing: 0.12em; padding: 0.8rem 1.4rem; }
.svc-group__sub     { font-size: 1.04rem; color: var(--cream-faint); }
.svc-note           { font-size: 0.94rem; }
.artist__name       { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.artist__role       { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--gold-deep); }
.info-list .k,
.chapter__label     { font-size: 0.8rem; }
.info-list .v       { font-size: 1.12rem; }
.hours li           { font-size: 1.08rem; }
.footer__links a    { font-size: 1.02rem; }
.sublinks a         { font-size: 0.78rem; }
.tf__meta           { font-size: 0.86rem; }
.jrn__title         { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.faq__q             { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.faq__a             { font-size: 1.06rem; }
.quote p            { font-size: clamp(1.1rem, 1.7vw, 1.32rem); }
.quote cite         { font-size: 0.76rem; }
.card p             { font-size: 1.02rem; }
.steps li           { font-size: 1.04rem; }
.giftcard__rows li  { font-size: 0.8rem; }
.newsletter input   { font-size: 0.92rem; }
.newsletter input::placeholder { font-size: 0.8rem; }
.opt__label         { font-size: 1.15rem; }
.opt__hint          { font-size: 0.8rem; }
.modal__text        { font-size: 1.04rem; }
.modal__svc         { font-size: 0.78rem; }
.modal__foot        { font-size: 0.8rem; }
.footer__bottom     { font-size: 0.76rem; }
.ph__label          { font-size: 0.7rem; }
.tf__tag            { font-size: 0.68rem; }
.jrn__soon,
.svc-group__count   { font-size: 0.68rem; }

/* ============================================================
   28. LA CARTA — servicios en filas, no en tarjetas
   ============================================================ */
.svc-group { margin-bottom: clamp(3rem, 6vw, 5rem); }
.svc-group.is-hidden { display: none; }

.svc-group__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.2rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold-line);
}
.svc-group__title {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--gold);
  letter-spacing: 0.01em;
}

.menu-list { list-style: none; }

.mrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 2rem;
  padding-block: clamp(1.4rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--gold-faint);
  cursor: pointer;
  transition: background 0.4s var(--ease), padding-inline 0.4s var(--ease);
}
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: rgba(220,183,101,0.05); padding-inline: 1rem; }

.mrow__l { display: flex; flex-direction: column; gap: 0.4rem; }

.mrow__name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.25;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.mrow__desc {
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.65;
  color: var(--cream-dim);
  max-width: 56ch;
}

.mrow__note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cream-faint);
  border-left: 1px solid var(--gold-line);
  padding-left: 0.9rem;
  margin-top: 0.4rem;
  max-width: 52ch;
}

.mrow__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
}

.mrow__price {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mrow__dur {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-faint);
  white-space: nowrap;
}

.mrow__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
  white-space: nowrap;
}
.mrow:hover .mrow__cta,
.mrow__cta:hover { border-bottom-color: var(--gold); color: var(--gold-light); }
.mrow__cta span { transition: transform 0.35s var(--ease); }
.mrow:hover .mrow__cta span { transform: translateX(4px); }

.mrow--free .mrow__price {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  padding: 0.3rem 0.7rem;
}

@media (min-width: 820px) {
  .mrow { grid-template-columns: 1fr auto; align-items: start; }
  .mrow__r {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    text-align: right;
    min-width: 11rem;
  }
  .svc-group__head { flex-direction: row; align-items: baseline; gap: 1.5rem; }
  .svc-group__sub  { flex: 1 1 220px; }
  .svc-group__sub { flex: 1; text-align: right; }
}

/* ============================================================
   29. FOTOGRAFÍA EDITORIAL
   Las fotos dejan de ser rectángulos apoyados sobre el negro:
   pierden el marco, se funden por los bordes y llevan un velo
   de color de la casa. Todas comparten el mismo tratamiento.
   ============================================================ */

.ed__media,
.artist__media,
.split__media,
.tf__side,
.band__media,
.family-grid > div {
  border: 0;
  position: relative;
  background: var(--charcoal);
}

/* Velo cálido + fundido hacia el negro por los bordes */
.ed__media::after,
.artist__media::after,
.band__media::after,
.family-grid > div::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,10,9,.24) 0%, transparent 24%, transparent 74%, rgba(11,10,9,.40) 100%),
    linear-gradient(90deg, rgba(11,10,9,.22) 0%, transparent 15%, transparent 85%, rgba(11,10,9,.22) 100%),
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(11,10,9,.26) 100%);
  z-index: 1;
  transition: opacity .6s var(--ease);
}

/* Filete de oro finísimo: el detalle de la casa, no un borde de caja */
.ed__media::before,
.band__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(220,183,101,.22);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ed__media img,
.artist__media img,
.band__media img,
.family-grid img {
  filter: saturate(.96) contrast(1.02);
  transition: transform 1.4s var(--ease), filter .6s var(--ease);
}

.ed:hover .ed__media img,
.artist:hover .artist__media img { transform: scale(1.03); }
.artist:hover .artist__media::after { opacity: .72; }

/* El retrato del equipo se funde por abajo, hacia el nombre */
.artist__media::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,.18) 0%, transparent 20%, transparent 62%, rgba(11,10,9,.86) 100%),
    radial-gradient(125% 95% at 50% 38%, transparent 58%, rgba(11,10,9,.26) 100%);
}
.artist__media { margin-bottom: 0; }
.artist__name  { margin-top: -2.6rem; position: relative; z-index: 3; padding-inline: .5rem; }

/* Antes / después: mismo tratamiento, sin cajas */
.tf__side::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 46%, rgba(11,10,9,.42) 100%);
}
.tf { border: 0; background: transparent; }
.tf__pair { background: transparent; gap: 2px; }
.tf__body { padding: 1.4rem 0 0; }


/* Filas más compactas y categorías fijas al desplazar */
.mrow { padding-block: clamp(1.05rem, 1.9vw, 1.35rem); gap: 0.45rem 2rem; }
.mrow__l { gap: 0.3rem; }
.mrow__r { gap: 0.3rem; }
.mrow__cta { padding-bottom: 0.18rem; }
.svc-group { margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }

.cats {
  position: sticky;
  top: 74px;
  z-index: 40;
  background: linear-gradient(180deg, var(--black) 62%, rgba(11,10,9,0));
  padding-block: 1rem 1.4rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.header.is-scrolled ~ * .cats { top: 62px; }

@media (max-width: 760px) {
  .cats { top: 66px; padding-block: 0.9rem 1.1rem; }
}

/* ---------- Fondo del hero: video en bucle o fotografía ---------- */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                       /* aparece solo cuando hay archivo */
  transition: opacity 1.6s var(--ease);
  /* La fotografía ya viene oscurecida y desaturada desde el archivo,
     así que aquí no se vuelve a oscurecer: solo un ajuste fino. */
  filter: saturate(.9) contrast(1.04);
  /* Anclada abajo: al recortar, lo que se pierde es el techo, no las
     sillas ni el letrero. Es lo que sube la imagen en pantalla. */
  object-position: 50% 88%;
}
.hero__video.is-ready { opacity: .62; }

/* Quien prefiere menos movimiento ve el fotograma, no el video */
@media (prefers-reduced-motion: reduce) {
  .hero__video { animation: none; }
}

/* ============================================================
   30. RESEÑAS REALES
   Valoración general siempre visible; las reseñas, cuando las haya,
   en un carril horizontal que se desliza.
   ============================================================ */
.rev-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.rev-head .stars { display: flex; gap: 0.3rem; color: var(--gold); }
.rev-head .stars svg { width: 22px; height: 22px; }

.rev-score {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--cream-dim);
}
.rev-score b {
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--gold);
  margin-right: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.rev-count {
  font-size: 0.84rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 0.6rem;
}

.rev-hint {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-align: center;
  margin-bottom: 1.2rem;
}

.rev-rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.4rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.rev-rail::-webkit-scrollbar { height: 3px; }
.rev-rail::-webkit-scrollbar-thumb { background: var(--gold-line); }
.rev-rail:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

.rev {
  flex: 0 0 min(30rem, 82vw);
  scroll-snap-align: start;
  background: var(--ink);
  border: 1px solid var(--gold-faint);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rev .stars { display: flex; gap: 0.25rem; color: var(--gold); }
.rev .stars svg { width: 16px; height: 16px; }
.rev p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--cream);
  flex: 1;
}
.rev cite {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   31. RESEÑAS DE GOOGLE
   Tarjetas con autor, marca de Google y enlace a la ficha real.
   ============================================================ */
.rev-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 0.4rem;
}

.gmark { width: 17px; height: 17px; flex: 0 0 auto; margin-left: auto; opacity: 0.9; }

.rev-foot {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--cream-faint);
}

/* La tarjeta entera es un enlace, pero no debe parecer un botón */
.rev__link {
  flex: 0 0 min(30rem, 82vw);
  scroll-snap-align: start;
  display: flex;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.rev__link .rev { flex: 1 1 auto; width: 100%; }
.rev__link:hover .rev { border-color: var(--gold-line); }
.rev__link:hover { transform: translateY(-3px); }
.rev__link:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

.rev__who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.rev__pic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--gold-faint);
}
.rev__pic--letter {
  display: grid;
  place-items: center;
  background: var(--gold-faint);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1;
}
.rev__who cite {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.rev__when {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--cream-faint);
  letter-spacing: 0.02em;
}

/* Bloque "deja tu reseña" */
.rev-invite {
  text-align: center;
  border-top: 1px solid var(--gold-faint);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 600px) {
  .rev-cta { flex-direction: column; align-items: stretch; }
  .rev-cta .btn { justify-content: center; }
}


/* ============================================================
   32. TELÉFONO
   Red de seguridad contra desbordes y áreas de toque cómodas.
   Pensado para clientes de 40+ usando el móvil con una mano.
   ============================================================ */

/* Nada puede empujar la página a lo ancho y sacar el menú de pantalla.
   'clip' en vez de 'hidden' para no romper position:sticky. */
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
.header, .menu { max-width: 100%; }

@media (max-width: 899px) {
  /* Área de toque mínima cómoda en los controles del encabezado */
  .lang button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
  }
  .burger { min-width: 48px; min-height: 48px; }

  /* El menú a pantalla completa: más grande y más fácil de acertar */
  .menu__item {
    font-size: clamp(1.75rem, 6.4vw, 2.4rem);
    line-height: 1.45;
    padding-block: 0.18rem;
  }
  .menu__num { font-size: 0.66rem; margin-right: 0.7rem; }

  /* Los nombres del equipo, con aire para partirse en dos líneas */
  .artist__role { line-height: 1.5; letter-spacing: 0.14em; }

  /* En pantalla grande el nombre se funde sobre el degradado del retrato.
     En el teléfono el retrato es pequeño y el nombre caía sobre la cara:
     aquí baja debajo de la foto, que además se lee mejor de cerca. */
  .artist__media { margin-bottom: 0.9rem; }
  .artist__name  { margin-top: 0; }

  /* Botones a lo ancho: más fáciles de acertar que dos estrechos */
  .stack-cta { flex-direction: column; align-items: stretch; }
  .stack-cta .btn { justify-content: center; width: 100%; }
  .stack-cta--left { align-items: stretch; }

  /* Las filas de la carta respiran */
  .mrow { padding-block: 1.15rem; }
  .mrow__cta { min-height: 44px; }

  /* Enlaces del pie: 18px de alto era demasiado poco para el dedo */
  .footer__links a,
  .menu__aside a {
    display: block;
    padding-block: 0.62rem;
  }
  .footer__links li + li { margin-top: 0; }
  .sublinks a { display: inline-block; padding-block: 0.5rem; }

  /* Cerrar el modal y los datos de contacto: dedos, no ratones */
  .modal__close { min-width: 46px; min-height: 46px; }
  .info-list .v a,
  .info-list a { display: inline-block; padding-block: 0.45rem; }
}

/* Muescas y bordes redondeados del iPhone */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* La barra de categorías se desliza: un degradado en el borde derecho
   lo hace evidente en vez de parecer texto cortado. */
@media (max-width: 899px) {
  .cats-wrap, #service-cats { position: relative; }
  #service-cats {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
    scroll-padding-inline: 1rem;
  }
  #service-cats.is-end {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .cat { min-height: 44px; display: inline-flex; align-items: center; }

  /* Precio, duración y reserva sin apelotonarse en 350px */
  .mrow__r { gap: 0.4rem 0.95rem; }
  .mrow__dur { letter-spacing: 0.1em; }
  .mrow__cta { letter-spacing: 0.12em; }

  /* Que la barra fija no tape el título al saltar a una categoría */
  .svc-group, .svc-group__head { scroll-margin-top: 140px; }
}

/* ============================================================
   33. INSTAGRAM SIN CONTENIDO
   Mientras no haya feed conectado ni imágenes de respaldo, la
   sección se reduce al titular y al botón. Ocho recuadros vacíos
   parecen un error; una invitación limpia, no.
   ============================================================ */
.ig.ig--empty { display: none; }
.section--igempty .section-head { margin-bottom: 0; }
.section--igempty .stack-cta { margin-top: clamp(1.6rem, 3vw, 2.2rem) !important; }


/* ============================================================
   34. HERO CON FOTOGRAFÍA
   Los aros del logo eran el fondo cuando no había imagen.
   Con una foto detrás compiten, así que se atenúan.
   ============================================================ */
.hero--editorial:has(.hero__video.is-ready) .hero__rings { opacity: 0.35; }

/* Sombra suave bajo el titular: garantiza la lectura sobre cualquier
   zona clara de la fotografía, sin que se note como sombra. */
.hero__title--xl,
.hero__mirror,
.hero__place--sm {
  text-shadow: 0 2px 24px rgba(11,10,9,0.75), 0 1px 3px rgba(11,10,9,0.55);
}

/* ============================================================
   35. SECCIÓN CON FOTOGRAFÍA DE FONDO
   Usada en 05 · Nuestra Historia. La imagen queda muy por debajo
   del texto: el velo garantiza la lectura pase lo que pase.
   ============================================================ */
.section--photo { position: relative; overflow: hidden; }
.section--photo > .wrap { position: relative; z-index: 2; }

.panel__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0.26;
  filter: saturate(.72) contrast(1.04);
}
/* Una imagen que no existe no debe dejar el icono de foto rota */
.panel__photo img:not([src]) { display: none; }

.panel__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,18,16,0.82) 0%, rgba(20,18,16,0.58) 45%, rgba(20,18,16,0.86) 100%),
    radial-gradient(ellipse 78% 62% at 50% 50%, transparent 26%, rgba(20,18,16,0.62) 100%);
}

/* La misma red de seguridad que en el hero para el texto encima */
.section--photo .display,
.section--photo .manifesto,
.section--photo .lede,
.section--photo .ed__p,
.section--photo .eyebrow {
  text-shadow: 0 2px 20px rgba(11,10,9,0.62);
}

/* Con foto de fondo, la del recuadro necesita su propio fondo opaco
   para no mezclarse con la de detrás. */
.section--photo .ed__media { background: var(--black); }


/* La fachada se muestra sin retoque en los dos sitios donde aparece:
   ni saturación ni contraste añadidos por CSS. */
.band__media img[src*="historia/archivo"] { filter: none; }

/* ------------------------------------------------------------
   03 · La Visión — las dos fotografías de la casa
   Se muestran sin retoque: ni filtro ni velo encima. Las dos
   vienen en vertical de teléfono, así que los recuadros siguen
   esa proporción y no se recorta nada.
   ------------------------------------------------------------ */
/* Las fotos de La Visión van sin retoque: ni velo cálido ni fundido.
   Todas comparten el mismo alto para que la fila lea como una sola pieza. */
.family-grid--limpia { grid-template-columns: 1fr; }

.family-grid--limpia .family-grid__tall,
.family-grid--limpia .family-grid__wide,
.family-grid--limpia .family-grid__small { aspect-ratio: 9 / 16; }

.family-grid--limpia img { filter: none; }
.family-grid--limpia > div::after { display: none; }

@media (min-width: 800px) {
  .family-grid--limpia {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
  .family-grid--limpia .family-grid__tall,
  .family-grid--limpia .family-grid__wide,
  .family-grid--limpia .family-grid__small { aspect-ratio: 9 / 16; }
}

/* La foto de 01 es más oscura que la de 05, así que necesita algo más
   de presencia y un encuadre hacia el rostro y las manos. */
#experiencia .panel__photo img {
  opacity: 0.34;
  object-position: 50% 58%;
}
#experiencia .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(20,18,16,0.76) 0%, rgba(20,18,16,0.48) 45%, rgba(20,18,16,0.82) 100%),
    radial-gradient(ellipse 80% 64% at 50% 50%, transparent 30%, rgba(20,18,16,0.56) 100%);
}

/* 02 · The Standard — las herramientas del oficio.
   Sección larga (lleva las reseñas dentro), así que la imagen se fija
   para que no se estire, y baja de intensidad: aquí hay mucho texto. */
#standard .panel__photo img {
  opacity: 0.38;
  object-position: 50% 32%;
}
#standard .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.72) 0%, rgba(11,10,9,0.46) 40%, rgba(11,10,9,0.78) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, rgba(11,10,9,0.50) 100%);
}

/* La portada de Nuestra Historia: el local en obra, 2016.
   Es una foto clara (luminancia 168), así que pide menos presencia
   que las oscuras para no comerse el texto. */
.story-intro .panel__photo img {
  opacity: 0.44;
  object-position: 50% 55%;
}
.story-intro .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.84) 0%, rgba(11,10,9,0.56) 45%, rgba(11,10,9,0.88) 100%),
    radial-gradient(ellipse 78% 60% at 50% 45%, transparent 26%, rgba(11,10,9,0.58) 100%);
}
.section--photo .story-intro__sub { text-shadow: 0 2px 20px rgba(11,10,9,0.62); }

/* Capítulo 01 · El comienzo: el montaje del local detrás del texto.
   El "2016" de la izquierda queda encima de la foto. */
.chapter--comienzo .panel__photo img {
  opacity: 0.40;
  object-position: 50% 46%;
}
.chapter--comienzo .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.88) 0%, rgba(11,10,9,0.58) 45%, rgba(11,10,9,0.90) 100%),
    radial-gradient(ellipse 82% 66% at 50% 48%, transparent 22%, rgba(11,10,9,0.60) 100%);
}
.chapter--comienzo .year-mark { text-shadow: 0 2px 24px rgba(11,10,9,0.75); }
.chapter--comienzo .chapter__body p { text-shadow: 0 1px 16px rgba(11,10,9,0.62); }

/* Capítulo 04 · El legado: el afeitado clásico detrás del texto.
   Encuadre hacia los dos rostros, que es donde vive la escena. */
.chapter--legacy {
  padding-block: clamp(6rem, 13vw, 12rem);
}
.chapter--legacy .panel__photo img {
  opacity: 0.40;
  object-position: 42% 52%;
}
.chapter--legacy .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.86) 0%, rgba(11,10,9,0.58) 45%, rgba(11,10,9,0.90) 100%),
    radial-gradient(ellipse 80% 64% at 50% 46%, transparent 24%, rgba(11,10,9,0.60) 100%);
}
.chapter--legacy .story-body p { text-shadow: 0 1px 16px rgba(11,10,9,0.62); }

/* Contacto · "La casa está abierta": el salón en un día cualquiera.
   Aquí la foto pesa más que en el resto — se pidió bien visible —
   así que el velo es más suave y se abre en el centro. */
.pagehead--foto {
  padding-block: clamp(9rem, 17vw, 15rem) clamp(4.5rem, 9vw, 8rem);
}
.pagehead--foto .panel__photo img {
  opacity: 0.55;
  object-position: 50% 46%;
}
.pagehead--foto .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.84) 0%, rgba(11,10,9,0.54) 46%, rgba(11,10,9,0.88) 100%),
    radial-gradient(ellipse 74% 58% at 50% 50%, transparent 20%, rgba(11,10,9,0.58) 100%);
}
.pagehead--foto .eyebrow { text-shadow: 0 2px 18px rgba(11,10,9,0.90); }

/* 06 · Instagram: la tarjeta entre las plantas. La franja que cabe
   aquí es baja y ancha; encuadrada abajo, la hoja manda y el
   rótulo de la tarjeta no compite con el titular. */
#instagram .panel__photo img {
  opacity: 0.46;
  object-position: 50% 100%;
}
#instagram .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.84) 0%, rgba(11,10,9,0.56) 42%, rgba(11,10,9,0.88) 100%),
    radial-gradient(ellipse 78% 60% at 50% 42%, transparent 22%, rgba(11,10,9,0.58) 100%);
}
#instagram .ig-handle { text-shadow: 0 2px 18px rgba(11,10,9,0.80); }

/* En el teléfono el bloque es casi cuadrado y la tarjeta vuelve a caer
   justo detrás del titular. Se amplía sobre la hoja de abajo. */
@media (max-width: 799px) {
  #instagram .panel__photo img {
    transform: scale(1.75);
    transform-origin: 50% 100%;
  }
}

/* 03 · La Casa: el salón en pleno servicio, detrás del texto.
   Foto oscura (luminancia 88), así que aguanta presencia. */
#casa .panel__photo img {
  opacity: 0.42;
  object-position: 50% 15%;
}
#casa .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(20,18,16,0.82) 0%, rgba(20,18,16,0.54) 44%, rgba(20,18,16,0.86) 100%),
    radial-gradient(ellipse 80% 62% at 50% 46%, transparent 24%, rgba(20,18,16,0.58) 100%);
}

/* Los Estilistas · "Lo que dicen los caballeros": la casa en servicio.
   Este bloque es muy alto (reseñas + invitación), así que la foto
   entra casi entera y basta con anclarla arriba. */
#resenas .panel__photo img {
  opacity: 0.34;
  object-position: 50% 24%;
}
#resenas .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(20,18,16,0.84) 0%, rgba(20,18,16,0.62) 40%, rgba(20,18,16,0.88) 100%),
    radial-gradient(ellipse 82% 66% at 50% 40%, transparent 24%, rgba(20,18,16,0.60) 100%);
}

/* La Experiencia · "Cada visita tiene un propósito": la sala de espera
   con el logo en el cristal. Anclada arriba, como se pidió. */
#exp-head .panel__photo img {
  opacity: 0.58;
  object-position: 50% 0%;
}
#exp-head .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.82) 0%, rgba(11,10,9,0.48) 46%, rgba(11,10,9,0.86) 100%),
    radial-gradient(ellipse 76% 60% at 50% 50%, transparent 20%, rgba(11,10,9,0.56) 100%);
}

/* Contacto · "¿Viviste la experiencia?": la sala con el rótulo
   "Made for Gentlemen" y los sillones dorados. */
#con-resenas .panel__photo img {
  opacity: 0.44;
  object-position: 50% 34%;
}
#con-resenas .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(20,18,16,0.86) 0%, rgba(20,18,16,0.62) 44%, rgba(20,18,16,0.90) 100%),
    radial-gradient(ellipse 80% 62% at 50% 44%, transparent 22%, rgba(20,18,16,0.60) 100%);
}
/* La tarjeta se vuelve traslúcida aquí para que la foto se lea también
   detrás del texto, no solo alrededor del recuadro. */
#con-resenas .review-band {
  background: linear-gradient(150deg, rgba(26,24,21,0.80), rgba(11,10,9,0.86));
  backdrop-filter: blur(2px);
}

/* Contacto · Preguntas frecuentes: el salón en pleno servicio.
   Bloque muy alto (el acordeón), así que la foto entra casi entera
   y pide menos presencia para no pelearse con las preguntas. */
#faq .panel__photo img {
  opacity: 0.32;
  object-position: 50% 28%;
}
#faq .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.86) 0%, rgba(11,10,9,0.66) 40%, rgba(11,10,9,0.90) 100%),
    radial-gradient(ellipse 82% 66% at 50% 40%, transparent 24%, rgba(11,10,9,0.60) 100%);
}

/* Nuestra Historia · cierre "No creemos en seguir el estándar":
   la sala de espera con el logo en el cristal. Encuadre bajo, sobre la
   mesa y el reflejo, para que no repita la cabecera de La Experiencia. */
.closing .panel__photo img {
  opacity: 0.50;
  object-position: 50% 78%;
}
.closing .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.86) 0%, rgba(11,10,9,0.56) 46%, rgba(11,10,9,0.90) 100%),
    radial-gradient(ellipse 78% 60% at 50% 50%, transparent 20%, rgba(11,10,9,0.58) 100%);
}
.closing .closing__lead { text-shadow: 0 2px 18px rgba(11,10,9,0.86); }

/* Los Estilistas · "Las manos detrás del estándar": el ritual del facial.
   Encuadre sobre las manos y el rostro, que es de lo que habla el título. */
#sty-head .panel__photo img {
  opacity: 0.50;
  object-position: 50% 55%;
}
#sty-head .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.86) 0%, rgba(11,10,9,0.64) 46%, rgba(11,10,9,0.90) 100%),
    radial-gradient(ellipse 76% 60% at 50% 50%, transparent 18%, rgba(11,10,9,0.60) 100%);
}
#sty-head .eyebrow,
#sty-head .manifesto { text-shadow: 0 2px 18px rgba(11,10,9,0.88); }

/* La Experiencia · cierre "Vive la experiencia": el diseño a navaja.
   Bloque bajo: se le da aire para que entre la escena. */
#exp-cierre {
  padding-block: clamp(7rem, 15vw, 13rem);
}
#exp-cierre .panel__photo img {
  opacity: 0.54;
  object-position: 50% 62%;
}
#exp-cierre .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(20,18,16,0.84) 0%, rgba(20,18,16,0.56) 46%, rgba(20,18,16,0.88) 100%),
    radial-gradient(ellipse 76% 60% at 50% 48%, transparent 20%, rgba(20,18,16,0.58) 100%);
}

/* Los Estilistas · cierre "Vive la experiencia": el afeitado clásico.
   El bloque es bajo, así que se le da aire para que entre la escena. */
#cierre-estilistas {
  padding-block: clamp(7rem, 15vw, 13rem);
}
#cierre-estilistas .panel__photo img {
  opacity: 0.48;
  object-position: 42% 50%;
}
#cierre-estilistas .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.84) 0%, rgba(11,10,9,0.54) 46%, rgba(11,10,9,0.88) 100%),
    radial-gradient(ellipse 76% 60% at 50% 48%, transparent 20%, rgba(11,10,9,0.58) 100%);
}

/* 07 · Reservar: el escaparate. Es la foto más clara del sitio
   (luminancia 137), así que pide un velo algo más cerrado. */
#reservar .panel__photo img {
  opacity: 0.42;
  object-position: 50% 44%;
}
#reservar .panel__photo::after {
  background:
    linear-gradient(180deg, rgba(20,18,16,0.86) 0%, rgba(20,18,16,0.60) 44%, rgba(20,18,16,0.90) 100%),
    radial-gradient(ellipse 76% 60% at 50% 46%, transparent 20%, rgba(20,18,16,0.60) 100%);
}