/* ==== /menu — Tratamientos y precios ====
   Se carga después de styles.css (tokens --ivory-*, --cacao-*, --gold-*, pie .lp-footer).
   Todo va bajo .mn-page / .mn-* para no tocar el resto del sitio.
   Contraste medido sobre marfil #fbf8f2: texto 16.4:1, --mn-muted 5.3:1, --mn-copper-ink 5.5:1;
   el cobre (#b47c3c) solo como relleno o borde, con texto cacao encima (4.9:1).
   letter-spacing 0 en toda la página: es una lista para leer rápido en el celular. */

@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-500.woff2) format("woff2"); }

.mn-page {
  --mn-bg: var(--ivory-50);
  --mn-surface: var(--white-warm);
  --mn-ink: var(--cacao-950);
  --mn-ink-2: var(--cacao-800);
  --mn-muted: var(--stone-600);
  --mn-copper: var(--gold-500);
  --mn-copper-ink: var(--gold-600);
  --mn-blush: rgb(var(--aura-1) / .28);
  --mn-line: rgba(36, 23, 18, .1);
  --mn-line-strong: rgba(36, 23, 18, .2);
  --mn-gutter: 16px;
  /* Alto de la barra de categorías fija (móvil/tableta) y de la barra inferior: los usan
     scroll-margin y el relleno del pie para que nada quede tapado. */
  --mn-sticky: 62px;
  --mn-dock: 68px;
  background: var(--mn-bg);
  color: var(--mn-ink);
  font-family: Poppins, Arial, sans-serif;
  letter-spacing: 0;
}

.mn-page *, .mn-page h1, .mn-page h2, .mn-page h3 { letter-spacing: 0; }
/* El buscador oculta renglones, grupos y categorías con el atributo hidden; varias de esas
   cajas son grid o flex, que le ganarían al display:none del navegador. */
.mn-page [hidden] { display: none !important; }
.mn-page [tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.mn-shell { width: calc(100% - 2 * var(--mn-gutter)); max-width: 1240px; margin-inline: auto; }
@media (min-width: 640px) { .mn-page { --mn-gutter: 20px; } }

/* Sin JavaScript no hay buscador ni botón de compartir: el catálogo, las anclas y los
   <details> siguen funcionando solos. */
html:not(.has-js) .mn-search,
html:not(.has-js) .mn-filter,
html:not(.has-js) .mn-cats-search,
html:not(.has-js) [data-compartir] { display: none; }

/* ---- Franja de marca ---- */
.mn-band { background: var(--cacao-950); color: var(--ivory-50); }
.mn-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.mn-brand { display: inline-flex; align-items: center; min-height: 44px; }
.mn-brand img { width: 148px; height: auto; outline: 0; }
.mn-band-nav { display: flex; align-items: center; gap: 2px; }
.mn-band-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: rgba(255, 253, 249, .84); font-size: .84rem; text-decoration: none; text-underline-offset: 4px; }
.mn-band-nav a:hover { color: var(--ivory-50); text-decoration: underline; }
@media (max-width: 479px) { .mn-band-nav a + a { display: none; } }

/* ---- Encabezado compacto ---- */
.mn-intro { padding-block: 14px 2px; }
.mn-eyebrow { margin: 0 0 4px; color: var(--mn-copper-ink); font-size: .8rem; font-weight: 500; }
.mn-intro h1 { margin: 0; color: var(--mn-ink); font-size: clamp(1.5rem, 6.4vw, 2.9rem); font-weight: 500; line-height: 1.12; }
.mn-lede { max-width: 64ch; margin: 4px 0 0; color: var(--mn-muted); font-size: .84rem; line-height: 1.45; }
.mn-lede b { color: var(--mn-ink); font-weight: 500; }

/* ---- Buscador, categorías y barra inferior ----
   En móvil .mn-side desaparece como caja (display: contents) para que la barra de categorías
   sea hija directa de .mn-layout y pueda quedarse fija durante todo el catálogo. */
.mn-layout { padding-bottom: 56px; }
.mn-side { display: contents; }

