/* HILO Beauty Studio - servicios page.
   Values from Figma node 6082:1693 ("1920w light", 1920 x 5022).
   Loaded after sections.css so it can extend the shared primitives. */

/* ================================================================== nav
   This page has no hero photo behind the bar, so the glass needs body from
   the first pixel instead of waiting for the scroll handler. */
/* The inner pages used to pin the nav at 80% white while the home page starts
   at 42% and only firms up on scroll. That made the same component read as two
   different ones. They now share the base .nav glass, and initNav()'s
   .is-scrolled handler firms it up on every page alike.

   Worth knowing: the glass reads as plain white here regardless, because
   backdrop-filter can only blur what sits behind it and these pages put flat
   --grey-98 there. The effect returns the moment content scrolls underneath. */

/* =============================================================== header */

.page-header {
  padding: 132px var(--gutter) 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-header__inner {
  width: 100%;
  max-width: var(--container);
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.breadcrumb {
  color: var(--grey-45);
  font-size: var(--fs-xxs);
  line-height: 1.25;
}
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--rose-47); }
.breadcrumb span[aria-current] { color: var(--rose-20); }

.page-header__row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 26px;
}

.page-header__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11.3px;
}

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1-page);
  font-weight: 400;
  line-height: 1.02;                 /* 65.28 / 64 */
  letter-spacing: var(--ls-h1-page);
  color: var(--rose-7);
  text-wrap: balance;
}

.page-header__lede {
  max-width: 560px;
  padding-top: 4.7px;
  color: var(--grey-32);
  font-size: var(--fs-body-lg);
  line-height: 1.65;                 /* 27.23 / 16.5 */
}

.page-header__actions {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

/* header primary CTA carries a tighter shadow than the hero one */
.btn--cta-hdr {
  background: var(--rose-47);
  color: var(--white);
  box-shadow: var(--sh-cta-hdr);
}
.btn--cta-hdr:hover {
  background: var(--rose-7);
  box-shadow: 0 14px 20px rgba(23, 13, 18, 0.36);
}

/* ======================================================== category head */

.cat {
  padding: 44px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-margin-top: 96px;
}

.cat__inner {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.cat__head {
  display: flex;
  align-items: center;
  gap: 13.9px;
}

.cat__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-cat);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--ls-h2-cat);
  color: var(--rose-7);
  white-space: nowrap;
}

.cat__count {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--rose-47-10);
  color: var(--rose-47);
  font-size: var(--fs-nano);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-count);
  white-space: nowrap;
}

.cat__rule {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: var(--rose-7-12);
}

.cat__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========================================================= detail card */

.detail {
  --g-bg: var(--white-66);
  --g-radius: var(--r-30);
  --g-border: var(--white-85);
  --g-shadow: var(--sh-card);
  --g-blur: 10px;
  /* Figma pins the card at 414.66 tall with the meta row at the bottom */
  min-height: 414.66px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease);
}
.detail:hover { --g-shadow: var(--sh-card-lift); }

.detail__media {
  position: relative;
  min-height: 280px;
  background: var(--grey-50-8);
}
.detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the "Nuestra especialidad" style chip over the photo */
.detail__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--white-55);
  box-shadow: inset 0 0 0 1px var(--white-70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--rose-7);
  font-size: var(--fs-tag);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
}

.detail__body {
  padding: 32px 34px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.detail__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3-detail);
  font-weight: 400;
  line-height: 1.14;                 /* 31.92 / 28 */
  letter-spacing: var(--ls-h3-detail);
  color: var(--rose-7);
}

.detail__desc {
  padding-top: 10.875px;
  color: var(--magenta-24);
  font-size: var(--fs-body);
  line-height: 1.65;                 /* 24.75 / 15 */
}

.detail__tags {
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-soft {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--rose-7-5);
  color: var(--magenta-24);
  font-size: var(--fs-micro);
  line-height: 1;
}

