/* ============================================
   Cosmetic Homepage — Service Page CSS
   Scoped under .cshp-service
   ============================================ */

/* ---------- Tokens (same as homepage) ---------- */
.cshp-service {
  --cshp-bg:          #efe9df;
  --cshp-bg-2:        #e7e0d3;
  --cshp-surface:     #ffffff;
  --cshp-surface-2:   #f6f1e8;
  --cshp-ink:         #1a1612;
  --cshp-ink-2:       #5b5249;
  --cshp-ink-3:       #6f665e;
  --cshp-line:        #d9d0c3;
  --cshp-line-2:      #c9bfaf;
  --cshp-accent:      #af6a7c; /* марсала (было #a35a3a терракота) */
  /* Акцент как ТЕКСТ. Сам --cshp-accent остаётся фирменным цветом заливок
     и декора: #af6a7c даёт всего 3,36:1 на фоне и 4,06 на белом, то есть
     как текст не проходит. Отдельный токен позволяет починить контраст,
     не трогая бренд там, где цвет работает пятном. */
  --cshp-accent-text: #945264;
  --cshp-accent-deep: #5e2a3a; /* тёмный винный (было #3a2418 коричневый) */

  --cshp-serif: "Cormorant Garamond", "Times New Roman", serif;
  --cshp-sans:  "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --cshp-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --cshp-container: 1320px;
  --cshp-gutter: 32px;

  font-family: var(--cshp-sans);
  color: var(--cshp-ink);
  -webkit-font-smoothing: antialiased;
}

