/* ==========================================================================
   Bucle — theme (fictional brand, demo). Slug: bucle-peluqueria
   "Plum and ivory": ivory page, aubergine ink, powder-pink soft surfaces, plum for the actions and the dark
   price band. Copper is decoration only (curl line, dots, hairlines), never text. Arch-shaped photo masks, a thin
   curl line as logo accent and section divider (it draws in once), a two-column price menu with dotted leaders.
   Fonts: Fraunces 600 + 600 italic (headings) and Hanken Grotesk 400/500 (body). Uses the premium layer, the
   image pipeline and the shared extra-fields module.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
}
/* Metric-matched local fallbacks (Times New Roman Bold / Italic and Arial). size-adjust is the ratio of each font's
   advance width to the fallback's over this page's headings and body copy; the vertical overrides are the web
   font's ascent and descent divided by size-adjust. */
@font-face {
  font-family: "Fraunces Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold");
  size-adjust: 112%;
  ascent-override: 87.3%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback";
  font-style: italic;
  font-weight: 600;
  src: local("Times New Roman Bold Italic"), local("TimesNewRomanPS-BoldItalicMT"), local("Liberation Serif Bold Italic"), local("Tinos Bold Italic");
  size-adjust: 113%;
  ascent-override: 86.5%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Grotesk Fallback";
  font-weight: 400;
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 100.6%;
  ascent-override: 99.4%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

