/* Paso 2: warm ivory, charcoal and quiet olive details. */
.app-root { height: 100%; overflow: hidden; scroll-behavior: auto; background: #f6f3ed; }
.services-page {
  --ink: #171816; --muted: #7b7a73; --purple: #70735a; --line: #e6e2da;
  --surface: #fbf9f5; --bg: #f6f3ed;
  display: flex; flex-direction: column; width: 100%; max-width: 1040px;
  height: 100dvh; min-height: 0; margin: 0 auto; padding: 0; overflow: hidden;
  overscroll-behavior: none; color: var(--ink); background: var(--bg);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.services-page [hidden] { display: none !important; }
.services-page :is(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.services-page .site-header {
  position: relative; flex: 0 0 auto; width: 100%; min-height: 76px; margin: 0;
  padding: 18px 32px 12px; background: var(--bg); border: 0; backdrop-filter: none;
}
.app-wordmark { display: block; width: 64px; height: 36px; margin-inline-start: 8px; flex-shrink: 0; }
.app-wordmark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-address { display: flex; align-items: center; gap: 7px; max-width: min(60%, 260px); min-height: 44px; padding: 4px 0 4px 8px; border: 0; background: transparent; color: var(--ink); font-size: 13px; }
.app-address > svg { width: 21px; height: 21px; flex-shrink: 0; }
.app-address .address-chevron { width: 15px; height: 15px; margin-left: 1px; }
.app-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: #cdc9be; text-underline-offset: 4px; }
.services-page main { flex: 1 1 auto; width: 100%; max-width: none; min-height: 0; margin: 0; overflow: hidden; background: var(--bg); }
.services-page .app-screen { height: 100%; min-height: 0; padding-bottom: calc(110px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #d3cfc5 transparent; }
.services-page .app-screen-home { scrollbar-width: none; }
.services-page .app-screen-home::-webkit-scrollbar { display: none; }
.services-page .section { width: calc(100% - 64px); max-width: none; margin: 0 auto; padding: 0; }
.services-page .footer { display: none; }
.services-page .home-intro { padding: 22px 0 34px; }
.home-intro h1 { margin: 0 0 12px; font-size: clamp(38px, 5.4vw, 56px); font-weight: 400; letter-spacing: -.055em; line-height: 1.08; }
.home-intro h1 strong { font-weight: 750; }
.home-intro p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; letter-spacing: -.025em; }
.app-section-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.app-section-title h2, .process h2 { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.25; letter-spacing: -.045em; }
.show-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 0 6px 12px; border: 0; background: none; color: #575950; font-size: 12px; white-space: nowrap; }
.show-all svg { width: 16px; height: 16px; }
.show-all:hover { color: var(--ink); }
.category-track { display: flex; gap: 14px; overflow-x: auto; margin-right: -32px; padding: 2px 32px 6px 0; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline-start: 0; overscroll-behavior-x: contain; touch-action: auto; }
.category-track::-webkit-scrollbar { display: none; }
.category, .catalogue-card { display: block; flex: 0 0 190px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; scroll-snap-align: start; }
.category > span, .catalogue-card > span { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 17px; background: #e9e2d6; }
.category img, .catalogue-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.category strong, .catalogue-card strong { display: block; min-height: 40px; margin: 10px 2px 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.category:hover img, .catalogue-card:hover img { transform: scale(1.025); }
.category:focus-visible, .catalogue-card:focus-visible { outline-offset: 5px; border-radius: 17px; }
.carousel-position { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 10px; }
.carousel-position span { width: 15px; height: 4px; border-radius: 4px; background: #e1ddd3; transition: background .2s, width .2s; }
.carousel-position .is-current { width: 23px; background: #74775f; }
.services-page .process { padding-top: 36px; scroll-margin-top: 22px; }
.process h2 { margin-bottom: 18px; }
.steps { display: grid; grid-template-columns: 1fr; gap: 0; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 3px 12px; padding: 14px 0; border: 0; }
.step + .step { border-top: 1px solid var(--line); }
.step > span { grid-row: 1 / 3; align-self: start; display: block; width: auto; height: auto; padding: 0; margin: 1px 0 0; background: none; color: #74775f; font-size: 16px; font-weight: 600; line-height: 1.4; }
.step h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.step p { max-width: none; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.services-page .home-extra { padding-top: 30px; }
.home-extra button {
  display: block; width: 100%; padding: 17px 18px;
  border: 1px solid #e5e1d8; border-radius: 16px;
  background: #f2efe8; color: #4b4d45; text-align: left;
  font-size: 14px; font-weight: 500; line-height: 1.45;
  transition: background 180ms ease, border-color 180ms ease;
}
.home-extra small { display: block; margin-top: 4px; color: #696b62; font-size: 12px; font-weight: 400; line-height: 1.5; }
@media (hover: hover) {
  .home-extra button:hover { background: #eeebe3; border-color: #d9d5cb; }
}

/* One moving surface gives feedback without moving the navigation itself. */
.glass-dock {
  --dock-index: 2;
  position: fixed; z-index: 45; left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  width: min(368px, calc(100% - 32px)); padding: 6px;
  border: 1px solid #ffffffb3; border-radius: 29px;
  background: #fbf9f5df; isolation: isolate;
  box-shadow: 0 12px 35px #292b2010, 0 2px 7px #292b2006, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}
.dock-indicator {
  position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 20px) / 3); pointer-events: none;
  transform: translateX(calc(var(--dock-index) * (100% + 4px)));
  transition: transform 520ms cubic-bezier(.22, .85, .24, 1);
}
.dock-surface {
  display: block; width: 100%; height: 100%; border-radius: 23px;
  background: linear-gradient(145deg, #30332a, #171816 75%);
  box-shadow: 0 3px 9px #1b1e1818, inset 0 1px 0 #ffffff12;
}
.dock-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; min-width: 0; min-height: 62px; padding: 9px 4px;
  border: 0; border-radius: 23px; color: #67695c; background: transparent;
  font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em;
  text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color 220ms ease;
}
.dock-item svg { width: 23px; height: 23px; stroke-width: 1.5; overflow: visible; }
.dock-item.is-highlighted { color: #fbf9f5; }
.dock-item.is-highlighted .dock-icon-detail { animation: dock-line 460ms ease both; }
.glass-dock .dock-item:focus-visible { outline-offset: -3px; outline-color: #a1a48c; }
.dock-item:disabled { opacity: .55; }
@keyframes dock-line {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

/* The complete catalogue is a separate, vertically scrolling sheet. */
.service-catalogue { position: fixed; inset: auto 0 0; width: min(640px, 100%); height: calc(100dvh - 76px); max-height: calc(100dvh - 76px); max-width: none; margin: 0 auto; padding: 0; border: 0; border-radius: 28px 28px 0 0; background: #fbf9f5; color: var(--ink); box-shadow: 0 -12px 50px #23251d10; overflow: hidden; }
.service-catalogue[open] { display: flex; flex-direction: column; }
.service-catalogue::backdrop, .service-detail::backdrop, .profile-dialog::backdrop, .registration-dialog::backdrop { background: #26282066; backdrop-filter: blur(5px); }
.catalogue-handle { flex: 0 0 4px; width: 38px; height: 4px; margin: 12px auto 23px; border-radius: 5px; background: #b8b5ae; }
.catalogue-heading { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 0 24px 25px; }
.catalogue-heading h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.18; font-weight: 650; letter-spacing: -.045em; }
.catalogue-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; letter-spacing: -.025em; }
.catalogue-close { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -5px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: #efebe3; }
.catalogue-close svg { width: 23px; height: 23px; }
.catalogue-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 2px 24px calc(28px + env(safe-area-inset-bottom)); scrollbar-width: thin; scrollbar-color: #b8b5ae #efebe3; }
.catalogue-card { min-width: 0; }
.catalogue-card > span { aspect-ratio: 1.04; border-radius: 18px; }
.catalogue-card strong { min-height: 42px; margin-top: 10px; }
.catalogue-card .catalogue-arrow { position: absolute; right: 12px; bottom: 12px; width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 2px #0004); }

/* Existing service and account flows inherit the new palette. */
.service-detail { width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: var(--surface); box-shadow: 0 30px 100px #24271c25; overflow-y: auto; }
.service-detail[open] { display: grid; grid-template-columns: 1fr 1fr; }
.detail-close, .profile-close, .registration-close { position: absolute; right: 14px; top: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #efebe3; color: var(--ink); font-size: 26px; }
.detail-visual { display: grid; place-items: center; padding: 24px; }
.detail-visual img { width: 100%; height: 420px; object-fit: contain; border-radius: 18px; }
.detail-visual img[src$="nua-limpieza-general-detalle.jpg"] { mix-blend-mode: multiply; }
.detail-content { align-self: center; padding: 65px 28px 32px 8px; }
.detail-content h2 { margin-bottom: 18px; font-size: 30px; letter-spacing: -.045em; }
.detail-content > p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.detail-content .eyebrow { font-size: 10px; color: var(--purple); letter-spacing: .12em; }
.detail-content .detail-note { margin: 18px 0 25px; font-size: 12px; }
.detail-reserve { width: 100%; }
.services-page .btn-primary { border: 0; border-radius: 15px; background: var(--ink); color: #fbf9f5; box-shadow: none; font-size: 14px; }
.services-page .btn-primary:hover { background: #303229; }
.profile-dialog { width: min(390px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px 27px 27px; border: 0; border-radius: 28px; color: var(--ink); background: var(--surface); box-shadow: 0 28px 85px #24271c25; text-align: center; }
.profile-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 17px; border-radius: 19px; background: #eeebe2; }
.profile-icon img { width: 24px; height: 30px; }
.profile-dialog h2 { margin-bottom: 16px; font-size: 25px; letter-spacing: -.04em; }
.profile-dialog p { margin-bottom: 22px; color: var(--muted); font-size: 13px; }
.profile-dialog .btn { width: 100%; }
.profile-dialog [data-profile-user] { display: grid; justify-items: center; gap: 9px; }
.profile-avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.profile-dialog [data-profile-name] { font-size: 16px; }
.profile-dialog :is([data-profile-email],[data-profile-phone],[data-profile-address]) { color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.profile-register { width: 100%; margin-top: 13px; padding: 10px; border: 0; background: transparent; color: var(--purple); font-size: 13px; font-weight: 600; }
.profile-signout { margin-top: 12px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 15px; background: transparent; color: var(--ink); font-size: 13px; }
.profile-privacy { display: block; margin-top: 25px; color: var(--muted); font-size: 11px; }
.profile-extra-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 13px; }
.profile-extra-links a { color: var(--muted); font-size: 11px; }
.services-page .registration-dialog { border: 0; color: var(--ink); background: var(--surface); }
.services-page .registration-mark { background: #eeebe2; }
.services-page .registration-kicker { color: var(--purple); }
.services-page .registration-dialog h2, .services-page .registration-form label { color: var(--ink); }
.services-page .registration-intro, .services-page .registration-privacy { color: var(--muted); }
.services-page .registration-intro strong { color: var(--ink); }
.services-page .registration-form input { background: #f6f3ed; color: var(--ink); border-color: var(--line); }
.services-page .registration-form input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #70735a15; }
.services-page .registration-form input::placeholder { color: #949389; }
.services-page .registration-privacy a, .services-page .auth-message { color: var(--purple); }

/* Secondary screens retain their existing booking and referral behavior. */
.app-screen-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 59px; margin: 0 auto; padding: 9px 32px; background: #f6f3edf2; backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.app-screen-bar button { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 19px; }
.app-screen-bar strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.services-page .booking { padding-top: 25px; padding-bottom: 25px; gap: 40px; }
.services-page .booking-copy { padding-top: 0; }
.services-page .booking-copy h2 { font-size: 30px; }
.services-page .booking-form { padding: 24px; border-color: var(--line); border-radius: 22px; background: #fbf9f5; box-shadow: none; }
.services-page .booking-form label { font-size: 13px; }
.services-page .booking-form :is(input,select,textarea) { border-color: var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 14px; }
.services-page .booking-form :is(input,select,textarea):focus { outline: 2px solid #70735a35; border-color: var(--purple); }
.services-page .date-picker-trigger { background: var(--bg); border-color: var(--line); box-shadow: none; font-size: 14px; }
.services-page .date-picker-trigger[aria-expanded=true] { border-color: var(--purple); box-shadow: 0 0 0 3px #70735a15; }
.services-page .date-picker-days button:hover { color: var(--ink); background: #e9e7db; }
.services-page .date-picker-days button.is-today { box-shadow: inset 0 0 0 1px #70735a80; }
.services-page .date-picker-days button.is-selected { color: #fff; background: var(--ink); box-shadow: none; }
.services-page .date-picker-footer button { color: var(--purple); }
.services-page .cookie-banner { left: 50%; transform: translateX(-50%); background: var(--surface); box-shadow: 0 8px 32px #26261e12; }
.services-page .cookie-btn-ghost { color: var(--ink); background: #eeebe3; }
.services-page .referral-promo { margin-top: 24px; padding: 32px; background: #e9e7dc; color: var(--ink); border-radius: 22px; }
.services-page .referral-promo .eyebrow, .services-page .referral-copy > p { color: #65685b; }
.services-page .referral-btn { color: #fff; background: var(--ink); }
.services-page .testimonials { padding-top: 35px; }
.services-page .testimonials .section-heading h2 { font-size: 28px; }
.services-page .testimonial { border-color: var(--line); background: var(--surface); }

@media (min-width: 700px) {
  .services-page .site-header { padding-inline: 48px; min-height: 88px; }
  .services-page .section { width: calc(100% - 96px); }
  .services-page .home-intro { padding-top: 24px; padding-bottom: 40px; }
  .services-page .process { max-width: 600px; margin-left: 48px; }
  .services-page .home-extra { max-width: 600px; margin-left: 48px; }
  .category-track { margin-right: -48px; padding-right: 48px; }
  .catalogue-card > span { aspect-ratio: 1.3; }
}
@media (min-width: 1024px) {
  .services-page { --app-gutter: clamp(32px, 4vw, 80px); max-width: none; }
  .services-page .site-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px; min-height: 94px; padding: 18px var(--app-gutter);
    border-bottom: 1px solid var(--line);
  }
  .app-address { justify-self: end; max-width: min(100%, 320px); }
  .glass-dock {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 368px; border-radius: 23px;
    box-shadow: 0 4px 16px #292b2008, inset 0 1px 0 #fff;
  }
  .dock-item { flex-direction: row; gap: 9px; min-height: 44px; padding: 10px 8px; border-radius: 17px; font-size: 13px; }
  .dock-item svg { width: 20px; height: 20px; }
  .dock-surface { border-radius: 17px; }
  .services-page .section { width: calc(100% - 2 * var(--app-gutter)); }
  .services-page .app-screen { padding-bottom: 40px; }
  .services-page .home-intro { padding-top: 32px; }
  .category-track { gap: 18px; margin-right: calc(-1 * var(--app-gutter)); padding-right: var(--app-gutter); }
  .category { flex-basis: clamp(180px, 14vw, 240px); }
  .services-page .process { max-width: none; margin-inline: auto; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .step { padding-block: 20px; border-top: 1px solid var(--line); }
  .services-page .home-extra { margin-left: var(--app-gutter); }
  .app-screen-bar { padding-inline: var(--app-gutter); }
}
@media (max-width: 1023px) {
  .glass-dock {
    width: min(300px, calc(100% - 40px)); padding: 4px; border-radius: 30px;
    box-shadow: 0 6px 22px #292b200c, 0 1px 4px #292b2005, inset 0 1px 0 #fff;
  }
  .dock-indicator { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); }
  .dock-surface { border-radius: 25px; }
  .dock-item { min-height: 50px; padding: 6px 4px; gap: 3px; border-radius: 25px; font-size: 10px; }
  .dock-item svg { width: 20px; height: 20px; }
  .services-page .app-screen { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 650px) {
  .services-page .site-header { min-height: 74px; padding: 15px 24px 9px; }
  .services-page .section { width: calc(100% - 48px); }
  .services-page .home-intro { padding-top: 16px; padding-bottom: 29px; }
  .home-intro h1 { font-size: clamp(34px, 9.8vw, 43px); }
  .category-track { margin-right: -24px; padding-right: 24px; gap: 12px; }
  .category { flex-basis: clamp(128px, 40vw, 174px); }
  .app-screen-bar { padding-inline: 24px; }
  .service-detail[open] { display: block; }
  .detail-visual { padding: 25px 30px 0; }
  .detail-visual img { height: min(40dvh, 330px); }
  .detail-content { padding: 20px 25px 26px; }
  .detail-content h2 { font-size: 27px; }
  .services-page .booking { display: block; }
  .services-page .booking-form { grid-template-columns: 1fr; }
  .services-page .booking-form :is(input,select,textarea), .services-page .registration-form input, .services-page .date-picker-trigger { font-size: 16px; }
  .booking-copy { margin-bottom: 25px; }
  .services-page .referral-promo { padding: 26px 22px; }
}
@media (max-width: 360px) {
  .services-page .site-header { padding-inline: 20px; }
  .services-page .section { width: calc(100% - 40px); }
  .home-intro p { font-size: 14px; }
  .app-address { font-size: 12px; }
  .category-track { margin-right: -20px; padding-right: 20px; }
  .catalogue-heading { padding-inline: 20px; }
  .catalogue-heading h2 { font-size: 23px; }
  .catalogue-heading p { font-size: 13px; }
  .catalogue-grid { padding-inline: 20px; gap: 18px 12px; }
  .catalogue-card strong { font-size: 15px; }
  .step { grid-template-columns: 32px 1fr; gap: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .category img, .catalogue-card img { transition: none; }
  .dock-indicator, .dock-item { transition: none; }
  .dock-item.is-highlighted .dock-icon-detail { animation: none; }
}