.mn-search { position: relative; margin-top: 10px; }
.mn-search input { width: 100%; min-height: 48px; padding: 0 52px 0 46px; border: 1px solid var(--mn-line-strong); border-radius: 999px; background: var(--mn-surface); color: var(--mn-ink); font-size: 1rem; appearance: none; }
.mn-search input::placeholder { color: var(--mn-muted); opacity: 1; }
.mn-search input::-webkit-search-cancel-button { display: none; }
.mn-search input:focus-visible { outline: 3px solid var(--mn-ink); outline-offset: 2px; }
.mn-search-icon { position: absolute; top: 50%; left: 16px; display: flex; color: var(--mn-muted); pointer-events: none; transform: translateY(-50%); }
.mn-search-clear { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mn-ink-2); cursor: pointer; transform: translateY(-50%); }
.mn-search-clear:hover { background: var(--mn-blush); }

.mn-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.mn-status { margin: 0; padding-inline: 4px; color: var(--mn-ink-2); font-size: .84rem; }
.mn-status:not(:empty) { padding-block: 8px 0; }
.mn-link-btn { min-height: 44px; margin-top: 4px; padding: 0 4px; border: 0; background: none; color: var(--mn-ink); font-size: .84rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.mn-cats { position: sticky; z-index: 10; top: 0; display: flex; gap: 8px; margin: 6px calc(-1 * var(--mn-gutter)) 0; padding: 8px var(--mn-gutter); overflow-x: auto; border-bottom: 1px solid var(--mn-line); background: rgba(251, 248, 242, .97); scroll-padding-inline: var(--mn-gutter); scrollbar-width: none; }
.mn-cats::-webkit-scrollbar { display: none; }
.mn-chip,
.mn-cats-search { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1px solid var(--mn-line-strong); border-radius: 999px; background: var(--mn-surface); color: var(--mn-ink-2); font-size: .86rem; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; }
.mn-chip { padding: 0 16px; }
.mn-cats-search { justify-content: center; width: 44px; padding: 0; }
.mn-chip:hover, .mn-cats-search:hover { background: var(--mn-blush); }
.mn-chip[aria-current="true"] { border-color: var(--mn-ink); background: var(--mn-ink); color: var(--ivory-50); }
.mn-chip-count { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--ivory-100); color: var(--mn-ink); font-size: .74rem; text-align: center; }
.mn-chip.is-empty { border-style: dashed; }

.mn-dock { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px var(--mn-gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mn-line); background: rgba(255, 253, 249, .98); box-shadow: 0 -10px 24px rgba(36, 23, 18, .07); }
.mn-dock-note { display: none; }
.mn-dock .mn-btn { padding: 0 16px; font-size: .88rem; }
@media (max-width: 419px) { .mn-dock .mn-btn--primary svg { display: none; } }

/* ---- Botones ---- */
.mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out; }
.mn-btn svg { flex: none; }
.mn-btn--primary { background: var(--mn-ink); color: var(--ivory-50); }
.mn-btn--primary:hover { background: var(--mn-ink-2); }
.mn-btn--ghost { border-color: var(--mn-line); background: var(--mn-surface); color: var(--mn-ink); }
.mn-btn--ghost:hover { background: var(--mn-blush); }

/* ---- Catálogo ---- */
.mn-list:focus { outline: none; }
.mn-cat { padding-top: 16px; scroll-margin-top: calc(var(--mn-sticky) + 4px); }
.mn-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--mn-ink); }
.mn-cat h2 { margin: 0; color: var(--mn-ink); font-size: clamp(1.3rem, 4.4vw, 1.7rem); font-weight: 500; line-height: 1.2; }
.mn-cat-note { max-width: 62ch; margin: 8px 0 0; color: var(--mn-muted); font-size: .86rem; line-height: 1.5; }

.mn-group { margin-top: 12px; }
.mn-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.mn-group h3 { margin: 0; color: var(--mn-copper-ink); font-size: .95rem; font-weight: 500; line-height: 1.3; }
.mn-group-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mn-ink-2); font-size: .8rem; text-underline-offset: 4px; }
.mn-group-link:hover { color: var(--mn-ink); }
.mn-group-note { max-width: 62ch; margin: 2px 0 6px; color: var(--mn-muted); font-size: .84rem; line-height: 1.5; }