:root {
  /* Palette (as briefed) */
  --bc-ivory: #fbf6f0;
  --bc-ink: #24141f;
  --bc-pink: #f2dad6;
  --bc-plum: #5b2a4a;
  --bc-copper: #b5653f;          /* decorative only: 4.0:1 on ivory (graphics >= 3:1), 2.6:1 on plum; never text */

  /* Derived. Pairs checked: ink 16.4:1 on ivory, 13.2:1 on pink; plum 10.4:1 on ivory, 8.4:1 on pink;
     ivory 10.4:1 on plum; pink 8.4:1 on plum; muted 7.5:1 on ivory, 6.1:1 on pink; white 11.2:1 on plum. */
  --bc-white: #ffffff;
  --bc-plum-deep: #45203a;       /* hover fill; ivory text 13.8:1 */
  --bc-muted: #5e4a57;
  --bc-plum-soft: #ebd5e0;       /* muted text on plum: 7.9:1 */
  --bc-pink-deep: #e7c6c1;       /* hairlines on pink */
  --bc-line: rgb(36 20 31 / 0.14);
  --bc-field: #7c6272;           /* control borders: 5.6:1 on white (UI >= 3:1) */

  --color-bg: var(--bc-ivory);
  --color-surface: var(--bc-white);
  --color-text: var(--bc-ink);
  --color-text-muted: var(--bc-muted);
  --color-border: var(--bc-line);
  --color-border-strong: var(--bc-field);
  --color-accent: var(--bc-plum);
  --color-accent-ink: var(--bc-plum);          /* focus rings and links on light surfaces */
  --color-on-accent: var(--bc-ivory);

  --color-dark-bg: var(--bc-plum);
  --color-dark-surface: var(--bc-plum-deep);
  --color-dark-text: var(--bc-ivory);          /* 10.4:1 on plum */
  --color-dark-muted: var(--bc-plum-soft);     /* 7.9:1 on plum */
  --color-dark-border: rgb(251 246 240 / 0.28);

  --color-error: #a3201b;                      /* 7.5:1 on white */
  --color-success: #2f6b3a;

  --font-display: "Fraunces", "Fraunces Fallback", "Times New Roman", Georgia, serif;
  --font-body: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;

  --bc-radius: 1.25rem;
  --section-space: clamp(4rem, 2.4rem + 6.5vw, 7rem);
  --hero-space: 0px;
  --hero-bg: var(--bc-ivory);
  --header-bg: var(--bc-ivory);
  --header-border: var(--bc-line);
  --button-font: var(--font-body);
  --button-size: 1rem;
  --button-weight: 500;
  --button-tracking: 0.01em;
  --button-transform: none;
  --button-radius: 999px;
  --button-padding: 0.75rem 1.75rem;
  --card-radius: var(--bc-radius);
  --footer-bg: var(--bc-ink);
  --footer-text: #d9c2cf;                      /* 10.5:1 on ink */
  --footer-border: transparent;
  --field-radius: 0.75rem;
  --bar-h: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* Plum and ink contexts: the focus ring is ivory, muted text is a soft pink-lilac. */
.on-dark,
.section--dark {
  --color-accent-ink: var(--bc-ivory);
  --color-text-muted: var(--bc-plum-soft);
}
.on-dark {
  --color-text-muted: #d9c2cf;
}

body {
  font-weight: 400;
}
strong,
b {
  font-weight: 500;
}

/* ---- Type ---- */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
h1 em,
h2 em {
  font-style: italic;
  color: var(--bc-plum);
}
h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.08;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: 0;
}
.eyebrow {
  display: inline-block;
  justify-self: start;
  color: var(--bc-plum);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section--dark .eyebrow {
  color: var(--bc-pink);
}
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}
.section__header {
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  max-width: 42rem;
}
.note {
  max-width: none;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ---- Buttons: plum pills with ivory text (10.4:1); ghost = plum outline. 48px tall. ---- */
.button {
  min-height: 48px;
  border-width: 2px;
}
.button:hover {
  background: var(--bc-plum-deep);
  border-color: var(--bc-plum-deep);
  color: var(--bc-ivory);
}
.button--ghost {
  background: transparent;
  border-color: var(--bc-plum);
  color: var(--bc-plum);
}
.button--ghost:hover {
  background: var(--bc-plum);
  border-color: var(--bc-plum);
  color: var(--bc-ivory);
}
/* On the plum band the primary button flips: ivory fill, plum text */
.section--dark .button,
.on-dark .button {
  background: var(--bc-ivory);
  border-color: var(--bc-ivory);
  color: var(--bc-plum);
}
.section--dark .button:hover,
.on-dark .button:hover {
  background: var(--bc-pink);
  border-color: var(--bc-pink);
  color: var(--bc-plum);
}
.button svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- Line icons (inline SVG sprite): decorative, stroke follows currentColor ---- */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg:has(> use) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- The curl: a thin loop line, decorative. Section dividers draw in once on reveal (premium.js adds
   .is-in); the hero one draws once on load. Both are static under prefers-reduced-motion. ---- */
.curl {
  display: block;
  width: 6.5rem;
  height: 1.3rem;
  color: var(--bc-copper);
  stroke-width: 1.5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  overflow: visible;
}
.section--dark .curl {
  color: var(--bc-pink);
}
.curl--hero {
  width: 8.5rem;
  height: 1.7rem;
  margin-top: calc(-1 * var(--space-2));
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .section__header:not(.is-in) .curl,
  .reveal-ready .contact__intro:not(.is-in) .curl {
    stroke-dashoffset: 1.02;
  }
  .section__header .curl,
  .contact__intro .curl {
    transition: stroke-dashoffset 1200ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
  }
  .curl--hero {
    animation: curl-draw 1400ms cubic-bezier(0.4, 0, 0.2, 1) 250ms both;
  }
}
@keyframes curl-draw {
  from { stroke-dashoffset: 1.02; }
  to { stroke-dashoffset: 0; }
}
@media (forced-colors: active) {
  .curl,
  .section--dark .curl {
    color: CanvasText;
    stroke: CanvasText;
  }
}

/* ---- Header ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--bc-plum);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.wordmark__mark {
  width: 2.25rem;
  height: 2.25rem;
}
.wordmark__bg {
  fill: var(--bc-plum);
}
.wordmark__loop {
  fill: none;
  stroke: var(--bc-pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-nav .button {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
}
@media (min-width: 52rem) {
  .site-nav ul {
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  .site-nav a:not(.button) {
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
  }
}
.site-nav a:not(.button):hover {
  color: var(--bc-plum);
}
@media (forced-colors: active) {
  .wordmark__bg {
    fill: CanvasText;
  }
  .wordmark__loop {
    stroke: Canvas;
  }
}

/* ---- Arch mask: large top radius, small bottom radius ---- */
.arch {
  position: relative;
  margin: 0;
}
.arch .ph {
  border-radius: 999px 999px var(--bc-radius) var(--bc-radius);
}

/* ---- "Illustrative image" label: ivory pill, ink text, copper dot ---- */
.img-tag {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(251 246 240 / 0.95);
  color: var(--bc-ink);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
.img-tag::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--bc-copper);
}
@media (forced-colors: active) {
  .img-tag {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* ---- Pill chip (opening hours) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  padding: 0.4375rem 1rem 0.4375rem 0.75rem;
  border-radius: 999px;
  background: var(--bc-pink);
  color: var(--bc-plum);                       /* 8.4:1 on pink */
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.chip svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
@media (forced-colors: active) {
  .chip {
    border: 1px solid CanvasText;
  }
}

/* ---- Hero: copy beside an arch photo (below the copy on phones) ---- */
.hero {
  padding-block: var(--space-6) var(--space-8);
}
.hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero .hero__content {
  gap: var(--space-4);
  max-width: 36rem;
}
.hero h1 {
  font-size: clamp(2.75rem, 1.5rem + 5.4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero h1 .h1__line {
  display: inline-block;
}
@media (min-width: 24rem) {
  .hero h1 .h1__line {
    white-space: nowrap;
  }
}
.hero__actions {
  margin-top: var(--space-2);
}
.hero__media {
  width: 100%;
  max-width: 22.5rem;
  margin-inline: auto;
}
.hero__media .ph {
  aspect-ratio: 4 / 5;
}
@media (min-width: 60rem) {
  .hero {
    padding-block: var(--space-7) var(--space-9);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-8);
  }
  .hero__media {
    max-width: 30rem;
    margin-inline: 0 0;
    justify-self: end;
  }
  /* A copper hairline arch offset behind the photo */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--bc-copper);
    border-radius: 999px 999px var(--bc-radius) var(--bc-radius);
    transform: translate(-1rem, 1rem);
  }
  .hero__media .ph {
    position: relative;
    z-index: 1;
  }
}
@media (forced-colors: active) {
  .hero__media::before {
    border-color: CanvasText;
  }
}

/* ---- Trust strip: four promises on powder pink ---- */
.trust {
  background: var(--bc-pink);
}
.trust .container {
  padding-block: var(--space-7);
}
.trust__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.trust__icon {
  flex: none;
  width: 3rem;
  height: 3.5rem;
  padding: 0.8125rem 0.75rem 0.5rem;
  border-radius: 999px 999px 0.5rem 0.5rem;
  background: var(--bc-ivory);
  color: var(--bc-plum);
}
.trust__item h3 {
  font-size: 1.125rem;
}
.trust__item p {
  margin-top: 0.25rem;
  color: var(--bc-muted);                      /* 6.1:1 on pink */
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (min-width: 40rem) {
  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-6);
  }
}
@media (min-width: 64rem) {
  .trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
@media (forced-colors: active) {
  .trust__icon {
    border: 1px solid CanvasText;
  }
}

/* ---- Services: six cards with an arch icon tile and a "from" price ---- */
.feature-grid {
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-5);
  border: 1px solid var(--bc-line);
  border-top-width: 1px;
  background: var(--bc-white);
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 4rem;
  margin-bottom: var(--space-2);
  border-radius: 999px 999px 0.625rem 0.625rem;
  background: var(--bc-pink);
  color: var(--bc-plum);
}
.feature__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.375rem;
}
.feature h3 {
  font-size: 1.3125rem;
}
.feature p {
  color: var(--color-text-muted);
  font-size: 1rem;
}
.feature .feature__price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dotted var(--bc-field);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.feature__price strong {
  color: var(--bc-plum);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
@media (forced-colors: active) {
  .feature,
  .feature__icon {
    border: 1px solid CanvasText;
  }
}

/* ---- Price menu (plum band): arch photo beside the heading, then two columns with dotted leaders ---- */
.price .section__header {
  margin-bottom: var(--space-6);
}
.price__top {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.price__photo {
  width: 100%;
  max-width: 22.5rem;
  margin-inline: auto;
}
.price__photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: 999px 999px var(--bc-radius) var(--bc-radius);
}
@media (min-width: 60rem) {
  .price__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    justify-content: space-between;
    gap: var(--space-8);
  }
  .price__photo {
    max-width: none;
    margin-inline: 0;
  }
}
.menu {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
@media (min-width: 52rem) {
  .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
  }
}
.menu__col h3 {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-dark-border);
  color: var(--bc-pink);                       /* 8.4:1 on plum */
  font-size: 1.5rem;
}
.menu__col ul {
  display: grid;
}
.menu__col li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 3rem;
  padding-block: 0.75rem;
  font-size: 1.0625rem;
}
.menu__name {
  flex: 0 1 auto;
}
.menu__dots {
  flex: 1 1 1rem;
  min-width: 1rem;
  height: 0;
  border-bottom: 2px dotted rgb(242 218 214 / 0.65);
  transform: translateY(-0.2em);
}
.menu__price {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  white-space: nowrap;
}
.price__note {
  max-width: none;
  margin-top: var(--space-6);
  color: var(--bc-plum-soft);
  font-size: 0.9375rem;
}
@media (forced-colors: active) {
  .menu__dots {
    border-bottom-color: CanvasText;
  }
}

