/* HILO Beauty Studio - per-section styles.
   Every literal value below is the Figma value for the 1920w light frame. */

/* ==================================================================== nav */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  z-index: 100;
  width: min(var(--container), calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 10px 9px 28px;
  border-radius: var(--r-pill);
  background: var(--white-42);
  box-shadow:
    inset 0 0 0 1px var(--white-65),
    var(--sh-nav);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
}

/* the glass reads as glass over the photo, but needs more body once the
   page scrolls onto the near-white background */
.nav.is-scrolled {
  background: var(--white-80);
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img { width: 65px; height: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav__link {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  color: var(--rose-20);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--white-70); color: var(--rose-7); }

.nav__cta { margin-left: 6px; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white-62);
  box-shadow: inset 0 0 0 1px var(--rose-7-13);
  cursor: pointer;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--rose-7);
  border-radius: 2px;
  transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
}
.nav__toggle-bars::before { translate: 0 -6px; }
.nav__toggle-bars::after  { translate: 0 6px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { translate: 0 0; rotate: 45deg; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { translate: 0 0; rotate: -45deg; }

/* =================================================================== hero */

/* Figma centres the cards in an 800-tall header with only 14px of bottom
   padding; the fixed nav ends at y=68 so it never collides with the card. */
.hero {
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter) 14px;
  overflow: hidden;
}

.hero__media,
.hero__media img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The source is a 720x1280 vertical clip shown through a 2.4:1 window, so a
   centred crop cuts heads off. Biasing to 26% keeps faces and the storefront
   sign in frame across the whole montage. */
.hero__media img,
.hero__video {
  object-fit: cover;
  object-position: center 26%;
}

/* The video sits on top of the poster image and only fades in once it is
   genuinely playing (main.js adds .is-playing), so a missing file, a blocked
   autoplay or a slow connection leaves the poster showing instead of black. */
.hero__video {
  opacity: 0;
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--rose-7-34) 0%,
    var(--rose-7-0) 34%,
    var(--rose-7-55) 100%
  );
}

/* Figma: a 1402 centred row with a 286.31 gap between the two cards, both
   sized by their content rather than stretched. */
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1402px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 286.31px;
  flex-wrap: wrap;
}

.hero__card {
  --g-bg: var(--white-50);
  --g-radius: var(--r-34);
  --g-border: var(--white-70);
  --g-shadow: var(--sh-hero-card);
  --g-blur: 15px;
  max-width: 620px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13.6px;
}

/* the 470px measure is what sizes the whole card to Figma's 542 (470 + 2x36) */
.hero__lede {
  max-width: 470px;
  color: var(--rose-20);
  font-size: var(--fs-body-lg);
  line-height: 1.6;   /* 26.4 / 16.5 */
}

.hero__actions { padding-top: 10.68px; }

/* ---- rating card ---- */