.mn-items { margin: 4px 0 0; padding: 0; border-top: 1px solid var(--mn-line); list-style: none; }
.mn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 12px 0 4px; border-bottom: 1px solid var(--mn-line); scroll-margin-top: calc(var(--mn-sticky) + 12px); }
.mn-item:target, .mn-item.is-destino { animation: mn-destino 2.6s ease-out 1; }
@keyframes mn-destino { 0%, 55% { background: var(--mn-blush); box-shadow: -10px 0 0 var(--mn-blush), 10px 0 0 var(--mn-blush); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  .mn-item:target, .mn-item.is-destino { animation: none; background: var(--mn-blush); box-shadow: -10px 0 0 var(--mn-blush), 10px 0 0 var(--mn-blush); }
}
.mn-item-text { min-width: 0; }
.mn-item-name { display: block; font-size: 1rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.mn-item-scope { display: block; margin-top: 1px; color: var(--mn-muted); font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.mn-item-price { grid-row: 1; grid-column: 2; margin: 0; font-variant-numeric: tabular-nums; line-height: 1.2; text-align: right; white-space: nowrap; }
.mn-desde, .mn-per { display: block; color: var(--mn-muted); font-size: .74rem; }
.mn-amount { font-size: 1.12rem; font-weight: 500; }
.mn-cur { color: var(--mn-muted); font-size: .72rem; text-decoration: none; }

.mn-item-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; align-items: center; gap: 2px 6px; margin: 2px 0 0 -10px; }
.mn-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--mn-ink); font: inherit; font-size: .86rem; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; }
.mn-act:hover { background: var(--mn-blush); }
.mn-act svg { flex: none; }
.mn-act--primary { margin-left: 10px; padding: 0 16px; background: var(--mn-ink); color: var(--ivory-50); }
.mn-act--primary:hover { background: var(--mn-ink-2); }
.mn-act--icon { justify-content: center; width: 44px; padding: 0; color: var(--mn-muted); }
.mn-cat-head .mn-act--icon { flex: none; margin-right: -10px; }

/* Paquetes de depilación: <details> nativo, funciona sin JavaScript. */
.mn-packs { grid-column: 1 / -1; margin: 0 0 6px; }
.mn-packs summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mn-ink-2); font-size: .86rem; font-weight: 500; list-style: none; cursor: pointer; }
.mn-packs summary::-webkit-details-marker { display: none; }
.mn-packs summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease-out; }
.mn-packs[open] summary::before { transform: rotate(45deg); }
.mn-packs-hint { color: var(--mn-muted); font-weight: 400; }
.mn-packs summary:hover { color: var(--mn-ink); }
.mn-packs-body { overflow-x: auto; padding: 2px 0 8px; }
.mn-pack-table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.mn-pack-table th, .mn-pack-table td { padding: 8px 6px; border-bottom: 1px solid var(--mn-line); text-align: right; vertical-align: top; }
.mn-pack-table th:first-child { padding-left: 0; text-align: left; }
.mn-pack-table tr > :last-child { padding-right: 0; }
.mn-pack-table thead th { color: var(--mn-muted); font-size: .76rem; font-weight: 400; }
.mn-pack-table tbody th { font-weight: 500; }
.mn-pack-table small { display: block; color: var(--mn-muted); font-size: .76rem; font-weight: 400; }
.mn-pack-note { max-width: 62ch; margin: 8px 0 2px; color: var(--mn-muted); font-size: .8rem; line-height: 1.5; }
.mn-packs-body > .mn-act { margin-left: -10px; }