/* ---- Gallery: four arch photos with captions ---- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
}
@media (min-width: 60rem) {
  .gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
.gallery__grid figure {
  display: grid;
}
/* The label shares the picture's grid cell, so it stays on the photo whatever the caption does */
.gallery__grid figure .ph,
.gallery__grid figure .img-tag {
  grid-area: 1 / 1;
}
.gallery__grid figure .ph {
  aspect-ratio: 3 / 4;
}
.gallery__grid figure .img-tag {
  position: static;
  align-self: end;
  justify-self: center;
  margin-bottom: 0.625rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  transform: none;
}
.gallery__grid figcaption {
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
}

/* ---- How to book (pink): copy and three steps beside an arch photo ---- */
.book {
  background: var(--bc-pink);
}
.book__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.book .section__header {
  margin-bottom: var(--space-6);
}
.book__photo {
  width: 100%;
  max-width: 22.5rem;
  margin-inline: auto;
}
.book__photo .ph {
  aspect-ratio: 4 / 5;
}
@media (min-width: 60rem) {
  .book__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-8);
  }
  .book__photo {
    max-width: 30rem;
    margin-inline: 0;
    justify-self: end;
  }
}
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-5);
}
.steps__item {
  counter-increment: step;
  position: relative;
  padding-left: 4.25rem;
  min-height: 3rem;
}
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--bc-plum);
  color: var(--bc-ivory);                      /* 10.4:1 on plum */
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
}
/* Thin line joining the number circles */
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: calc(-1 * var(--space-5) + 0.25rem);
  width: 0;
  border-left: 2px dotted var(--bc-copper);
}
.steps__item h3 {
  padding-top: 0.5rem;
  font-size: 1.3125rem;
}
.steps__item p {
  margin-top: var(--space-2);
  color: var(--bc-muted);
}
.book__cancel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: 0.875rem;
  background: var(--bc-ivory);
  font-weight: 500;
}
.book__cancel svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.0625rem;
  color: var(--bc-plum);
}
.book__cta {
  margin-top: var(--space-5);
}
@media (forced-colors: active) {
  .steps__item::before {
    border: 1px solid CanvasText;
  }
  .steps__item:not(:last-child)::after {
    border-left-color: CanvasText;
  }
  .book__cancel {
    border: 1px solid CanvasText;
  }
}