.rating {
  --g-bg: var(--white-44);
  --g-radius: var(--r-26);
  --g-border: var(--white-68);
  --g-shadow: var(--sh-rating);
  --g-blur: 13px;
  /* content-sized: the note sets the width, which lands on Figma's ~405 */
  min-width: 238px;
  max-width: 420px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rating__value {
  font-family: var(--font-display);
  font-size: 2rem;              /* 32 */
  line-height: 1.25;
  color: var(--rose-7);
}
.rating__score .stars { font-size: var(--fs-sm); letter-spacing: 0.1em; }

.rating__note,
.rating__hours {
  color: var(--rose-20);
  font-size: var(--fs-micro);
  line-height: 1.5;             /* 18.75 / 12.5 */
}
.rating__hours { line-height: 1.6; }
.rating__hours b { color: var(--rose-7); font-weight: 700; }

.rating__rule {
  height: 1px;
  margin-block: 2px;
  background: var(--rose-7-12);
}

/* ================================================================= stats */

.stats {
  padding: 26px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.stats__grid {
  --g-bg: var(--white-60);
  --g-radius: var(--r-26);
  --g-border: var(--white-85);
  --g-shadow: var(--sh-strip);
  --g-blur: 11px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.stats__cell {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 2.4px;
  border-right: 1px solid var(--rose-7-8);
}
.stats__cell:last-child { border-right: 0; }

.stats__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--rose-47);
}
.stats__value .stars { font-size: var(--fs-nano); letter-spacing: 0.08em; }

.stats__label {
  padding-top: 5.6px;
  color: var(--rose-7);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.stats__note {
  color: var(--grey-45);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.stats__chips {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* ============================================================= servicios */

.servicios { padding-top: 96px; }

/* In Figma this head is an auto-layout row whose 436px gap forces the CTA to
   wrap onto its own line under the copy, so it reads as a single left column. */
.section__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
  gap: 12px;
}

.servicios__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.card {
  --g-bg: var(--white-62);
  --g-radius: var(--r-28);
  --g-border: var(--white-80);
  --g-shadow: var(--sh-card);
  --g-blur: 9px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  --g-shadow: var(--sh-card-lift);
}

.card__media {
  position: relative;
  aspect-ratio: 298 / 210;
  background: var(--grey-50-8);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 13px;
  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);
}

.card__body {
  flex: 1;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 7.9px;
}

.card__desc {
  min-height: 44px;
  padding-bottom: 11.26px;      /* Figma keeps this gap below the copy block */
  color: var(--grey-32);
  font-size: var(--fs-sm);
  line-height: 1.55;            /* 21.7 / 14 */
}

.card__meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rose-7-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__time { color: var(--grey-32); font-size: var(--fs-xxs); line-height: 1.25; }
.card__cta  { color: var(--rose-47); font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; }

/* =============================================================== coffee */

.coffee__card {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  align-items: center;
  padding: 34px;
  border-radius: var(--r-36);
  box-shadow: var(--sh-coffee);
  overflow: hidden;
}

.coffee__media,
.coffee__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.coffee__media img { object-fit: cover; }

.coffee__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, var(--rose-7-50) 0%, var(--rose-7-5) 62%);
}

.coffee__panel {
  --g-bg: var(--white-44);
  --g-radius: var(--r-30);
  --g-border: var(--white-70);
  --g-shadow: var(--sh-coffee-card);
  --g-blur: 15px;
  position: relative;
  max-width: 470px;
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.coffee__panel .eyebrow { color: var(--coffee-eyebrow); }
.coffee__title { font-size: var(--fs-h2-coffee); line-height: 1.08; }
.coffee__copy {
  color: var(--magenta-17);
  font-size: var(--fs-body-md);
  line-height: 1.6;
}
.coffee__actions { padding-top: 11.09px; }

/* ========================================================== resultados */

.resultados__inner,
.resenas__inner,
.contacto__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resultados__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.resultados__head .h2 { max-width: 560px; }
.resultados__note {
  max-width: 340px;
  color: var(--grey-32);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}

.ba-grid {
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* While two of the three services are waiting on real photos, a lone slider
   left-aligned in a three-column track reads as two that failed to load.
   Centred at its natural width it reads as the only one there is. Restores
   itself the moment a second slider is uncommented - no edit needed here. */
.ba-grid:has(> .ba:only-child) {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

/* ---- before / after slider ----
   --pos drives both the clip of the "antes" layer and the handle position. */
.ba {
  --pos: 50%;
  position: relative;
  aspect-ratio: 402.66 / 503.31;
  border-radius: var(--r-28);
  box-shadow: var(--sh-ba);
  overflow: hidden;
  background: var(--grey-50-8);
  touch-action: pan-y;
}

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "antes" sits on top, clipped to the left of the handle */
.ba__img--antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white-95);
  box-shadow: var(--sh-divider);
  pointer-events: none;
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  translate: -50% -50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-22);
  background: var(--white-42);
  box-shadow: inset 0 0 0 1px var(--white-85);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--rose-7);
  font-size: var(--fs-xxs);
  pointer-events: none;
  transition: scale var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* the handle is the only affordance that this is draggable, so let it react */