/* Palette variants */
.cshp-service[data-palette="sand"]{ --cshp-bg:#efe9df; --cshp-bg-2:#e7e0d3; --cshp-surface:#fff; --cshp-ink:#1a1612; --cshp-ink-2:#5b5249; --cshp-line:#d9d0c3; }
.cshp-service[data-palette="bone"]{ --cshp-bg:#f4f1ec; --cshp-bg-2:#ebe6dd; --cshp-surface:#fff; --cshp-ink:#171514; --cshp-ink-2:#56504a; --cshp-line:#e1dad0; }
.cshp-service[data-palette="clay"]{ --cshp-bg:#eadfd1; --cshp-bg-2:#dfd1bd; --cshp-surface:#fdf9f2; --cshp-ink:#1d160f; --cshp-ink-2:#5a4d3e; --cshp-line:#cdbfa8; }
.cshp-service[data-palette="ash"] { --cshp-bg:#ececeb; --cshp-bg-2:#e1e1df; --cshp-surface:#fff; --cshp-ink:#15171a; --cshp-ink-2:#4f5359; --cshp-line:#d1d2d0; }
.cshp-service[data-accent="rust"]    { --cshp-accent:#af6a7c; }
.cshp-service[data-accent="bordeaux"]{ --cshp-accent:#7a2d2f; }
.cshp-service[data-accent="forest"]  { --cshp-accent:#3e5a44; }
.cshp-service[data-accent="ink"]     { --cshp-accent:#1a1612; }

.cshp-service *, .cshp-service *::before, .cshp-service *::after { box-sizing: border-box; }
.cshp-service a { color: inherit; text-decoration: none; }
.cshp-service img { display: block; max-width: 100%; }

/* ---------- Utility classes ---------- */
.cshp-service .cshp-container {
  width: 100%; max-width: var(--cshp-container);
  margin: 0 auto; padding: 0 var(--cshp-gutter);
}

.cshp-service .cshp-eyebrow {
  font-family: var(--cshp-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--cshp-ink-2);
  display: block; margin-bottom: 16px;
}

.cshp-service .cshp-display {
  font-family: var(--cshp-serif);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.01em;
  color: var(--cshp-ink); margin: 0;
}
/* Размер завязан и на ширину, и на ВЫСОТУ экрана: min(vw, vh).
   Раньше учитывалась только ширина, и на широком, но невысоком ноутбуке
   (1440x800) заголовок хаба в четыре строки съедал полэкрана — под ним
   не оставалось места ни адресу, ни кнопке. Теперь по высоте он ужимается,
   а на высоком мониторе остаётся прежним: там vh-предел не срабатывает.
   Нижние границы оставлены — ниже них падать некуда, читаемость важнее. */
.cshp-service .cshp-h1 { font-size: clamp(40px, min(6vw, 8.4vh), 96px); }
/* Герой хаба несёт под заголовком карточку центра, а сам заголовок там длинный
   («Centro de Medicina Estética Girona: Tratamientos Faciales y Corporales» —
   пять строк по 94px). Уменьшаем кегль именно в этом случае: на обычных
   страницах услуг заголовок короткий и карточки нет.
   ⚠ Только от 641px. Ниже действует своя мобильная шкала заголовков
   (см. конец файла), а этот селектор со специфичностью (0,3,0) перебил бы её. */
@media (min-width: 641px) {
  .cshp-service .cshp-svc-hero--salon .cshp-h1 { font-size: clamp(30px, min(3.4vw, 5vh), 56px); }
}
.cshp-service .cshp-h2 { font-size: clamp(32px, min(4vw, 5.6vh), 64px); }
.cshp-service .cshp-h3 { font-size: clamp(22px, min(2.4vw, 3.4vh), 38px); margin-bottom: 25px; }

.cshp-service .cshp-body-lg {
  font-size: 17px; line-height: 1.6; color: var(--cshp-ink-2); margin: 0;
}

.cshp-service .cshp-img-cover {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--cshp-surface-2);
}

/* Buttons */
.cshp-service .cshp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  background: var(--cshp-accent-deep); color: #f3ecdf;
  font-family: var(--cshp-sans);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--cshp-accent-deep); border-radius: 0;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.cshp-service .cshp-btn:hover { background: var(--cshp-accent); border-color: var(--cshp-accent); }
.cshp-service .cshp-btn--ghost {
  background: transparent; color: var(--cshp-ink); border-color: var(--cshp-ink);
}
.cshp-service .cshp-btn--ghost:hover { background: var(--cshp-ink); color: var(--cshp-bg); }

/* WhatsApp variant */
/* Текст на зелёном WhatsApp — тёмный, а не белый. Белый по #25d366 даёт
   1,98:1 при норме 4,5:1: узнаваемый зелёный слишком светлый. Уходить
   в тёмно-бирюзовый ради белого текста значит потерять узнаваемость кнопки,
   поэтому меняем текст. #0a2e18 проходит на всех трёх оттенках:
   7,47 на #25d366, 6,05 на #1ebe5b, 4,78 на #1da851. */
.cshp-service .cshp-btn--whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #0a2e18;
  gap: 10px;
}
/* Подпись лежит во вложенном <span>; без явного правила она наследует белый
   из общего .cshp-service .cshp-btn и остаётся нечитаемой на зелёном. */
.cshp-service .cshp-btn--whatsapp span { color: inherit; }
.cshp-service .cshp-btn--whatsapp:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
}
.cshp-service .cshp-btn__icon { flex-shrink: 0; }
/* Pulso reservado para los dos CTA principales (hero + barra sticky) — el resto
   (médico, ubicaciones) queda verde y en calma para no saturar la página. */
.cshp-svc-hero__cta .cshp-btn--whatsapp,
.cshp-sticky-cta-bar__btn {
  animation: cshp-wa-pulse 2.4s ease-in-out infinite;
}
@keyframes cshp-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%      { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); }
}

/* Sticky WhatsApp CTA bar (slides down from the top once the hero scrolls out of view) */
.cshp-sticky-cta-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--cshp-bg);
  border-bottom: 1px solid var(--cshp-line);
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.12);
  transform: translateY(-100%);
  transition: transform 0.35s ease;
  pointer-events: none;
}
.cshp-sticky-cta-bar.cshp-is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.cshp-sticky-cta-bar__inner {
  max-width: var(--cshp-container);
  margin: 0 auto;
  padding: 14px var(--cshp-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cshp-sticky-cta-bar__label {
  font-family: var(--cshp-serif);
  font-size: 20px;
  color: var(--cshp-ink);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cshp-sticky-cta-bar__btn { flex-shrink: 0; height: 44px; padding: 0 20px; }
@media (max-width: 640px) {
  .cshp-sticky-cta-bar__label { display: none; }
  .cshp-sticky-cta-bar__inner { justify-content: center; padding: 10px var(--cshp-gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .cshp-service .cshp-btn--whatsapp { animation: none; }
  .cshp-sticky-cta-bar { transition: transform 0.15s linear; }
}

/* Section block */
.cshp-service .cshp-block {
  padding: 120px 0;
  border-bottom: 1px solid var(--cshp-line);
}

.cshp-service .cshp-section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
}
.cshp-service .cshp-section__head .cshp-display { margin-top: 4px; }

/* Override Merchant content constraints */
.page.full-content.cshp-service-page .site-content,
.cshp-service-page .site-content {
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding: 0;
}
.cshp-service-page .entry-content { max-width: none; padding: 0; margin: 0; }
.cshp-service-page .page-header { display: none; }
.cshp-service-page .product-gallery-summary { padding: 0; }
.cshp-service-page #content { padding: 0; }

/* ========================================
   1. HERO (split grid — copy left, real <img> right)
   ======================================== */
.cshp-svc-hero {
  border-bottom: 1px solid var(--cshp-line);
  background: var(--cshp-bg);
}
.cshp-svc-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  align-items: stretch;
}
.cshp-svc-hero__copy {
  padding: 40px var(--cshp-gutter) 80px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--cshp-line);
  max-width: 720px; margin-left: auto; width: 100%;
  min-width: 0; /* grid items default to min-width:auto, so a long single
                   word in the title (e.g. "Micropigmentación") was forcing
                   the whole grid — and the page — wider than the viewport */
}
/* Страницы-хабы (филиалы и категории) фото в шапке не выводят — см. условие
   `$hero_img_url && ! $is_hub` в templates/service.php. Из-за этого вторая
   колонка сетки оставалась пустой: на десктопе это было ~684px белого поля
   справа. Правило-схлопывание существовало, но лежало внутри
   @media (max-width: 1100px), то есть чинило только мобильный.
   Схлопываем на всех ширинах и центрируем текст на читаемую меру. */
.cshp-svc-hero--compact .cshp-svc-hero__grid { grid-template-columns: minmax(0, 1fr); }
.cshp-svc-hero--compact .cshp-svc-hero__copy {
  border-right: 0;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.cshp-svc-hero__title { margin: 20px 0 0; hyphens: auto; overflow-wrap: break-word; }
/* Отступ под заголовком задаёт следующий элемент. 32px, а не 28: у дисплейного
   шрифта line-height 0.98, строчный бокс уже самих букв, и заданный отступ
   визуально читается меньше.
   Селектор квалифицирован `.cshp-service` не для красоты: у подзаголовка есть
   и класс .cshp-body-lg, а базовое `.cshp-service .cshp-body-lg { margin: 0 }`
   со специфичностью (0,2,0) перебивает одиночный класс. Из-за этого отступ
   под заголовком не работал на страницах услуг вообще — с самого начала.
   Правил под .cshp-clamp-wrap здесь больше нет: подзаголовок в герое не
   схлопывается (кнопка «Leer más» убрана 2026-08-28), обёртки не возникает. */
.cshp-service .cshp-svc-hero__tagline { margin-top: 32px; }
.cshp-svc-hero__tagline { max-width: 520px; }
.cshp-svc-hero__tagline p { margin: 0 0 10px; }
.cshp-svc-hero__tagline p:last-child { margin-bottom: 0; }
.cshp-svc-hero__tagline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cshp-svc-hero__tagline img.emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; margin: 0 2px 0 0; }
.cshp-svc-hero__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.cshp-svc-hero__visual {
  position: relative;
  background: var(--cshp-surface-2);
  overflow: hidden;
  min-height: 420px;
}
.cshp-svc-hero__visual .cshp-img-cover { position: absolute; inset: 0; }
/* Заглушка на месте главного фото. Та же подача, что у карточек филиалов
   в header-footer.css: диагональная заливка и логотип в 14% непрозрачности —
   пустое место читается как «фото ещё не приехало», а не как поломка. */
.cshp-svc-hero__visual--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cshp-bg-2) 0%, var(--cshp-surface) 55%, var(--cshp-bg-2) 100%);
}
.cshp-svc-hero__visual--ph img { width: 46%; max-width: 240px; height: auto; opacity: 0.14; }
.cshp-svc-hero__visual--ph::after { display: none; }

/* ========================================
   2. ABOUT
   ======================================== */
.cshp-svc-about { background: var(--cshp-surface); }

.cshp-svc-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Модификатор --single убран: правую колонку больше никогда не оставляем
   пустой — там либо фото, либо тарифы, либо декоративные соты. */

/* ── Соты + круговая надпись ──────────────────────────────────────────────
   Ставятся, когда у страницы нет ни about-картинки, ни тарифов (20 страниц
   из 34). Чистая декорация: aria-hidden, ссылок и текста для чтения нет. */