/* ---- Team: arch photo beside the placeholder ---- */
.team__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.team__photo {
  width: 100%;
  max-width: 22.5rem;
  margin-inline: auto;
}
.team__photo .ph {
  aspect-ratio: 4 / 5;
}
@media (min-width: 60rem) {
  .team__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-8);
  }
  .team__photo {
    max-width: 30rem;
    margin-inline: 0;
  }
}
.team .section__header {
  margin-bottom: var(--space-5);
}

/* ---- Placeholders (reserved space, no invented content) ---- */
.reviews {
  background: var(--bc-pink);
}
.placeholder-block {
  max-width: 44rem;
  border: 2px dashed var(--bc-field);
  border-radius: var(--bc-radius);
  background: var(--bc-ivory);
  color: var(--bc-ink);
  text-align: left;
}
.placeholder-block p {
  margin-inline: 0;
}
.placeholder-block__label {
  color: var(--bc-plum);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

/* ---- FAQ: heading beside hairline items with a plum plus/minus ---- */
.faq-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.faq-layout .section__header {
  margin-bottom: 0;
}
@media (min-width: 60rem) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-8);
  }
}
.faq {
  border-top: 1px solid var(--bc-line);
}
.faq details {
  border-bottom: 1px solid var(--bc-line);
}
.faq summary {
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--bc-plum), var(--bc-plum)) center / 0.875rem 2px no-repeat,
    linear-gradient(var(--bc-plum), var(--bc-plum)) center / 2px 0.875rem no-repeat,
    var(--bc-pink);
  transition: background-size var(--duration) var(--ease);
}
.faq details[open] summary::after {
  transform: none;
  background-size: 0.875rem 2px, 2px 0, auto;
}
.faq details p {
  max-width: 60ch;
  padding: 0 0 var(--space-4);
}
@media (forced-colors: active) {
  .faq summary::after {
    border: 1px solid CanvasText;
  }
}