.ba:hover .ba__handle { background: var(--white-60); }
.ba.is-dragging .ba__handle {
  scale: 1.08;
  background: var(--white-75);
}

.ba__tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--rose-7-50);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* the real control: a range input laid over the card, invisible but focusable */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  /* grab/grabbing reads as "drag me", where ew-resize suggested hover-tracking */
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba.is-dragging .ba__range { cursor: grabbing; }
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
}
.ba__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
}
.ba:has(.ba__range:focus-visible) {
  outline: 2px solid var(--rose-47);
  outline-offset: 3px;
}

/* ============================================================== resenas */

.resultados__inner > .resenas__head,
.resenas__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.resenas__inner { gap: 22px; }
.resenas__head-text {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 11.4px;
}
/* :not(.eyebrow) matters - a bare `p` here would out-specify .eyebrow and
   restyle the section label. Same guard is used in .bio__body below. */
.resenas__head-text p:not(.eyebrow) {
  color: var(--grey-32);
  font-size: var(--fs-body-md);
  line-height: 1.6;
}

.score {
  --g-bg: var(--white-66);
  --g-radius: var(--r-22);
  --g-border: var(--white-82);
  --g-shadow: var(--sh-score);
  --g-blur: 9px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.score__value {
  font-family: var(--font-display);
  font-size: 2.375rem;          /* 38 */
  line-height: 1;
  color: var(--rose-7);
}
.score__meta { display: flex; flex-direction: column; gap: 3px; }
.score__meta .stars { font-size: var(--fs-xxs); }
.score__source { color: var(--grey-32); font-size: var(--fs-nano); line-height: 1; }

/* A scroll-snap track rather than a fixed grid, so the number of reviews is no
   longer capped at what fits in one row. Three sit across on desktop and the
   rest are a swipe or an arrow press away. Native scrolling means touch and
   trackpad gestures work with no JS; initReviews() only adds the arrows. */
.reviews {
  padding-top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* the arrows are the affordance */
  /* Bleed the padding so the cards' shadow is not clipped by the scroll box. */
  margin-inline: -8px;
  padding-inline: 8px;
  padding-bottom: 6px;
}
.reviews::-webkit-scrollbar { display: none; }
.reviews > .review { scroll-snap-align: start; }

/* Someone who asked for less motion gets an instant jump, not a glide. */
@media (prefers-reduced-motion: reduce) {
  .reviews { scroll-behavior: auto; }
}

/* No margin-top here. .resenas__inner is a flex column with gap:22px, so an
   extra 18px stacked on top of that gap and pushed the row down toward the
   buttons - 40px of air above it against 22px below. The parent gap alone
   spaces it evenly on both sides. */
.reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.reviews__arrow {
  width: 44px;                        /* minimum comfortable tap target */
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--white-70);
  box-shadow: inset 0 0 0 1px var(--rose-7-13), var(--sh-ghost);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--rose-7);
  line-height: 0;                     /* the SVG is the only content */
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.reviews__arrow:hover:not(:disabled) {
  background: var(--rose-7);
  color: var(--white);
  transform: scale(1.06);
}
.reviews__arrow:active:not(:disabled) { transform: scale(0.97); }
/* Dimmed rather than removed at the ends, so the row does not reflow. */
.reviews__arrow:disabled { opacity: 0.3; cursor: default; }

.reviews__arrow svg { display: block; }

.reviews__count {
  min-width: 7ch;
  text-align: center;
  color: var(--grey-45);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-count);
}