.cshp-svc-about__astx {
  position: relative;
  align-self: center;
  width: 100%; max-width: 520px;
  aspect-ratio: 1;
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
}
.cshp-svc-about__mol {
  position: absolute; width: 60%; height: 60%;
  color: var(--cshp-accent); opacity: 0.32;
}
/* stroke-width задан в юнитах viewBox, поэтому при сжатии блока линия худеет
   сама (60/74 ≈ 0.81). Ещё немного снимаем цифрой — итого около четверти. */
.cshp-svc-about__mol path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.cshp-svc-about__mol-fill { fill: currentColor; stroke: none; }
.cshp-svc-about__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* Кольцо проворачивается от прокрутки, а не само по себе. Таймлайн `view()`
   растянут на весь проход блока через экран: вошёл снизу — 0°, ушёл вверх — 360°.
   JS для этого не нужен, а он тут и не работал бы: CookieYes вырезает наши
   скрипты до согласия на куки.
   Где scroll-driven animations не поддерживаются, кольцо просто стоит.
   Постоянное вращение как запасной вариант не ставим — от него и уходили. */
@supports (animation-timeline: view()) {
  .cshp-svc-about__ring {
    animation: cshp-astx-spin linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
/* font-size приходит инлайном: он считается от длины строки, см. service.php.
   Трекинг там же в формуле — правите здесь, правьте и константу. */
.cshp-svc-about__ring text {
  font-family: var(--cshp-mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  fill: var(--cshp-accent); opacity: 0.55;
}
@keyframes cshp-astx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cshp-svc-about__ring { animation: none; } }
.cshp-svc-about__copy .cshp-display { margin-bottom: 28px; }
.cshp-svc-about__copy .cshp-body-lg { margin-bottom: 40px; }

/* Плотный вариант: тарифы во второй колонке секции "About", когда своей
   about-картинки нет — вместо отдельной почти пустой секции ниже. */
.cshp-svc-about__prices {
  background: var(--cshp-bg);
  border: 1px solid var(--cshp-line);
  padding: 36px;
}
.cshp-svc-about__prices .cshp-eyebrow { margin-bottom: 12px; }
.cshp-svc-about__prices .cshp-h3 { margin-bottom: 8px; }
.cshp-svc-price-list--compact .cshp-svc-price-row {
  padding: 14px 0;
}
.cshp-svc-price-list--compact .cshp-svc-price-row__name {
  font-size: 15px;
}

.cshp-svc-about__stats {
  display: flex; gap: 48px;
}
.cshp-svc-about__stats > div {
  display: flex; flex-direction: column; gap: 4px;
}
.cshp-svc-stat {
  font-family: var(--cshp-serif);
  font-size: 28px; font-weight: 400;
  color: var(--cshp-ink);
}

.cshp-svc-about__visual {
  position: relative;
  align-self: start;
  overflow: hidden;
}
.cshp-svc-about__visual img.cshp-img-cover {
  height: auto;
  object-fit: contain;
}
.cshp-svc-about__visual::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,22,18,0) 60%, rgba(26,22,18,0.06) 100%);
}

/* ========================================
   2b. PROCESO (paso a paso)
   ======================================== */
.cshp-svc-process { background: var(--cshp-bg); }
/* Нижняя плашка — часть секции, а не отдельный блок: свой фон во всю ширину,
   поэтому нижний padding секции ей отдаётся. */
.cshp-svc-process--foot { padding-bottom: 0; }

.cshp-svc-process__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: end;
}
.cshp-svc-process__title { margin: 16px 0 0; }
.cshp-service .cshp-svc-process__title em { font-style: normal; color: var(--cshp-accent); }
.cshp-service .cshp-svc-process__lede {
  margin: 0; max-width: 44ch;
  font-size: 17px; line-height: 1.62; color: var(--cshp-ink-2);
}

.cshp-svc-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
/* Чётное число шагов — чётная сетка: модификатор ставится в service.php
   по их количеству, а не подбирается селектором по числу детей. */
.cshp-svc-process__grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Палитра карточки живёт в переменных: тёмный вариант переопределяет только их,
   поэтому у ховера не появляется второго комплекта правил-двойников. */