/* ---- Contact (pink): intro with the WhatsApp action beside an ivory form card ---- */
.contact-band {
  background: var(--bc-pink);
}
.contact {
  gap: var(--space-7);
}
@media (min-width: 60rem) {
  .contact {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-8);
  }
}
.contact__intro {
  gap: var(--space-4);
  align-content: start;
}
.contact__cta {
  margin: var(--space-2) 0;
}
.contact__details {
  display: grid;
  margin: 0;
}
.contact__details > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--bc-pink-deep);
}
.contact__details > div:first-child {
  border-top: 1px solid var(--bc-pink-deep);
}
.contact__details dt {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.contact__details dd {
  margin: 0;
  font-weight: 500;
}
.contact-form--light {
  --field-bg: var(--bc-white);
  --field-border: var(--bc-field);
  --field-text: var(--bc-ink);
  --feedback-error: var(--color-error);
  --feedback-success: var(--color-success);
  padding: var(--space-5);
  border-radius: var(--bc-radius);
  background: var(--bc-ivory);
}
@media (min-width: 48rem) {
  .contact-form--light {
    padding: var(--space-6);
  }
}
.field label {
  letter-spacing: 0;
}
.field label small {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
}
.field input,
.field textarea {
  background: var(--bc-white);
}
.field select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--bc-white);
  color: var(--field-text);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline-offset: 0;
  border-color: var(--bc-plum);
}
.contact-form .button {
  justify-self: start;
}
.form-note {
  max-width: none;
  padding-top: var(--space-3);
  border-top: 1px solid var(--bc-line);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 0;
}
.site-footer__inner {
  align-items: start;
}
.site-footer__inner > p {
  flex: 1 1 22rem;
  max-width: 38rem;
}
.site-footer__info {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.site-footer__info div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
.site-footer__info dt {
  color: var(--bc-pink);
  font-weight: 500;
}
.site-footer__info dd {
  margin: 0;
}
.site-footer a:hover {
  color: var(--bc-ivory);
}

/* ---- Mobile action bar: WhatsApp + Reservar hora. Fixed, fixed height (no layout shift), phones only.
   extra-fields.js adds .bar-hidden while the form is on screen so it never covers it. ---- */
.action-bar {
  display: none;
}
@media (max-width: 47.99rem) {
  .action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.5rem;
    align-items: center;
    box-sizing: border-box;
    height: var(--bar-h);
    padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--bc-pink-deep);
    background: var(--bc-ivory);
    box-shadow: 0 -6px 20px -10px rgb(36 20 31 / 0.3);
    transition: transform 200ms var(--ease), visibility 200ms;
  }
  .action-bar .button {
    min-height: 3rem;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1.15;
    text-align: center;
  }
  .bar-hidden .action-bar {
    transform: translateY(100%);
    visibility: hidden;
  }
  /* Room for the bar below the footer, and for focused elements above it */
  .site-footer {
    padding-bottom: var(--bar-h);
  }
  :root:has(.action-bar) {
    scroll-padding-bottom: calc(var(--bar-h) + 1rem);
  }
}
@media (forced-colors: active) {
  .action-bar {
    border-top: 2px solid CanvasText;
  }
}