.review {
  --g-bg: var(--white-66);
  --g-radius: var(--r-26);
  --g-border: var(--white-85);
  --g-shadow: var(--sh-review);
  --g-blur: 9px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.review__body {
  flex: 1;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review__body .stars { font-size: var(--fs-micro); letter-spacing: 0.12em; }

.review__quote {
  color: var(--rose-15);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}

.review__author {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rose-7-10);
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-47) 0%, var(--rose-25) 100%);
  color: var(--white);
  font-size: var(--fs-xxs);
  font-weight: 700;
  line-height: 1;
}

.review__name { color: var(--rose-7); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.review__when { color: var(--grey-45); font-size: var(--fs-eyebrow); line-height: 1.3; }

/* ============================================================ instagram */

.instagram__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.instagram__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.instagram__head-text { display: flex; flex-direction: column; gap: 11px; }
.instagram__handle { font-size: var(--fs-h2-sm); line-height: 1.06; }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.ig-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-22);
  box-shadow:
    inset 0 0 0 1px var(--rose-47-35),
    var(--sh-ig);
  overflow: hidden;
  background: var(--grey-50-8);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease);
}
.ig-tile:hover img { transform: scale(1.04); }

.ig-tile__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white-50);
  box-shadow: inset 0 0 0 1px var(--white-75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--rose-47);
  font-size: 11px;
  line-height: 1;
}

/* ================================================================ promo */

.promo__card {
  position: relative;
  width: 100%;
  /* Figma is 60px 310px on a 1240 card; that padding exists only to centre the
     620px column, which .promo__inner now does on its own. */
  padding: 60px 24px;
  border-radius: var(--r-36);
  background: linear-gradient(
    163deg,
    var(--rose-7) 0%,
    var(--rose-14) 52%,
    var(--rose-24) 100%
  );
  overflow: hidden;
}

.promo__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Figma places these at x=99 and x=896 on a 1240 card; expressed as
   percentages so they hold their relative position at every width. */
.promo__glow--a {
  width: 280px; height: 280px;
  left: 8%; top: -99px;
  background: radial-gradient(circle, var(--rose-47-55) 0%, var(--rose-47-0) 68%);
}
.promo__glow--b {
  width: 220px; height: 220px;
  left: 72%; top: 232px;
  background: radial-gradient(circle, var(--rose-47-35) 0%, var(--rose-47-0) 68%);
}

.promo__inner {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11.3px;
  text-align: center;
}
.promo__inner .eyebrow { color: var(--rose-71); }
.promo__title { color: var(--white); font-size: var(--fs-h2-promo); line-height: 1.08; }
.promo__copy {
  color: var(--white-72);
  font-size: var(--fs-body-md);
  line-height: 1.6;
}

.promo__form {
  width: 100%;
  padding-top: 14.71px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.promo__input {
  flex: 1 1 340px;
  max-width: 340px;
  padding: 16px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white-13);
  box-shadow: inset 0 0 0 1px var(--white-28);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--white);
  font-size: var(--fs-body);
  line-height: 1;
}
.promo__input::placeholder { color: var(--grey-46); }

/* Collapses to zero height while empty so the idle card matches the Figma
   geometry; it only takes space once there is something to announce. */
.promo__msg {
  width: 100%;
  color: var(--white-72);
  font-size: var(--fs-xxs);
  line-height: 1.5;
}
.promo__msg:not(:empty) { padding-top: 6px; }
.promo__msg[data-state="error"] { color: var(--rose-71); }

/* ================================================================== bio */

.bio__card {
  --g-bg: var(--white-66);
  --g-radius: var(--r-36);
  --g-border: var(--white-85);
  --g-shadow: var(--sh-bio);
  --g-blur: 10px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.bio__media { background: var(--grey-50-8); }
.bio__media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.bio__body {
  padding: 44px 44px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bio__title { margin-top: 12px; font-size: var(--fs-h2-sm); line-height: 1.08; }
.bio__body > p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--magenta-24);
  font-size: var(--fs-body-md);
  line-height: 1.7;             /* 26.35 / 15.5 */
}
.bio__body > p:not(.eyebrow) + p:not(.eyebrow) { margin-top: 14px; }