.cshp-svc-process__step {
  --step-bg:      var(--cshp-surface-2);
  --step-border:  var(--cshp-line);
  --step-rule:    var(--cshp-line);
  --step-ink:     var(--cshp-ink);
  --step-ink-2:   var(--cshp-ink-2);
  --step-ink-3:   var(--cshp-ink-3);
  --step-accent:  var(--cshp-accent);
  --step-title:   var(--cshp-ink);
  --step-ghost:   var(--cshp-line-2);
  --step-ghost-o: 0.5;

  display: flex; flex-direction: column;
  background: var(--step-bg);
  border: 1px solid var(--step-border);
  color: var(--step-ink);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Тёмной становится карточка под курсором, а пока курсора в сетке нет — та,
   что стоит в середине ряда. Один список селекторов на оба случая: значения
   не расходятся, и «активная» карточка всегда ровно одна.
   На тач-устройствах :has(:hover) не срабатывает — там остаётся середина.
   Оттенки подобраны под марсалу --cshp-accent-deep (#5e2a3a), а не скопированы
   из эталона: там базовый цвет коричневый, и его светлые производные на вине
   отдают грязью. */
.cshp-svc-process__grid:not(:has(.cshp-svc-process__step:hover)) .cshp-svc-process__step--dark,
.cshp-svc-process__step:hover {
  --step-bg:      var(--cshp-accent-deep);
  --step-border:  var(--cshp-accent-deep);
  --step-rule:    rgba(243, 231, 234, 0.22);
  --step-ink:     #f3e7ea;
  --step-ink-2:   #d8c3c9;
  --step-ink-3:   #bfa3ab;
  --step-accent:  #d9a3b0;
  --step-title:   #fff;
  --step-ghost:   #fff;
  --step-ghost-o: 0.55;
}
.cshp-svc-process__top {
  position: relative;
  padding: 30px 32px 26px;
  border-bottom: 1px solid var(--step-rule);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.cshp-svc-process__ghost {
  position: absolute; right: 14px; bottom: -34px;
  font-size: 150px; font-weight: 200; line-height: 1; letter-spacing: -0.06em;
  color: var(--step-ghost); opacity: var(--step-ghost-o);
  pointer-events: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.cshp-svc-process__kicker {
  position: relative;
  font-family: var(--cshp-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--step-accent);
  transition: color 0.25s ease;
}
/* Заголовок карточки — Manrope 300, а не дисплейный Cormorant, как остальные h3
   на странице: за ним стоит ghost-цифра в 150px, и широкие светлые засечки
   с ней сцепляются в кашу. Эталон здесь тоже уходит в гротеск.
   min-height выравнивает низ заголовков в ряду: без него однострочный шаг
   поднимает свой текст выше соседей и ряд «пляшет». */
.cshp-service .cshp-svc-process__step-title {
  position: relative;
  margin: 14px 0 0;
  font-family: var(--cshp-sans);
  font-size: 30px; font-weight: 300; letter-spacing: -0.025em;
  line-height: 1.1; text-wrap: balance;
  min-height: 2.2em;
  color: var(--step-title);
  transition: color 0.25s ease;
}
/* Надзаголовок заполнен не везде. Без него заголовок поднимается на его место
   и въезжает в верх ghost-цифры — в эталоне эту строку всегда занимает kicker.
   Соседний селектор срабатывает ровно тогда, когда между цифрой и заголовком
   ничего нет, и возвращает те же ~30px. */
.cshp-service .cshp-svc-process__ghost + .cshp-svc-process__step-title { margin-top: 30px; }
.cshp-svc-process__body {
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; gap: 20px;
  flex: 1;
}
.cshp-service .cshp-svc-process__text {
  margin: 0;
  font-size: 15px; line-height: 1.66; color: var(--step-ink-2);
  text-wrap: pretty;
  transition: color 0.25s ease;
}
.cshp-svc-process__facts { margin-top: auto; display: flex; flex-direction: column; }
.cshp-svc-process__fact {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--step-rule);
  font-family: var(--cshp-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--step-ink-3);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cshp-svc-process__fact b {
  font-weight: 500; letter-spacing: 0.06em; color: var(--step-ink);
  transition: color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cshp-svc-process__step,
  .cshp-svc-process__top,
  .cshp-svc-process__ghost,
  .cshp-svc-process__kicker,
  .cshp-service .cshp-svc-process__step-title,
  .cshp-service .cshp-svc-process__text,
  .cshp-svc-process__fact,
  .cshp-svc-process__fact b { transition: none; }
}

.cshp-svc-process__foot {
  margin-top: 80px;
  background: var(--cshp-bg-2);
  border-top: 1px solid var(--cshp-line-2);
}
.cshp-svc-process__foot .cshp-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-top: 34px; padding-bottom: 34px;
}
.cshp-service .cshp-svc-process__foot p {
  margin: 0; max-width: 58ch;
  font-size: 16px; color: var(--cshp-ink-2);
  text-wrap: pretty;
}

/* ========================================
   2c. BENEFICIOS
   ======================================== */
.cshp-svc-benefits { background: var(--cshp-surface); }
.cshp-svc-benefits__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 48px;
}
.cshp-svc-benefits__list li {
  position: relative;
  padding-left: 32px;
  font-size: 16px; line-height: 1.6;
  color: var(--cshp-ink-2);
}
.cshp-svc-benefits__list li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23af6a7c'/%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}

/* ========================================
   3. PRICE LIST
   ======================================== */
.cshp-svc-prices { background: var(--cshp-bg); }

.cshp-svc-price-list {
  max-width: 900px;
}
.cshp-svc-price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-svc-price-row:first-child { border-top: 1px solid var(--cshp-line); }

.cshp-svc-price-row__name {
  font-family: var(--cshp-sans);
  font-size: 16px; font-weight: 500;
  color: var(--cshp-ink);
}
.cshp-svc-price-row__desc {
  grid-column: 1 / -1;
  font-size: 14px; color: var(--cshp-ink-3);
  margin-top: -8px;
}
.cshp-svc-price-row__desc:empty { display: none; }

.cshp-svc-price-row__old {
  font-family: var(--cshp-mono);
  font-size: 13px; color: var(--cshp-ink-3);
  text-decoration: line-through;
  letter-spacing: 0.04em;
}
.cshp-svc-price-row__old:empty { display: none; }

.cshp-svc-price-row__price {
  font-family: var(--cshp-mono);
  font-size: 15px; font-weight: 500;
  color: var(--cshp-accent);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ========================================
   4. GALLERY
   ======================================== */
.cshp-svc-gallery { background: var(--cshp-surface); }

.cshp-svc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.cshp-svc-gallery__item { margin: 0; }
.cshp-svc-gallery__img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 15px;
  overflow: hidden;
  background: var(--cshp-surface-2);
}
.cshp-svc-gallery__img-wrap .cshp-img-cover {
  height: 100%;
  object-fit: contain;
}
.cshp-svc-gallery__badge {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--cshp-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(26,22,18,0.7); color: #f3ecdf;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}
.cshp-svc-gallery__caption {
  font-size: 13px; color: var(--cshp-ink-3);
  padding: 10px 0 0;
}
.cshp-svc-gallery__caption:empty { display: none; }
.cshp-svc-gallery__img-wrap { cursor: zoom-in; }

/* ========================================
   2a. SERVICIOS RELACIONADOS (карточки-хаб для категорий)
   ======================================== */
.cshp-svc-related { background: var(--cshp-surface); }
.cshp-svc-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.cshp-svc-related__card {
  display: flex;
  flex-direction: column;
  background: var(--cshp-surface-2);
  border: 1px solid var(--cshp-line);
  transition: border-color .2s ease;
}
.cshp-svc-related__card:hover { border-color: var(--cshp-line-2); }
.cshp-svc-related__img-wrap {
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cshp-bg-2);
}
.cshp-svc-related__img-wrap .cshp-img-cover {
  transition: transform .5s ease;
}
.cshp-svc-related__card:hover .cshp-img-cover { transform: scale(1.04); }
/* Заглушка обложки — там, где фото ещё нет (Láser CO2 и т.п.). Та же
   брендовая панель с логотипом, что в карточках центров на главной:
   ряд не разъезжается, а выдуманного «фото процедуры» не появляется. */
.cshp-svc-related__img-wrap--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cshp-bg-2) 0%, var(--cshp-surface) 55%, var(--cshp-bg-2) 100%);
}
.cshp-svc-related__img-wrap--ph img {
  width: 46%;
  max-width: 140px;
  height: auto;
  opacity: 0.14;
  transition: transform .5s ease, opacity .3s ease;
}
.cshp-svc-related__card:hover .cshp-svc-related__img-wrap--ph img { transform: scale(1.06); opacity: 0.2; }
@media (prefers-reduced-motion: reduce) {
  .cshp-svc-related__img-wrap--ph img { transition: none; }
  .cshp-svc-related__card:hover .cshp-svc-related__img-wrap--ph img { transform: none; }
}
.cshp-svc-related__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 24px 28px 28px;
}
.cshp-svc-related__title {
  flex: 1 0 auto;
  margin: 0 0 20px;
}
.cshp-svc-related__title a {
  color: var(--cshp-ink);
  text-decoration: none;
  transition: color .2s ease;
}
.cshp-svc-related__title a:hover { color: var(--cshp-accent-deep); }
.cshp-svc-related__items {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cshp-ink-3);
}
/* Whole-card link. Sits under the real anchors so the title stays focusable. */
.cshp-svc-related__card { position: relative; }
.cshp-svc-related__link { position: absolute; inset: 0; z-index: 1; }
.cshp-svc-related__img-wrap,
.cshp-svc-related__title a { position: relative; z-index: 2; }
.cshp-svc-related__btn {
  height: 44px; padding: 0 20px; font-size: 12px;
  background: var(--cshp-surface);
}