/* ==========================================================================
   Premium layer tuning (soft, relaxed variant): slow ease-out reveals with a small rise, a gentle card lift,
   no bounce or parallax. Transform and opacity only; the layer disables all of it under prefers-reduced-motion.
   ========================================================================== */
[data-premium] {
  --ease: cubic-bezier(0.25, 0.8, 0.3, 1);
  --duration: 220ms;
  --reveal-duration: 600ms;
  --reveal-distance: 12px;
  --selection-bg: var(--bc-plum);
  --selection-text: var(--bc-ivory);           /* 10.4:1 */
  --shadow-sm: 0 1px 2px rgb(36 20 31 / 0.06), 0 2px 6px rgb(36 20 31 / 0.05);
  --shadow-md: 0 1px 2px rgb(36 20 31 / 0.06), 0 10px 20px -8px rgb(36 20 31 / 0.22);
}
[data-premium] h1,
[data-premium] h2 {
  letter-spacing: -0.015em;
}
[data-premium] .hero h1 {
  letter-spacing: -0.02em;
}
[data-premium] .section--dark {
  background-image: none;                      /* flat plum, no grain */
}
[data-premium] .field :is(input, textarea, select):hover {
  border-color: var(--bc-plum);
}
[data-premium] .field :is(input, textarea):focus-visible {
  box-shadow: none;
}
[data-premium] .cf-turnstile {
  background: var(--bc-white);
}
[data-premium] .feature {
  transition: opacity var(--reveal-duration) var(--ease), transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}