.detail__meta {
  width: 100%;
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.detail__meta dl { display: flex; flex-direction: column; }
.detail__meta dt {
  color: var(--grey-57);
  font-size: var(--fs-meta-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
}
.detail__meta dd {
  margin: 0;
  color: var(--rose-7);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
}

.detail__book { margin-left: auto; }

/* ============================================================== steps */

.steps {
  padding: 56px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-margin-top: 96px;
}

.steps__inner {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.steps__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-40);
  font-weight: 400;
  line-height: 1.08;                 /* 43.2 / 40 */
  letter-spacing: -0.01em;
  color: var(--rose-7);
}

.steps__grid {
  width: 100%;
  padding-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.step {
  --g-bg: var(--white-60);
  --g-radius: var(--r-26);
  --g-border: var(--white-85);
  --g-shadow: var(--sh-step);
  --g-blur: 9px;
  padding: 29px 31px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.step__n {
  font-family: var(--font-display);
  font-size: var(--fs-step);
  line-height: 1.25;
  color: var(--rose-47);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3-step);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rose-7);
}

/* :not(.step__n) matters - a bare `.step p` out-specifies .step__n and would
   strip the number's Marcellus/magenta styling. */
.step p:not(.step__n) {
  color: var(--grey-32);
  font-size: var(--fs-body-sm);
  line-height: 1.6;                  /* 23.2 / 14.5 */
}

/* ========================================================== final CTA */

.final {
  padding: 56px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final__card {
  width: 100%;
  max-width: var(--container);
  padding: 56px 34px;
  border-radius: var(--r-34);
  background: linear-gradient(
    135deg,
    var(--rose-7) 0%,
    var(--rose-14) 55%,
    var(--rose-24) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11.4px;
  text-align: center;
}

.final__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-sm);
  font-weight: 400;
  line-height: 1.08;                 /* 45.36 / 42 */
  letter-spacing: -0.01em;
  color: var(--white);
}

.final__copy {
  max-width: 520px;
  color: var(--white-72);
  font-size: var(--fs-body-md);
  line-height: 1.6;                  /* 24.8 / 15.5 */
}

.final__actions {
  padding-top: 12.6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* translucent button on the dark gradient */
.btn--on-dark {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.24); }

/* ============================================== footer (inner pages) */

/* NB: no grid-template-columns override here on purpose - a `.footer--pages
   .footer__top` rule would out-specify the breakpoints in responsive.css and
   keep the footer at four columns on phones. */
.footer--pages .footer__brand { gap: 9.095px; }

.footer--pages .footer__brand p {
  max-width: 260px;
  font-size: var(--fs-xs);
  line-height: 1.6;                  /* 21.6 / 13.5 */
}

.footer__hours {
  color: var(--white-62);
  font-size: var(--fs-xs);
  line-height: 1.7;                  /* 22.95 / 13.5 */
}

.footer--pages .footer__bottom { justify-content: flex-start; }

/* ============================== the shared Coffee Bar block on this page
   Figma wraps it in a section with 56/20 padding on top of the block's own
   70/40, so the whole thing measures 626 instead of the home page's 550. */
.page-servicios .coffee {
  padding-top: 126px;
  padding-bottom: 60px;
}

/* ========================================================== breakpoints */

@media (max-width: 1040px) {
  .detail__body { padding: 28px 26px 30px; }
}

@media (max-width: 940px) {
  .page-header { padding-top: 118px; padding-bottom: 20px; }
  .page-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .page-header__lede { max-width: none; }
  .page-header__actions { flex: none; width: 100%; }

  .cat { padding-top: 36px; }
  .cat__inner { gap: 20px; }

  /* photo on top, copy underneath: the pinned 414 height no longer applies */
  .detail {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .detail__media { min-height: 0; aspect-ratio: 619 / 413; }

  .steps { padding-top: 40px; }
  .final { padding: 40px var(--gutter) 48px; }
  .final__card { padding: 40px 24px; }

  .page-servicios .coffee { padding-top: 96px; padding-bottom: 40px; }
}

@media (max-width: 860px) {
  .steps__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-header { padding-top: 104px; }
  .page-header__actions .btn { flex: 1 1 100%; }
  .cat__head { flex-wrap: wrap; gap: 10px; }
  .cat__rule { display: none; }
  .detail__body { padding: 24px 22px 26px; }
  .detail__meta { gap: 14px; }
  .detail__book { margin-left: 0; width: 100%; }
  .step { padding: 24px 22px; }
  .final__actions .btn { flex: 1 1 100%; }
}