/* ========================================
   4a. LIGHTBOX (galería en pantalla completa)
   ======================================== */
.cshp-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,12,10,0.92);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 40px;
}
.cshp-lightbox.cshp-is-open { opacity: 1; visibility: visible; }
.cshp-lightbox__figure {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}
.cshp-lightbox__img {
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cshp-lightbox__caption {
  color: #f3ecdf; font-size: 13px; text-align: center;
  min-height: 1em;
}
.cshp-lightbox__close,
.cshp-lightbox__prev,
.cshp-lightbox__next {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.08);
  color: #f3ecdf;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px; line-height: 1;
  transition: background 0.2s ease;
  padding: 0;
}
.cshp-lightbox__close:hover,
.cshp-lightbox__prev:hover,
.cshp-lightbox__next:hover { background: rgba(255,255,255,0.2); }
.cshp-lightbox__close { top: -56px; right: 0; }
.cshp-lightbox__prev { top: 50%; left: -60px; transform: translateY(-50%); }
.cshp-lightbox__next { top: 50%; right: -60px; transform: translateY(-50%); }
@media (max-width: 820px) {
  .cshp-lightbox { padding: 20px; }
  .cshp-lightbox__close { top: -48px; right: 0; }
  .cshp-lightbox__prev { left: 4px; }
  .cshp-lightbox__next { right: 4px; }
}

/* ========================================
   4b. TESTIMONIALS (opiniones reales)
   ======================================== */
.cshp-svc-testimonials { background: var(--cshp-bg); }
.cshp-svc-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.cshp-svc-testimonials__card {
  margin: 0;
  background: var(--cshp-surface);
  border: 1px solid var(--cshp-line);
  padding: 32px;
}
.cshp-svc-testimonials__card blockquote {
  margin: 0 0 20px;
  font-family: var(--cshp-serif);
  font-size: 19px; line-height: 1.5;
  color: var(--cshp-ink);
}
.cshp-svc-testimonials__card figcaption {
  font-family: var(--cshp-mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--cshp-ink-3);
}
.cshp-svc-testimonials__card figcaption span { color: var(--cshp-ink-2); }

/* ========================================
   4d. ELIGE TU CENTRO (ubicaciones)
   ======================================== */
.cshp-svc-locations { background: var(--cshp-surface-2); }
/* Сетка и карточки центров переехали в header-footer.css: блок теперь общий
   с главной (cshp_render_locations()). Здесь остаётся только обёртка секции —
   заголовок «Elige tu centro» и полоса «Consulta gratis». */

/* ========================================
   CONSULTA GRATIS — полоса над списком центров
   ----------------------------------------
   Была карточкой в правой колонке рядом с заголовком: своя рамка, свой центр
   выравнивания, вертикальный список галочек — рядом с остальной страницей
   читалась как вставка из другого макета. Теперь горизонтальная полоса на всю
   ширину контейнера, разметка по эталону Homepage.html.
   ======================================== */
.cshp-consulta {
  display: grid;
  grid-template-columns: 300px 1fr auto;
  align-items: center;
  border-top: 1px solid var(--cshp-line);
  border-bottom: 1px solid var(--cshp-line);
  margin-bottom: 48px;
}
.cshp-consulta__price {
  padding: 30px 36px 30px 0;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
}
.cshp-consulta__badge {
  font-family: var(--cshp-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cshp-accent);
}
.cshp-consulta__badge--muted { color: var(--cshp-ink-3); }
.cshp-consulta__num {
  font-family: var(--cshp-serif);
  font-size: 62px; font-weight: 400; line-height: 0.9; letter-spacing: -0.03em;
  color: var(--cshp-ink);
}
.cshp-consulta__num sup { font-size: 26px; vertical-align: super; letter-spacing: 0; }
.cshp-consulta__sub {
  margin: 0; max-width: 20ch;
  font-size: 13px; line-height: 1.5; color: var(--cshp-ink-2);
}
.cshp-consulta__list {
  padding: 30px 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;
  align-content: center;
  border-left: 1px solid var(--cshp-line);
}
.cshp-consulta__item {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14px; color: var(--cshp-ink-2);
}
.cshp-consulta__item i {
  flex: none; font-style: normal; font-size: 12px; color: var(--cshp-accent);
}
.cshp-consulta__cta {
  padding: 30px 0 30px 36px;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center; align-items: flex-start;
}

/* ========================================
   RESPONSABLE SANITARIO (врач)
   ======================================== */
.cshp-svc-doctor { background: var(--cshp-surface); }
.cshp-svc-doctor__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.cshp-svc-doctor__visual {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  max-width: 420px;
}
.cshp-svc-doctor__copy .cshp-display { margin: 6px 0 16px; }
.cshp-svc-doctor__license {
  font-family: var(--cshp-mono);
  font-size: 13px; color: var(--cshp-ink-2);
  margin: 0 0 12px;
}
.cshp-svc-doctor__note {
  font-size: 13px; line-height: 1.6; color: var(--cshp-ink-3);
  margin: 0 0 12px;
}
.cshp-svc-doctor__trust {
  font-family: var(--cshp-serif);
  font-size: 20px; line-height: 1.4; color: var(--cshp-ink);
  margin: 20px 0 28px;
}

/* ========================================
   AVISO LEGAL (fallback simple, sin foto de médico)
   ======================================== */
.cshp-svc-legal {
  background: var(--cshp-bg);
  border-bottom: 1px solid var(--cshp-line);
  padding: 32px 0;
}
.cshp-svc-legal .cshp-container { max-width: 900px; }
.cshp-svc-legal__note {
  margin: 0;
  font-size: 12px; line-height: 1.6;
  color: var(--cshp-ink-3);
}

/* ========================================
   4b. ARTICLE (long-form editorial)
   ======================================== */