@media (hover: hover) {
  [data-premium] .feature.is-in:hover,
  [data-premium] .feature:not([data-reveal]):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-premium] .feature:hover {
    transform: none !important;
  }
  .action-bar {
    transition: none;
  }
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-bucle-01-hero{background-color:#7b6958;background-image:url(data:image/webp;base64,UklGRiABAABXRUJQVlA4IBQBAABwBgCdASoYAB4APu1qrlCppiQiqAqpMB2JYgCdIQTcARPgQsGjEkM+AhB40l8HjFTUmpyQ7O1fC8aIQAAA/k26wk4h+Vv3vK50kN4tyzGGv4Dgsrk9zf4msBNyZuGMfwtBJ5pspmnytqekOmgOErblzGM8zkSrpUICZ4hZmdYHteh2U57eFXpvulY8Su+g4n0HyGu8rFB/hyisZ/584C8bTQvDqZHi1rWyWAr6sMQJl10yrIHAr/YhRr8dMe5jK40D0JnZkmhe9CXa6bmAxIydSguMD3K6kDvdOW5lqFMbqzqJjj4m/NGn40y2Fg4qRfgAnJV9mKgoguZ/x9wIRT/Z8aPAvjHsKQz69z1yB4pxx1AEAAA=)}
.ph-bucle-04-herramientas{background-color:#9e8f81;background-image:url(data:image/webp;base64,UklGRv4AAABXRUJQVlA4IPIAAACwBQCdASoYABIAPu1ur1IppiQiqAgBMB2JYwCdAY0MVgr03BKJ1F4PiH7MzwSsOeIzCvh8LnQA4n1kbc6HeI3hNEOnGVOsh4Y1r9OsdzW40/O84yrtZFHbhtzvVFUcswwUrdXLJ6zMsG9EGtd3c0rnz7DAOllXbavcWaGhAcZD+RQEnCyyq/bREvVqgS5JM/dwFhKCOr/pjGzrP9kWyGxamHvpHDS/p8t+P/4qBNufnrcvEr9QVN9Ec/hFihTA/K4UOi1gzqUGIZvVwLt/b7dHw3lnUhYyLgyI7WxPw/At+ShHzhN07n/cD+5iDfgqB4AAAA==)}
.ph-bucle-02-barba{background-color:#755740;background-image:url(data:image/webp;base64,UklGRhwBAABXRUJQVlA4IBABAABwBgCdASoYACAAPu1grVAppSQisBgIATAdiWgAnTKEfgHRSGPWQr/fYbvKYF8XAE3OcE+eo9UQakwhoAAA/XX+ryfZcpoqfxjQz4ld1M1gsvW3f0knQP3O49fc0bRFAEHasz3zIViMX5pV1fMkcngXbaeepuSta0jRtdH3rPsSN4ehqVMo4vQnqotj+u65hMqvp//JtXV4R83c8GNWcS3IIXl9rHrIY6/UOgrVNqWiVO1vSd8ljQBJvyb3iezvtlS1mh+e8V/u4DkJij7vWiK8GKtnDpj5s4Jqv4VSbkHPlVVr+Rrp19UUQYyIBHrHmsOTyB8+2xqMsCNEqDRlhP02LcfzaUgGTTvDyaZ37WoAAA==)}
.ph-bucle-03-color{background-color:#7e6550;background-image:url(data:image/webp;base64,UklGRlIBAABXRUJQVlA4IEYBAABwBgCdASoYACAAPu1or1AppaSiqAqpMB2JYgCxHw5GaRG5/8b3LgYKUs8t/ypJLU6KyAVyjWlIuErB5nAA/umHSHsxNLXz5VCBi6gnZjpRjATFmouNXSJmvfNP3o6SgMc/bKogkhlfQZut8kd295FD4eiE6rC60F388wNCnT/onCmWrp02LwmRtv2IvCP8mfj9q58zz6WuBUqvZ9ehWbSKnk5oCAFV4D6l61FN4LkNquTv3MhYtpvx1Fmx/HtMYRbFtyBf+4wmEg+P3hoWuIQkxhKtyTENGNhyrdlHZYg8SPqHYIH7+YeQm8jk+Ki0VmRHltKmj2NQwlJ5cDwnKp4EUhytawdvNZM2hHfeG0Ilna4EdqdCRg0h4+D57o1Oqhuwixv7tbJ1TFJXK9R9WP9BBBr6JQc2pDvvQX3jeHOuOgl5UjgAAA==)}
.ph-bucle-06-tratamiento{background-color:#876e5e;background-image:url(data:image/webp;base64,UklGRjABAABXRUJQVlA4ICQBAACQBwCdASoYACAAPu1kq0+ppSOiMBgIATAdiWgAnTLjfigWV+ssDSxM5BJ6YOJYyqYlmHHzqFFrjJqmLEA6TeeHYFbTjAAA+ViJ0jlMJDSvoHeBOr3smBVL7x/vPGUr0rYKfVzIU0L12ozLAQjrwL7mZ4kCwGm7AntpDoHiw4Y7p841pD9RwO0d2cGA4KBvAlusrPfn1wLXZ1qyVycSEvn2vxw4y6dCyvU4GtYxMmwKVWuW9cfQW1hqo234X8C92QNQiqnICfAq0s9hZppx6UVogsYfwHipD+Meuzwmjz0ZP+KZJd2cC21J2XAFm2USzgnJ4z0DXVliwiVegtYta0hYGsrKzR+yoNsIFmx8DJqOWXCOqr4oNAJT1vcF0qTOKIpJioAA)}
.ph-bucle-07-peinado{background-color:#917866;background-image:url(data:image/webp;base64,UklGRiIBAABXRUJQVlA4IBYBAACQBgCdASoYACAAPu1iqU2ppaQiMAgBMB2JYgCdM1AEAogPdQfb51q/VQhXQWUNIRkkh5VXbHPFEpgkr6xgAP0COsaykpuPAOHNyjT6vWy1GYVjhv9HTOQ5v2hXOLiMBmU0Maif4/qh9wNeDPVCVSidNzYu5V3gUcddotxC0FHR2h8/x202CYK8InXVV2kRbtH3uzo3Jz5m8z/qAHL4KFoEySb9ECTMBBbwGbi0JNDayhdP3Qn0JOQkuavSqqPvPfnbr1PiRgjLmGCVxbko0xaNXOPx7JB6kPAtGnEcvwV1NeRleZLbN4wr0tsmh9GVEcM3mbJaBGJlbbmr6/p1ZZl1OM3d7Jm1BIOymO0bXVnwbKsIASQAAA==)}
.ph-bucle-08-recepcion{background-color:#a48160;background-image:url(data:image/webp;base64,UklGRjoBAABXRUJQVlA4IC4BAABQBgCdASoYAB4APu1qr1AppaSiqAqpMB2JZgCdLwArgZYGkvaKBU5TbQvUe+IbHvTwyiXh2gPYSRO5sAD+ltN8N1DW0oSm2AIp36FM0vFQoozoApNvNM4qZb7R95iKeF1sKiUbVaartkeW/CTq/Rg7qKWsuwhNj5xnWUpP7dqoEzxkZL4YEd9A9sP/ZdF7/0kl1dO7vY/+jUf06NrSoKdyyLqJTdxuW7hPkz8Ok/UJlT3cT1hWgPrtnD4FK3mB3+izaRyXqEPQCLSYB9Nl0lNesv0AOvl2hVAhmZEU20L4KWg/zOOsK6ztm+xKIT8Q/w3RsXRRt1wQ9uXSZcOK1Mh2M/pPLogUEc1tY+tC1rMLWh/Tc2VCDePvtYwhUFYwvoaF4W7UGEVQT0M5CgAAAA==)}
.ph-bucle-05-salon{background-color:#8c6f54;background-image:url(data:image/webp;base64,UklGRi4BAABXRUJQVlA4ICIBAADwBQCdASoYAB4APu1mq0+ppSOiMBgIATAdiWQArAMucGsaCDFo5ntJs2W0Gdt/tl5JOKW2V8szgAD+hIhvz5jEpnpG+h063JX9uHHjHge4A2kBuKZoeP+r75zuCYqUpkl2473z8nbov/jGR2JxhNNX4uCaaHrYy5qYngNRiZCQwJ/e+jQkbUjC2xvzFHay4d06+AQovSoXMI9x3uCfS3EHWmzu6BeHD5U27Yk4/xgxw90WPzH3rTXQEuSpyr/Tt98nt42v8dfhaVg31HlCdN0hOLo8MebHRH/BKcOK+g56t6q9Dmutmc3Sv7W8N95QeH7/jOnsUSVdfRxujV5jlicFWauqBt7Tb+xtioiDcrZZJFQBzKIbOkJvYNYj7XfEyggAAA==)}