.bio__stats {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rose-7-10);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.bio__stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;           /* 28 */
  line-height: 1.2;
  color: var(--rose-7);
}
.bio__stat-label { color: var(--grey-45); font-size: var(--fs-micro); line-height: 1.3; }

/* ============================================================= contacto */

.contacto { padding-bottom: 80px; }

.contacto__grid {
  padding-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.contacto__map {
  min-height: 420px;
  border-radius: var(--r-30);
  box-shadow:
    inset 0 0 0 1px var(--white-85),
    var(--sh-ba);
  overflow: hidden;
  background: var(--grey-50);
}
.contacto__map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.contacto__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-card {
  --g-bg: var(--white-66);
  --g-radius: var(--r-30);
  --g-border: var(--white-85);
  --g-shadow: var(--sh-review);
  --g-blur: 10px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 8.8px;
}
.info-card--hours { gap: 12px; }

.info-card address {
  color: var(--magenta-24);
  font-size: 0.9375rem;         /* 15 */
  font-style: normal;
  line-height: 1.65;            /* 24.75 / 15 */
}
.info-card address b { color: var(--rose-7); font-weight: 700; }

.info-card__actions { padding-top: 9.2px; }

.hours { display: flex; flex-direction: column; }
.hours > div {
  padding: 8px 0;
  border-bottom: 1px solid var(--rose-7-7);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.hours dt { color: var(--magenta-24); font-size: var(--fs-body-sm); line-height: 1.2; }
.hours dd {
  margin: 0;
  color: var(--rose-7);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.2;
}
.hours dd.is-closed { color: var(--rose-47); }

/* =============================================================== footer */

.footer {
  padding: 52px var(--gutter) 40px;
  background: var(--rose-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.footer__top {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer__brand { display: flex; flex-direction: column; gap: 8.8px; }
.footer__brand img { width: 64px; height: auto; }
.footer__brand p {
  max-width: 260px;
  color: var(--white-62);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.footer__list { display: flex; flex-direction: column; gap: 8px; }
.footer__list a {
  color: var(--white-62);
  font-size: var(--fs-xs);
  line-height: 1.25;
  transition: color var(--dur) var(--ease);
}
.footer__list a:hover { color: var(--white); }

.footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__cta p { color: var(--white-62); font-size: var(--fs-nano); }

.footer__bottom {
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--white-12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--white-62);
  font-size: var(--fs-nano);
  line-height: 1.25;
}
.footer__bottom a:hover { color: var(--white); }

/* ============================================================= whatsapp */

.wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 16px;
  border-radius: var(--r-pill);
  background: var(--whatsapp);
  box-shadow:
    inset 0 0 0 1px var(--white-45),
    var(--sh-wa);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
/* Resolves to black like every other hover on the site, instead of a slightly
   darker green that only read as a shadow change. WhatsApp green stays the rest
   state, so the button is still recognisable at a glance; the icon carries the
   brand once the pill goes dark. The lift is now a small scale so the button
   grows toward the cursor rather than sliding out from under it. */
.wa:hover {
  transform: scale(1.05);
  background: var(--rose-7);
  box-shadow: inset 0 0 0 1px var(--white-28), 0 16px 36px rgba(23, 13, 18, 0.38);
}
.wa:active { transform: scale(0.98); }

.wa img {
  width: 22px;
  height: 22px;
  transition: transform var(--dur) var(--ease);
}
/* A single unhurried tick of the handset, not a loop - it should read as the
   button acknowledging the cursor, not as something demanding attention. */
.wa:hover img { transform: rotate(-12deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .wa:hover,
  .wa:active { transform: none; }
  .wa:hover img { transform: none; }
}

/* ============================================================ card price
   The service cards now carry a price. Time and price are stacked into one
   left-hand group so .card__meta keeps its two-child space-between layout and
   the "Agendar" affordance stays pinned right. */
.card__facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card__price {
  color: var(--rose-7);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
}

/* ================================================================= promos
   Deliberately the loudest surface on the page: brand magenta, not the
   near-black of the Club HILO card further down. Two dark blocks would compete
   and the weekly price needs to read as an offer at a glance. */
.promos__card {
  position: relative;
  width: 100%;
  padding: 52px 34px;
  border-radius: var(--r-36);
  background: linear-gradient(153deg, var(--rose-25) 0%, var(--rose-47) 100%);
  box-shadow: var(--sh-coffee);
  overflow: hidden;
}

.promos__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.promos__glow--a {
  width: 320px; height: 320px;
  left: -70px; top: -130px;
  background: radial-gradient(circle, var(--white-28) 0%, var(--rose-47-0) 70%);
}
.promos__glow--b {
  width: 260px; height: 260px;
  right: -50px; bottom: -120px;
  background: radial-gradient(circle, var(--white-28) 0%, var(--rose-47-0) 70%);
}

.promos__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 330px) 1fr;
  align-items: center;
  gap: 36px;
}
.promos__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promos__head .eyebrow { color: var(--white); }
.promos__title {
  color: var(--white);
  font-size: var(--fs-h2-coffee);
  line-height: 1.08;
}
.promos__copy {
  color: var(--white-82);
  font-size: var(--fs-body-md);
  line-height: 1.6;
}

.promos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ptile {
  --g-bg: var(--white-90);
  --g-radius: var(--r-28);
  --g-border: var(--white);
  --g-shadow: var(--sh-coffee-card);
  --g-blur: 12px;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.ptile__day {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--rose-47);
  color: var(--white);
  font-size: var(--fs-tag);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
}
.ptile__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  color: var(--rose-7);
}
.ptile__desc {
  color: var(--grey-32);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.ptile__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 4px;
  color: var(--rose-47);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.ptile__was {
  color: var(--grey-57);
  font-family: var(--font-ui);
  font-size: var(--fs-xxs);
  font-weight: 500;
  text-decoration: line-through;
}
.ptile__time {
  color: var(--grey-32);
  font-size: var(--fs-xxs);
  line-height: 1.25;
}
.ptile__cta {
  margin-top: 14px;
  align-self: stretch;
  justify-content: center;
}

/* ================================================================== laser
   Laser & Skin Studio by LM is a separate business sharing the space. Dark
   plum rather than the magenta of the promos card above or the Club HILO card
   below, so three feature blocks on one page stay distinguishable. No photo
   has been supplied, so the card is typographic by design. */
.laser__card {
  position: relative;
  width: 100%;
  padding: 52px 34px;
  border-radius: var(--r-36);
  background: linear-gradient(
    153deg,
    var(--rose-7) 0%,
    var(--rose-15) 55%,
    var(--rose-20) 100%
  );
  box-shadow: var(--sh-coffee);
  overflow: hidden;
}

.laser__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.laser__glow--a {
  width: 300px; height: 300px;
  left: 4%; top: -140px;
  background: radial-gradient(circle, var(--rose-47-35) 0%, var(--rose-47-0) 70%);
}
.laser__glow--b {
  width: 240px; height: 240px;
  right: 6%; bottom: -130px;
  background: radial-gradient(circle, var(--rose-47-35) 0%, var(--rose-47-0) 70%);
}

.laser__inner {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.laser__inner .eyebrow { color: var(--rose-71); }
.laser__title {
  color: var(--white);
  font-size: var(--fs-h2-coffee);
  line-height: 1.08;
}
.laser__copy {
  color: var(--white-72);
  font-size: var(--fs-body-md);
  line-height: 1.6;
}

.laser__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 6px;
  list-style: none;
}
.laser__list li {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--white-12);
  box-shadow: inset 0 0 0 1px var(--white-28);
  color: var(--white);
  font-size: var(--fs-xxs);
  font-weight: 500;
  line-height: 1.25;
}
.laser__actions {
  justify-content: center;
  padding-top: 12px;
}