.cshp-svc-article { background: var(--cshp-surface-2); }

.cshp-svc-article__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cshp-svc-article__inner h3 {
  font-family: var(--cshp-sans);
  font-weight: 500; font-size: 22px; letter-spacing: -0.01em;
  color: var(--cshp-ink);
  margin: 8px 0 0;
}
/* Между абзацем и следующим подзаголовком нужен воздух: у .cshp-svc-article__inner
   стоит flex gap 28px, но для смены темы этого мало. Только после абзаца —
   первый заголовок в блоке лишнего отступа не получает. */
.cshp-svc-article__inner p + h3,
.cshp-svc-article__inner ul + h3 { margin-top: 20px; }
.cshp-svc-article__inner a {
  color: var(--cshp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cshp-svc-article__inner a:hover { color: var(--cshp-accent-deep); }
/* Абзацы шли вплотную: margin: 0 стоял ради line-clamp, чтобы схлопнутый блок
   обрезался ровно по строкам. Разделяем их padding'ом — он, в отличие от
   margin, не схлопывается с соседями и не сдвигает границу обрезки. */
.cshp-svc-article__inner p {
  color: var(--cshp-ink-2);
  font-size: 16px; line-height: 1.75;
  margin: 0;
  padding-bottom: 10px;
}
.cshp-svc-article__inner p:last-child { padding-bottom: 0; }
.cshp-svc-article__inner strong,
.cshp-svc-article__inner b { color: var(--cshp-ink); font-weight: 600; }
/* Подзаголовок статьи. В редакторе набран как <p><b>Текст</b></p>, в <h3> его
   поднимает service.php — селектором такой абзац от обычного с жирным внутри
   не отличить, см. комментарий там. Своего оформления класс намеренно не имеет:
   вид берётся из .cshp-svc-article__inner h3 ниже, чтобы в одной статье не
   оказалось двух разных заголовков третьего уровня. Класс оставлен зацепкой. */
.cshp-svc-article__inner ul {
  margin: 0; padding-left: 22px;
  color: var(--cshp-ink-2);
  font-size: 16px; line-height: 1.85;
}
.cshp-svc-article__inner li { margin: 0 0 6px; }
.cshp-svc-article__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cshp-svc-article__images img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .cshp-svc-article__images { grid-template-columns: 1fr; }
}

/* ========================================
   5. FAQ
   ======================================== */
.cshp-svc-faq { background: var(--cshp-bg); }

.cshp-svc-faq__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}
.cshp-svc-faq__head .cshp-display { margin-top: 4px; }

.cshp-svc-faq__list {
  border-top: 1px solid var(--cshp-line-2);
}
.cshp-svc-faq__item {
  border-bottom: 1px solid var(--cshp-line-2);
}
.cshp-svc-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-family: var(--cshp-sans);
  font-size: 16px; font-weight: 500;
  color: var(--cshp-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cshp-svc-faq__q::-webkit-details-marker { display: none; }
.cshp-svc-faq__q::marker { display: none; content: ''; }
.cshp-svc-faq__q::after {
  content: "";
  width: 12px; height: 12px; flex-shrink: 0; margin-left: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%231a1612' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  transition: transform .25s ease;
}
.cshp-svc-faq__item.is-open .cshp-svc-faq__q::after {
  transform: rotate(180deg);
}
.cshp-svc-faq__a {
  font-size: 15px; line-height: 1.65;
  color: var(--cshp-ink-2);
  padding: 0 0 22px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* ========================================
   6. CTA
   ----------------------------------------
   Блок «¿Lista para el cambio?» переехал в header-footer.css: он выводится
   из footer.php на всех шаблонах, а service.css грузится только на страницах
   услуг. Здесь не осталось ничего.
   ======================================== */

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1100px) {
  /* Same step-down as homepage.css: tablet kept the 120px desktop padding. */
  .cshp-service .cshp-block { padding: 72px 0; }
  .cshp-svc-hero__grid { grid-template-columns: 1fr; }
  .cshp-svc-hero__copy {
    border-right: 0; border-bottom: 1px solid var(--cshp-line);
    max-width: none; margin: 0; padding: 50px var(--cshp-gutter);
  }
  .cshp-svc-hero__visual { min-height: 46vh; }
  .cshp-service .cshp-section__head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cshp-svc-about__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cshp-svc-about__astx { margin: 0 auto; max-width: 380px; }
  .cshp-svc-faq__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cshp-svc-process__head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .cshp-svc-process__grid { grid-template-columns: 1fr; gap: 20px; }
  .cshp-service .cshp-svc-process__step-title { min-height: 0; }
  .cshp-svc-benefits__list { grid-template-columns: 1fr; }
  .cshp-svc-related__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .cshp-svc-doctor__grid { grid-template-columns: 1fr; gap: 32px; }
  .cshp-consulta { grid-template-columns: 1fr; }
  .cshp-consulta__price { padding: 26px 0 0; }
  .cshp-consulta__list { border-left: 0; padding: 22px 0; }
  .cshp-consulta__cta { padding: 0 0 26px; }
  .cshp-svc-doctor__visual { max-width: 220px; }
}

@media (max-width: 640px) {
  .cshp-consulta__list { grid-template-columns: 1fr; }
  .cshp-service .cshp-block { padding: 40px 0; }
  .cshp-svc-hero__visual { min-height: 260px; }
  .cshp-svc-about__stats { flex-direction: column; gap: 24px; }
  /* Соты существуют ради пустой правой колонки. На телефоне колонок нет —
     остаётся просто круг во весь экран, который отодвигает содержимое вниз. */
  .cshp-svc-about__astx { display: none; }
  .cshp-svc-gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }
  .cshp-svc-related__grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ========================================
   BRANCH / CATEGORY HUB PAGES
   Nine 4:3 cards cost 6+ mobile screens. On hubs the cards go horizontal
   with a small square thumb and a sub-service list under the title.
   ======================================== */
.cshp-svc-salon {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--cshp-surface);
  border: 1px solid var(--cshp-line);
}
.cshp-svc-salon__utp {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cshp-svc-salon__utp li {
  position: relative; padding-left: 20px;
  font-size: 14px; line-height: 1.5; color: var(--cshp-ink-2);
}
.cshp-svc-salon__utp li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; background: var(--cshp-accent);
}
.cshp-svc-salon__facts {
  margin: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  font-size: 13px;
}
.cshp-svc-salon__facts dt {
  font-family: var(--cshp-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cshp-ink-3); padding-top: 2px;
}
.cshp-svc-salon__facts dd { margin: 0; color: var(--cshp-ink-2); }