/* Sin resultados */
.mn-empty { margin-top: 22px; padding: 18px; border: 1px dashed var(--mn-line-strong); border-radius: 16px; background: var(--mn-surface); }
.mn-empty p { margin: 0; font-size: .92rem; line-height: 1.5; }
.mn-empty strong { font-weight: 500; }
.mn-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- Anticipos y pagos ---- */
.mn-pay-list { margin: 12px 0 0; }
.mn-pay-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--mn-line); }
.mn-pay-list dt { font-weight: 500; }
.mn-pay-list dd { margin: 0; color: var(--mn-ink-2); text-align: right; }
.mn-pay-list b { color: var(--mn-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.mn-pay-sub { margin: 22px 0 0; color: var(--mn-copper-ink); font-size: .95rem; font-weight: 500; }
.mn-rules { max-width: 66ch; margin: 8px 0 0; padding-left: 20px; color: var(--mn-ink-2); font-size: .88rem; line-height: 1.55; }
.mn-rules li + li { margin-top: 4px; }
.mn-pay-cta { display: grid; gap: 12px; justify-items: start; margin-top: 22px; padding: 18px; border-radius: 16px; background: var(--mn-blush); }
.mn-pay-cta p { max-width: 56ch; margin: 0; color: var(--mn-ink); font-size: .9rem; line-height: 1.5; }

.mn-notes { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--mn-line); }
.mn-notes h2 { margin: 0; font-size: 1rem; font-weight: 500; }
.mn-notes ul { max-width: 70ch; margin: 8px 0 0; padding-left: 20px; color: var(--mn-muted); font-size: .84rem; line-height: 1.55; }

/* ---- Aviso breve (compartir / copiar) ---- */
.mn-toast { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--mn-dock) + 12px + env(safe-area-inset-bottom)); max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 14px; background: var(--mn-ink); color: var(--ivory-50); font-size: .86rem; line-height: 1.4; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.mn-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mn-toast:empty { padding: 0; }

/* ---- Pie (el de todo el sitio, en versión de dos columnas) ---- */
.mn-page footer.lp-footer .lp-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 820px; }
.mn-page footer.lp-footer .lp-footer-legal > div { padding: 0 0 32px; }
.mn-footer { padding-bottom: calc(var(--mn-dock) + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  .mn-page footer.lp-footer .lp-footer-grid { grid-template-columns: 1fr; }
}

/* ---- Tableta y escritorio: renglón compacto (nombre · acciones · precio a la derecha) ---- */
@media (min-width: 768px) {
  .mn-item { grid-template-columns: minmax(0, 1fr) auto minmax(118px, auto); align-items: center; padding: 10px 0; }
  .mn-item-actions { grid-row: 1; grid-column: 2; justify-content: flex-end; margin: 0; }
  .mn-item-price { grid-column: 3; }
  .mn-packs { margin-top: 2px; }
  .mn-pack-table { max-width: 580px; }
  .mn-pack-note { max-width: 580px; }
}

/* ---- Escritorio: barra lateral fija con buscador, categorías y acciones ---- */
@media (min-width: 1024px) {
  .mn-brand img { width: 170px; }
  .mn-intro { padding-block: 34px 10px; }
  .mn-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 18px; }
  .mn-search input { padding-right: 44px; }
  .mn-side { position: sticky; top: 20px; display: block; max-height: calc(100vh - 40px); overflow-y: auto; padding: 2px 4px 4px 2px; }
  .mn-search { margin-top: 0; }
  .mn-cats { position: static; flex-direction: column; gap: 2px; margin: 14px 0 0; padding: 0; overflow: visible; border: 0; background: none; }
  .mn-cats-search { display: none; }
  .mn-chip { justify-content: space-between; border-color: transparent; border-radius: 12px; background: transparent; }
  .mn-dock { position: static; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; padding: 18px; border: 1px solid var(--mn-line); border-radius: 18px; background: var(--mn-surface); box-shadow: none; }
  .mn-dock-note { display: block; margin: 0 0 4px; color: var(--mn-ink-2); font-size: .84rem; line-height: 1.5; }
  .mn-dock-note b { color: var(--mn-ink); font-weight: 500; }
  .mn-list { max-width: 820px; }
  .mn-cat { padding-top: 0; margin-bottom: 44px; scroll-margin-top: 24px; }
  .mn-item { scroll-margin-top: 24px; }
  .mn-toast { bottom: 28px; }
  .mn-footer { padding-bottom: 0; }
}

@media print {
  .mn-band-nav, .mn-search, .mn-filter, .mn-cats, .mn-dock, .mn-item-actions, .mn-pay-cta, [data-compartir], .mn-toast, .lp-footer-social { display: none !important; }
  .mn-page { background: #fff; }
  .mn-band { background: #fff; color: #000; }
  .mn-footer { padding-bottom: 0; }
}