@media (max-width: 1100px) {
  /* Компактный герой (без фото) — одна колонка */
  .cshp-svc-hero--compact .cshp-svc-hero__grid { grid-template-columns: 1fr; }
  .cshp-svc-hero--compact .cshp-svc-hero__copy { padding-bottom: 40px; }

  .cshp-svc-related__card {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
  }
  .cshp-svc-related__img-wrap {
    flex: 0 0 88px;
    width: 88px;
    aspect-ratio: 1 / 1;
    align-self: center;
    margin-left: 12px;
  }
  .cshp-svc-related__body {
    padding: 14px 16px 14px 0;
    justify-content: center;
    gap: 4px;
  }
  .cshp-svc-related__title {
    flex: 0 0 auto;
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
  }
}

/* ========================================
   2a-bis. БЛОКИ УСЛУГ С ЯКОРЯМИ
   Для страниц-сборников (Medicina Estética Avanzada): липкая полоса-навигация
   + по секции на процедуру, у каждой свой якорь и своя кнопка WhatsApp.
   ======================================== */

/* Липкая навигация по якорям.
   top синхронизирован с высотой шапки; z-index ниже мобильной панели темы
   (1100) и наших шторок (1101/1102), чтобы не перекрывать их. */
.cshp-svc-anchors {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--cshp-surface);
  border-top: 1px solid var(--cshp-line);
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-svc-anchors__list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cshp-svc-anchors__list::-webkit-scrollbar { display: none; }
.cshp-svc-anchors__list li { flex: 0 0 auto; }
.cshp-svc-anchors__list a {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--cshp-line);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--cshp-ink-2);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.cshp-svc-anchors__list a:hover,
.cshp-svc-anchors__list a:focus-visible {
  color: var(--cshp-accent-deep);
  border-color: var(--cshp-accent);
  background: var(--cshp-bg);
}

/* Сама секция процедуры */
.cshp-svc-sblock {
  /* отступ под липкую полосу, чтобы якорь не прятался под ней */
  scroll-margin-top: 84px;
}
.cshp-svc-sblock:nth-of-type(even) { background: var(--cshp-bg); }

.cshp-svc-sblock__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.cshp-svc-sblock__grid--single { grid-template-columns: minmax(0, 1fr); }
.cshp-svc-sblock__grid--single .cshp-svc-sblock__copy { max-width: 760px; }

/* Чётные блоки — картинка справа, чтобы лента не была монотонной */
.cshp-svc-sblock--flip .cshp-svc-sblock__visual { order: 2; }

.cshp-svc-sblock__visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cshp-bg-2);
}
.cshp-svc-sblock__copy .cshp-eyebrow { display: block; margin-bottom: 10px; }
.cshp-svc-sblock__copy .cshp-h2 { margin: 0 0 16px; }
/* Селектор квалифицирован `.cshp-service`, иначе `.cshp-service .cshp-body-lg`
   (0,2,0) обнуляет отступ и лид прилипает к заголовкам колонок. */
.cshp-service .cshp-svc-sblock__lead { margin: 0 0 28px; color: var(--cshp-ink-2); }

.cshp-svc-sblock__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
.cshp-svc-sblock__col-title {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cshp-ink-3);
  margin: 0 0 12px;
}
.cshp-svc-sblock__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cshp-svc-sblock__col li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cshp-ink-2);
}
.cshp-svc-sblock__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cshp-accent);
}

@media (max-width: 1100px) {
  .cshp-svc-sblock__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* На узких экранах картинка всегда сверху — порядок из --flip сбрасываем */
  .cshp-svc-sblock--flip .cshp-svc-sblock__visual { order: 0; }
  .cshp-svc-sblock__visual { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .cshp-svc-anchors__list { padding: 10px 0; gap: 8px; }
  .cshp-svc-anchors__list a { padding: 7px 13px; font-size: 12px; }
  .cshp-svc-sblock { scroll-margin-top: 70px; }
  .cshp-svc-sblock__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 26px;
  }
  .cshp-svc-sblock__visual { aspect-ratio: 3 / 2; }
  .cshp-svc-sblock__cta { width: 100%; text-align: center; }
}

/* ========================================
   МОБИЛЬНЫЕ РАЗМЕРЫ ЗАГОЛОВКОВ
   Базовый clamp у H1 имеет минимум 48px — он рассчитывался на короткие
   заголовки. После возврата длинных SEO-заголовков (2026-08) они стали
   занимать 4–5 строк и до 35% первого экрана на телефоне. Здесь задаём
   отдельную шкалу для узких экранов.
   Селекторы квалифицированы `.cshp-service`, иначе базовые правила
   (0,2,0) перебьют одиночный класс.
   ======================================== */
@media (max-width: 640px) {
  .cshp-service .cshp-h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.08; }
  .cshp-service .cshp-h2 { font-size: clamp(23px, 6.4vw, 28px); line-height: 1.12; }
  .cshp-service .cshp-h3 { font-size: clamp(19px, 5vw, 22px); margin-bottom: 16px; }
}

@media (max-width: 380px) {
  .cshp-service .cshp-h1 { font-size: 26px; }
  .cshp-service .cshp-h2 { font-size: 21px; }
}

/* ========================================
   БЛОКИ ПРОЦЕДУР — РЕЖИМ «КАРТОЧКИ»
   Альтернатива полноширинным .cshp-svc-sblock: сетка обложек, подробности
   спрятаны под нативный <details>. JS здесь нет намеренно — CookieYes
   вырезает наши скрипты до согласия на cookie.
   Правила лежат в конце файла осознанно: медиазапросы 1100px/640px выше
   по файлу переопределили бы grid-template-columns.
   ======================================== */
.cshp-svc-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  /* stretch вернулся: раньше он был вреден, потому что раскрытие <details>
     вытягивало карточку и весь ряд вместе с ней. Теперь панель ложится поверх
     карточки и из потока не растёт — ряды можно выравнивать по высоте.
     Заодно ушёл побочный эффект: карточка больше не «худеет» на высоту
     свёрнутого <details>, когда её раскрывают. */
  align-items: stretch;
}

.cshp-svc-card {
  display: flex;
  flex-direction: column;
  /* якорь для раскрытой панели «Más información» — она ложится поверх карточки */
  position: relative;
  background: var(--cshp-surface);
  border: 1px solid var(--cshp-line);
  overflow: hidden;
  /* отступ под липкую полосу якорей — как у .cshp-svc-sblock */
  scroll-margin-top: 84px;
}
/* Переход по ссылке из рекламы (…/#anchor) должен быть заметен */
.cshp-svc-card:target { border-color: var(--cshp-accent); }

.cshp-svc-card__visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cshp-bg-2);
}
/* Та же подача, что у заглушек героя и карточек филиалов. */
.cshp-svc-card__visual--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cshp-bg-2) 0%, var(--cshp-surface) 55%, var(--cshp-bg-2) 100%);
}
.cshp-svc-card__visual--ph img { width: 48%; max-width: 170px; height: auto; opacity: 0.14; }

.cshp-svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
/* Селектор квалифицирован `.cshp-service` не для красоты: у заголовка есть
   и класс .cshp-display, а базовое `.cshp-service .cshp-display { margin: 0 }`
   со специфичностью (0,2,0) перебивало одиночный класс — зазор до надзаголовка
   был ровно 0, хотя в правиле стояло 6px. */
.cshp-service .cshp-svc-card__title { font-size: 21px; line-height: 1.2; margin: 0 0 10px; }
.cshp-service .cshp-svc-card__eyebrow { display: block; margin: 0 0 12px; }
.cshp-service .cshp-svc-card__lead {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cshp-ink-2);
}

/* ── выпадашка ── */
.cshp-svc-card__more { margin: 0 0 20px; border-top: 1px solid var(--cshp-line); }
.cshp-svc-card__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0 0;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cshp-ink-2);
  list-style: none;
}
.cshp-svc-card__more summary::-webkit-details-marker { display: none; }
.cshp-svc-card__more summary:hover { color: var(--cshp-accent); }
.cshp-svc-card__more summary:focus-visible {
  outline: 2px solid var(--cshp-accent);
  outline-offset: 3px;
}
.cshp-svc-card__more summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.cshp-svc-card__more[open] summary::after { transform: rotate(-135deg) translateY(0); }

.cshp-svc-card__more-body { padding-top: 14px; }

/* ── раскрытая панель накрывает карточку целиком ──────────────────────────
   Раньше <details> раскрывался вниз и вытягивал карточку: соседи по ряду
   оставались короткими, сетка прыгала, а до кнопки внизу приходилось
   пролистывать пол-экрана. Теперь панель ложится поверх своей же карточки
   на всю её ширину и высоту, а длинный текст скроллится внутри.
   Позиционируем сам <details>, а не .__more-body: так <summary> остаётся
   в потоке панели и работает шапкой с крестиком-стрелкой, то есть кнопкой
   закрытия. JS не нужен — CookieYes всё равно вырезал бы его до согласия
   на куки. Карточка с overflow: hidden обрезает панель по своей рамке.

   ⚠ Только от 641px. На телефоне карточки идут в одну колонку: ряда, который
   надо беречь от скачков, там нет, зато появляется скролл внутри скролла —
   на тач-устройстве это заметно хуже обычного раскрытия вниз. Плюс из потока
   уходит свёрнутый <details>, и одиночная карточка «худеет» на его высоту:
   в сетке это гасит align-items: stretch, в одну колонку гасить нечем. */
@media (min-width: 641px) {
  .cshp-svc-card__more[open] {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
    background: var(--cshp-surface);
  }
  .cshp-svc-card__more[open] > summary {
    flex: none;
    padding: 16px 22px;
    border-bottom: 1px solid var(--cshp-line);
    color: var(--cshp-ink);
  }
  /* Подпись меняется на «Cerrar»: над раскрытой панелью «Más información»
     читается как обещание чего-то ещё. */
  .cshp-svc-card__more[open] > summary > span { display: none; }
  .cshp-svc-card__more[open] > summary::before { content: "Cerrar"; }
  .cshp-svc-card__more[open] .cshp-svc-card__more-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 22px 22px;
  }
}

.cshp-service .cshp-svc-card__more-body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cshp-ink-2);
}
.cshp-svc-card__col-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cshp-ink-3);
  margin: 16px 0 10px;
}
.cshp-svc-card__more-body > *:first-child { margin-top: 0; }
.cshp-svc-card__more-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cshp-svc-card__more-body li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cshp-ink-2);
}
.cshp-svc-card__more-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cshp-accent);
}

/* Кнопка прижата к низу — карточки в ряду разной высоты, CTA должны совпасть */
.cshp-svc-card__cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .cshp-svc-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 640px) {
  .cshp-svc-cards__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cshp-svc-card { scroll-margin-top: 70px; }
  .cshp-svc-card__visual { aspect-ratio: 3 / 2; }
  .cshp-svc-card__body { padding: 18px 18px 20px; }
  .cshp-svc-card__title { font-size: 19px; }
}


/* ── Пояснительные иллюстрации секций (2026-08-31) ─────────────────────────
   Появились, потому что галерея «Nuestro trabajo» печатает плашки
   «Antes/Después», то есть заявляет результат пациента. Схема показаний
   и таймлайн восстановления — это объяснение, а не результат, и должны
   стоять рядом со своим текстом. Правила намеренно в конце файла:
   медиазапросы 1100/640 выше по файлу перебили бы grid-template-columns
   (та же история, что с каруселями и карточками процедур). */
.cshp-svc-process__figure {
  margin: 48px 0 0;
  border: 1px solid var(--cshp-line);
  background: var(--cshp-surface);
}
.cshp-svc-process__figure img { display: block; width: 100%; height: auto; }
.cshp-svc-process__figure figcaption {
  padding: 14px 20px;
  border-top: 1px solid var(--cshp-line);
  font-size: 13px; line-height: 1.5;
  color: var(--cshp-ink-3);
}

/* Без картинки .__body — обычный поток, список ведёт себя как раньше. */
.cshp-svc-benefits__body { display: block; }
.cshp-svc-benefits--split .cshp-svc-benefits__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
}
.cshp-svc-benefits__figure {
  margin: 0;
  border: 1px solid var(--cshp-line);
  background: var(--cshp-surface);
}
.cshp-svc-benefits__figure img { display: block; width: 100%; height: auto; }
.cshp-svc-benefits__figure figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--cshp-line);
  font-size: 13px; line-height: 1.5;
  color: var(--cshp-ink-3);
}

@media (max-width: 1100px) {
  .cshp-svc-benefits--split .cshp-svc-benefits__body { grid-template-columns: 1fr; gap: 32px; }
  .cshp-svc-process__figure { margin-top: 36px; }
}
@media (max-width: 640px) {
  .cshp-svc-process__figure { margin-top: 28px; }
  .cshp-svc-process__figure figcaption,
  .cshp-svc-benefits__figure figcaption { padding: 12px 14px; font-size: 12px; }
}