/* =========================================================================
   CLÍNICA MÉDICA JARDINES — Sección de tarifas
   Todo el CSS está dentro de .cmj-precios para no interferir con tu web.
   Todas las variables llevan el prefijo --cmj- por el mismo motivo.
   ========================================================================= */

.cmj-precios,
.cmj-precios *,
.cmj-precios *::before,
.cmj-precios *::after { box-sizing: border-box; }

/* Necesario porque varios controles fijan display: el atributo hidden debe ganar */
.cmj-precios [hidden] { display: none !important; }

/* ---------- BLINDAJE FRENTE AL TEMA DE LA WEB ---------------------------
   WordPress, Elementor y la mayoría de temas imponen estilos globales a
   listas, botones, enlaces, párrafos y campos. Esto los neutraliza SOLO
   dentro del componente.

   Va con :where() a propósito: así tiene especificidad cero y cualquier
   regla propia de este archivo, aunque venga después, sigue mandando.
   ----------------------------------------------------------------------- */
.cmj-precios :where(ul, ol, li) {
  margin: 0; padding: 0; list-style: none; text-indent: 0;
}
.cmj-precios :where(ul, ol, li)::before,
.cmj-precios :where(ul, ol, li)::after { content: none; }
.cmj-precios :where(p, h1, h2, h3, h4, h5, h6) {
  margin: 0; padding: 0;
  font-family: inherit; font-weight: inherit;
  text-transform: none; letter-spacing: normal;
}
.cmj-precios :where(button), .cmj-modal :where(button) {
  font: inherit; letter-spacing: normal; text-transform: none;
  min-height: 0; box-shadow: none; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.cmj-precios :where(a) {
  text-decoration: none; box-shadow: none;
  font-family: inherit; letter-spacing: normal;
}
.cmj-precios :where(input, select, textarea) {
  margin: 0; min-height: 0; box-shadow: none; max-width: none;
  font: inherit; letter-spacing: normal; text-transform: none;
  border-radius: 0;
}
.cmj-precios :where(svg) { display: block; max-width: none; height: auto; }
.cmj-precios :where(mark) { padding: 0; }
.cmj-precios :where(code) { font-size: inherit; }


/* ---------- PALETA CLARA (base) ---------------------------------------- */
.cmj-precios {
  --cmj-bg:            #F7F2E9;
  /* El mismo fondo con opacidad 0. Sirve para degradados: escribir
     «transparent» ahí vira a gris al interpolar. */
  --cmj-bg-0:          rgba(247, 242, 233, 0);
  --cmj-surface:       #FDFBF2;
  --cmj-surface-2:     #E4E0CA;
  --cmj-line:          #DAD5BB;
  --cmj-line-soft:     #EBE7D4;
  --cmj-ink:           #3D231A;
  --cmj-ink-2:         #6B4A3C;
  --cmj-ink-3:         #836859;
  --cmj-primary:       #513229;
  --cmj-primary-hover: #3D231A;
  --cmj-primary-on:    #F7F2E9;
  --cmj-primary-soft:  #D7D4B1;
  --cmj-accent:        #7A5512;
  --cmj-accent-soft:   #FCE6B7;
  /* Something Blue: lo que el usuario ha marcado — resultado de búsqueda
     resaltado y servicio añadido al presupuesto.                        */
  /* Marcado de «elegido»: antes azul, ahora el rojo tierra de la marca. */
  --cmj-sel:           #F5E8DA;
  --cmj-sel-line:      #AF3900;
  /* Escalón intermedio entre la fila y la cabecera de categoría */
  --cmj-hover:         #F8F6EA;
  /* Cabecera de categoría: a mitad de camino entre la fila y el tono
     anterior (#EBE7D4), para que no compita con su propio contenido. */
  --cmj-cat:           #F4F1E3;
  --cmj-cat-hover:     #EDE9D8;
  --cmj-shadow:        0 1px 2px rgba(81,50,41,.06), 0 8px 24px -14px rgba(81,50,41,.24);
  --cmj-shadow-lift:   0 2px 6px rgba(81,50,41,.09), 0 18px 40px -18px rgba(81,50,41,.36);

  --cmj-radio:         14px;
  --cmj-radio-sm:      9px;
  --cmj-sticky-top:    0px;   /* súbelo si tu web tiene cabecera fija. Ej: 72px */

  --cmj-sans:  "Inria Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cmj-serif: "Inria Serif", Georgia, "Times New Roman", serif;
  /* --cmj-display gobierna la interfaz (botones, etiquetas, cifras).
     El serif queda reservado a los titulares.                          */
  --cmj-display: var(--cmj-sans);

  background: var(--cmj-bg);
  color: var(--cmj-ink);
  font-family: var(--cmj-sans);
  font-size: 16px;
  line-height: 1.55;
  /* El aire de arriba va en una variable porque la capa del fondo
     (precios-glass.css) tiene que restarlo para llegar al borde de la
     sección. Quien cambie este relleno tiene que cambiar la variable. */
  --cmj-aire-arriba: clamp(40px, 6vw, 80px);
  padding-block: var(--cmj-aire-arriba) clamp(40px, 6vw, 80px);
  --cmj-aire-lados: 16px;
  padding-inline: var(--cmj-aire-lados);
}

/* ---------- PALETA OSCURA (desactivada a propósito) --------------------
   La sección NO sigue el modo oscuro del visitante: en una web el color lo
   decide la clínica, no el móvil de quien entra. Se ve siempre igual, de
   día y de noche.

   La paleta oscura sigue aquí por si algún día la web tiene su propio
   interruptor: basta con poner data-cmj-theme="dark" en el contenedor
   .cmj-precios para encenderla. Sin ese atributo no se activa nunca.
   ----------------------------------------------------------------------- */
.cmj-precios[data-cmj-theme="dark"] {
  --cmj-bg:            #211410;
  --cmj-bg-0:          rgba(33, 20, 16, 0);
  --cmj-surface:       #2C1B15;
  --cmj-surface-2:     #3A2419;
  --cmj-line:          #453026;
  --cmj-line-soft:     #33201A;
  --cmj-ink:           #F7F2E9;
  --cmj-ink-2:         #C7BFA8;
  --cmj-ink-3:         #9A8D79;
  --cmj-primary:       #D7D4B1;
  --cmj-primary-hover: #E6E3C4;
  --cmj-primary-on:    #2A1A14;
  --cmj-primary-soft:  #3B3524;
  --cmj-accent:        #FCE6B7;
  --cmj-accent-soft:   #40331C;
  --cmj-sel:           #441D0C;
  --cmj-sel-line:      #E0754A;
  --cmj-hover:         #38241C;
  --cmj-cat:           #33201A;
  --cmj-cat-hover:     #3A2419;
  --cmj-shadow:        0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
  --cmj-shadow-lift:   0 2px 8px rgba(0,0,0,.45), 0 20px 44px -20px rgba(0,0,0,.9);
}

.cmj-wrap { max-width: 1060px; margin-inline: auto; }

/* ---------- CABECERA ---------------------------------------------------- */
.cmj-head { max-width: 62ch; }
.cmj-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cmj-display);
  font-size: .75rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cmj-primary);
  margin: 0 0 14px;
}
.cmj-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; display: block;
}
.cmj-titulo {
  font-family: var(--cmj-serif);
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  font-weight: 400; letter-spacing: -.015em; line-height: 1.12;
  text-wrap: balance; margin: 0 0 14px; color: var(--cmj-ink);
}
.cmj-entradilla {
  margin: 0; font-size: 1.05rem; line-height: 1.65;
  font-weight: 300; color: var(--cmj-ink-2);
}
.cmj-datos-head {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 20px 0 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--cmj-ink-3);
}
.cmj-datos-head li { display: flex; align-items: center; gap: 7px; }
.cmj-datos-head li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cmj-primary); opacity: .55;
}
.cmj-datos-head b {
  font-family: var(--cmj-display); font-weight: 700;
  color: var(--cmj-ink-2); font-variant-numeric: tabular-nums;
}

/* ---------- BARRA DE HERRAMIENTAS --------------------------------------- */
.cmj-toolbar {
  position: sticky; top: var(--cmj-sticky-top); z-index: 20;
  margin: 28px 0 0;
  padding: 12px 0 10px;
  background: var(--cmj-bg);
}
.cmj-toolbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--cmj-line);
}
.cmj-controles { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.cmj-buscador { position: relative; flex: 1 1 260px; min-width: 0; }
.cmj-buscador svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--cmj-ink-3); pointer-events: none;
}
.cmj-buscador input {
  width: 100%; height: 44px;
  padding: 0 40px 0 38px;
  font: inherit; font-size: .95rem; color: var(--cmj-ink);
  background: var(--cmj-surface);
  border: 1px solid var(--cmj-line);
  border-radius: var(--cmj-radio-sm);
  -webkit-appearance: none; appearance: none;
}
.cmj-buscador input::placeholder { color: var(--cmj-ink-3); }
.cmj-buscador input:focus-visible {
  outline: 2px solid var(--cmj-primary); outline-offset: 1px;
  border-color: var(--cmj-primary);
}
.cmj-limpiar {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--cmj-surface-2); color: var(--cmj-ink-2);
  font-size: 15px; line-height: 1; padding: 0;
}
.cmj-limpiar:hover { background: var(--cmj-line); }

.cmj-orden {
  height: 44px; padding: 0 34px 0 13px;
  font: inherit; font-size: .9rem; color: var(--cmj-ink);
  background-color: var(--cmj-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2393796B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  border: 1px solid var(--cmj-line); border-radius: var(--cmj-radio-sm);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cmj-orden:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 1px; }

/* Chips de especialidad */
.cmj-chips {
  display: flex; gap: 7px; margin: 10px 0 0;
  padding: 2px 2px 6px; overflow-x: auto;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.cmj-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  font-family: var(--cmj-display); font-size: .8125rem; font-weight: 400;
  color: var(--cmj-ink-2); background: var(--cmj-surface);
  border: 1px solid var(--cmj-line); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.cmj-chip:hover { border-color: var(--cmj-primary); color: var(--cmj-ink); }
.cmj-chip:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 2px; }
.cmj-chip[aria-pressed="true"] {
  background: var(--cmj-primary); border-color: var(--cmj-primary);
  color: var(--cmj-primary-on); font-weight: 700;
}
.cmj-chip .cmj-chip-n {
  font-size: .72rem; opacity: .65; font-variant-numeric: tabular-nums;
}

/* Línea de resumen */
.cmj-resumen {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px;
  margin: 22px 0 12px;
  font-size: .8125rem; color: var(--cmj-ink-3);
}
.cmj-resumen b {
  font-family: var(--cmj-display); color: var(--cmj-ink-2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cmj-plegar {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 700;
  color: var(--cmj-primary); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.cmj-plegar:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 3px; border-radius: 3px; }

/* ---------- BANNER DE MODO REVISIÓN -------------------------------------- */
.cmj-revision {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  margin: 22px 0 0; padding: 12px 15px;
  font-size: .84rem; line-height: 1.5; color: var(--cmj-accent);
  background: var(--cmj-accent-soft);
  border: 1px solid color-mix(in srgb, var(--cmj-accent) 35%, transparent);
  border-radius: var(--cmj-radio-sm);
}
/* El aviso de precios falsos manda sobre el de revisión */
.cmj-revision.cmj-demo {
  color: var(--cmj-primary);
  background: var(--cmj-sel);
  border-color: var(--cmj-sel-line);
}
.cmj-revision.cmj-demo code {
  background: color-mix(in srgb, var(--cmj-sel-line) 40%, transparent);
}
.cmj-revision + .cmj-revision { margin-top: 8px; }

.cmj-revision code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--cmj-accent) 14%, transparent);
}

/* ---------- LAYOUT: NAVEGACIÓN + PANEL ----------------------------------- */
.cmj-layout {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: 26px; align-items: start; margin-top: 22px;
}
.cmj-main { min-width: 0; }

.cmj-nav {
  position: sticky; top: calc(var(--cmj-sticky-top) + 84px);
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - var(--cmj-sticky-top) - 110px);
  overflow-y: auto; padding-right: 4px;
}
.cmj-nav-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 11px;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--cmj-ink-2); background: none;
  border: 1px solid transparent; border-radius: var(--cmj-radio-sm);
  transition: background .14s ease, color .14s ease;
}
.cmj-nav-btn:hover { background: var(--cmj-surface); color: var(--cmj-ink); }
.cmj-nav-btn:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 1px; }
.cmj-nav-btn[aria-pressed="true"] {
  background: var(--cmj-surface); border-color: var(--cmj-line);
  color: var(--cmj-ink); box-shadow: var(--cmj-shadow);
}
.cmj-nav-ico {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--cmj-surface-2); color: var(--cmj-ink-3);
}
.cmj-nav-btn[aria-pressed="true"] .cmj-nav-ico {
  background: var(--cmj-primary-soft); color: var(--cmj-primary);
}
.cmj-nav-ico svg { width: 17px; height: 17px; }
.cmj-nav-txt { flex: 1 1 auto; min-width: 0; }
.cmj-nav-nombre {
  display: block; font-family: var(--cmj-display); font-size: .875rem;
  font-weight: 400; line-height: 1.3;
}
.cmj-nav-btn[aria-pressed="true"] .cmj-nav-nombre { font-weight: 700; }
.cmj-nav-prox {
  display: block; margin-top: 1px;
  font-family: var(--cmj-display); font-size: .65rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cmj-accent);
}
.cmj-nav-n {
  flex: 0 0 auto; font-family: var(--cmj-display); font-size: .72rem;
  font-weight: 700; color: var(--cmj-ink-3); font-variant-numeric: tabular-nums;
}

/* ---------- PANEL DEL ÁREA ----------------------------------------------- */
.cmj-panel {
  background: var(--cmj-surface);
  border: 1px solid var(--cmj-line);
  border-radius: var(--cmj-radio);
  box-shadow: var(--cmj-shadow);
  overflow: hidden;
}
.cmj-panel-cab {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-bottom: 1px solid var(--cmj-line-soft);
}
.cmj-panel-nombre {
  display: block; font-family: var(--cmj-serif); font-size: 1.24rem;
  font-weight: 400; letter-spacing: -.015em; color: var(--cmj-ink);
}
.cmj-panel-desc { display: block; margin-top: 2px; font-size: .86rem; color: var(--cmj-ink-3); }

.cmj-sub {
  margin: 0; padding: 13px 18px 11px;
  font-family: var(--cmj-display); font-size: .7rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cmj-primary);
  background: var(--cmj-primary-soft);
  border-top: 1px solid var(--cmj-line);
}
.cmj-sub + .cmj-cat > .cmj-cat-cab { border-top: 0; }

/* ---------- CATEGORÍA ---------------------------------------------------- */
.cmj-cat-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px 84px 32px;
  /* El contador y el chevron se van arriba del todo, a la esquina, en vez
     de quedarse centrados entre el nombre y su aclaración. */
  align-items: start; gap: 6px 12px;
  width: 100%; padding: 13px 18px;
  background: var(--cmj-cat);
  border: 0; border-top: 1px solid var(--cmj-line);
  cursor: pointer; font: inherit; color: inherit; text-align: left;
}
/* Nombre, etiqueta y contador viajan juntos en la primera columna. */
.cmj-cat-info {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; grid-column: 1;
}
/* La categoría puede llevar su propio precio. Sin tarifa el hueco queda
   vacío: no tendría sentido que las 99 categorías dijeran «Consultar». */
.cmj-cat-precio { min-height: 0; }
.cmj-cat:first-of-type > .cmj-cat-cab { border-top: 0; }
.cmj-cat-cab:hover { background: var(--cmj-cat-hover); }
.cmj-cat-cab:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: -3px; }
.cmj-cat-txt { flex: 1 1 auto; min-width: 0; }
/* Aclaración bajo el nombre de la categoría */
.cmj-cat-sub {
  display: block; margin-top: 1px;
  font-family: var(--cmj-sans); font-size: .82rem; font-weight: 300;
  letter-spacing: 0; line-height: 1.5; color: var(--cmj-ink-2);
}
.cmj-cat-desc {
  display: block; margin-top: 3px;
  font-family: var(--cmj-sans); font-size: .8rem; font-weight: 300;
  letter-spacing: 0; line-height: 1.55; color: var(--cmj-ink-3);
}
.cmj-cat-nombre {
  display: block; min-width: 0;
  font-family: var(--cmj-serif); font-size: .98rem; font-weight: 400;
  letter-spacing: -.008em; color: var(--cmj-ink);
}
.cmj-cat-n {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--cmj-surface-2);
  font-family: var(--cmj-display); font-size: .72rem; font-weight: 700;
  color: var(--cmj-ink-3); font-variant-numeric: tabular-nums;
}
.cmj-chevron {
  flex: 0 0 auto; width: 16px; height: 16px; color: var(--cmj-ink-3);
  transition: transform .2s ease;
}
/* Contador y chevron, juntos en la esquina de arriba a la derecha. Ocupan
   las dos columnas de los botones de las filas, así que la vertical sigue
   cuadrando con el enlace y el «+» de cada servicio. */
/* Al quitar la columna del enlace, la esquina se queda con los 32px del
   botón «+». El contador no cabe dentro, así que se deja desbordar hacia la
   izquierda por el hueco entre columnas: el chevron sigue clavado en la
   misma vertical que el «+» de las filas, que es lo que importa. */
.cmj-cat-esquina {
  grid-column: 4;
  justify-self: end;
  /* Abajo, no arriba: cuando el nombre ocupa dos líneas y lleva aclaración,
     el contador pegado al techo se quedaba flotando. Alineado al pie, cierra
     el bloque. */
  align-self: end;
  width: max-content;
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
}
.cmj-cat-cab[aria-expanded="true"] .cmj-chevron { transform: rotate(180deg); }
/* El interior va un tono más claro que su cabecera */
.cmj-cat-cuerpo { background: var(--cmj-surface); padding: 0; }

/* ---------- FILA DE SERVICIO -------------------------------------------- */
.cmj-lista { list-style: none; margin: 0; padding: 0; }

.cmj-lista { background: var(--cmj-surface); }

/* Columnas fijas a la derecha: el chevron, el precio y el botón «+» caen
   siempre en la misma x, así los desplegables forman una línea. El enlace
   ya no tiene columna: vive dentro del desplegable, bajo la descripción. */
.cmj-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px 84px 32px;
  align-items: center; gap: 6px 12px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--cmj-line-soft);
}
.cmj-item.is-abierto { background: var(--cmj-hover); }
.cmj-item:last-child { border-bottom: 0; }
.cmj-item:hover { background: var(--cmj-hover); }
.cmj-item.is-elegido {
  background: var(--cmj-sel);
  box-shadow: inset 3px 0 0 var(--cmj-sel-line);
}
.cmj-item.es-hijo { padding-left: 34px; }
.cmj-item.es-pendiente { box-shadow: inset 3px 0 0 var(--cmj-accent); }

/* Servicio padre que agrupa sub-servicios */
.cmj-subserv {
  display: block;
  padding: 13px 18px 5px;
  font-family: var(--cmj-display); font-size: .72rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cmj-ink-3);
  background: var(--cmj-surface);
}

/* Hueco del botón «+» cuando el servicio no tiene precio */
.cmj-add-hueco { display: block; width: 32px; height: 32px; }

.cmj-item-txt { min-width: 0; display: block; }

/* El nombre es pulsable cuando el servicio tiene descripción */
/* El botón abarca el nombre y el chevron, de modo que el chevron queda
   pegado al borde de su columna y el área pulsable sigue siendo amplia. */
.cmj-item-btn {
  grid-column: 1 / 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.cmj-item-btn:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 3px; border-radius: 4px; }
.cmj-item-btn .cmj-item-txt { flex: 1 1 auto; }
/* Sin descripción no hay chevron, pero el nombre ocupa las mismas columnas */
.cmj-item > .cmj-item-txt { grid-column: 1 / 3; }
.cmj-item-chevron {
  flex: 0 0 auto; width: 16px; height: 16px; color: var(--cmj-ink-3);
  transition: transform .2s ease;
}
.cmj-item-btn[aria-expanded="true"] .cmj-item-chevron {
  transform: rotate(180deg); color: var(--cmj-primary);
}
.cmj-item-btn:hover .cmj-nombre { color: var(--cmj-primary); }

/* Panel con la explicación del servicio */
.cmj-detalle {
  grid-column: 1 / -1;
  margin: 2px 0 4px; padding: 13px 15px;
  background: var(--cmj-surface);
  border: 1px solid var(--cmj-line);
  border-left: 3px solid var(--cmj-primary);
  border-radius: 0 var(--cmj-radio-sm) var(--cmj-radio-sm) 0;
}
.cmj-detalle-txt {
  margin: 0; max-width: 68ch;
  font-size: .89rem; line-height: 1.65; font-weight: 300; color: var(--cmj-ink-2);
}
.cmj-detalle-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  /* Un servicio puede tener enlace y no descripción: entonces el enlace es
     lo primero del desplegable y no necesita separarse de nada. */
  font-family: var(--cmj-display); font-size: .84rem; font-weight: 700;
  color: var(--cmj-primary); text-decoration: none;
}
.cmj-detalle-link:first-child { margin-top: 0; }
.cmj-detalle-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmj-detalle-link:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 3px; border-radius: 3px; }
.cmj-detalle-link svg { width: 15px; height: 15px; transition: transform .16s ease; }
.cmj-detalle-link:hover svg { transform: translateX(3px); }
.cmj-nombre {
  font-size: .97rem; color: var(--cmj-ink); font-weight: 400;
}
.cmj-item.is-elegido .cmj-nombre { font-weight: 700; }
.cmj-ref {
  display: block; margin: 0 0 2px;
  font-family: var(--cmj-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; color: var(--cmj-ink-3);
}
/* Aclaración bajo el nombre del servicio («arrugas dinámicas y prevención») */
.cmj-subtitulo {
  display: block; margin: 2px 0 0;
  font-size: .82rem; line-height: 1.4; color: var(--cmj-ink-3);
}
.cmj-meta {
  display: block; margin: 3px 0 0;
  font-size: .78rem; color: var(--cmj-ink-3); opacity: .85;
}
mark.cmj-hit {
  background: var(--cmj-sel); color: inherit;
  border-radius: 3px; padding: 0 2px;
}

.cmj-tag {
  display: inline-block; vertical-align: 1px;
  margin-left: 7px; padding: 2px 7px;
  font-family: var(--cmj-display); font-size: .66rem; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 5px;
  background: var(--cmj-accent-soft); color: var(--cmj-accent);
}
.cmj-tag[data-tag="destacado"] { background: var(--cmj-primary-soft); color: var(--cmj-primary); }
.cmj-tag[data-tag="promo"],
.cmj-tag[data-tag="nuevo"]     { background: var(--cmj-primary-soft); color: var(--cmj-primary); }
.cmj-tag[data-tag="oculto"]    { background: var(--cmj-surface-2); color: var(--cmj-ink-3); }
.cmj-tag[data-tag="falta"]     { background: var(--cmj-accent-soft); color: var(--cmj-accent); }

/* Columna de ancho fijo y todo alineado a la izquierda: el rótulo «Desde» y
   la cifra arrancan en la misma x, y esa x es la misma en las 595 filas.
   El min-height reserva el hueco del rótulo también donde no lo hay, para
   que todas las filas midan igual. */
.cmj-precio {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  min-height: 36px;
  text-align: left; white-space: nowrap;
}
/* Rótulo discreto sobre la cifra, alineado a su borde izquierdo */
.cmj-desde {
  display: block; text-align: left;
  font-family: var(--cmj-display); font-size: .6rem; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.1; color: var(--cmj-ink-3); opacity: .75;
  margin-bottom: 1px;
}
.cmj-cifra {
  display: block; line-height: 1.25;
  font-family: var(--cmj-display); font-size: 1.08rem; font-weight: 700;
  color: var(--cmj-ink); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.cmj-cifra.es-texto {
  font-size: .92rem; color: var(--cmj-primary);
  white-space: normal; line-height: 1.2;
}
.cmj-cifra.es-pendiente { font-size: .82rem; font-weight: 700; color: var(--cmj-accent); }

.cmj-add {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--cmj-line); border-radius: 50%;
  background: var(--cmj-surface); color: var(--cmj-ink-2);
  cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.cmj-add svg { width: 15px; height: 15px; }
.cmj-add:hover { border-color: var(--cmj-primary); color: var(--cmj-primary); }
.cmj-add:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 2px; }
.cmj-add[disabled] { opacity: .35; cursor: not-allowed; }
.cmj-add[disabled]:hover { border-color: var(--cmj-line); color: var(--cmj-ink-2); }
.cmj-add[aria-pressed="true"] {
  background: var(--cmj-sel-line); border-color: var(--cmj-sel-line);
  color: var(--cmj-primary-on);
}

/* ---------- BLINDAJE FRENTE AL TEMA -------------------------------------
   Muchos temas de WordPress llevan esta regla, y el de la clínica también:

     button:active, button:focus { border: none; outline: none; }

   Pesa 0-1-1, más que nuestras clases sueltas (0-1-0), así que en cuanto
   uno de nuestros botones recibe el foco —al volver de la ventana, al
   pulsar una categoría, al marcar un servicio— se queda sin contorno.
   Estas reglas pesan 0-2-0 y le devuelven el suyo a cada uno.
   ----------------------------------------------------------------------- */
.cmj-boton:focus,
.cmj-boton:active   { border: 1px solid rgba(47, 46, 44, .34); }
.cmj-cerrar:focus,
.cmj-cerrar:active  { border: 1px solid #DAD5BB; }
.cmj-add:focus,
.cmj-add:active     { border: 1px solid var(--cmj-line); }
.cmj-nav-btn:focus,
.cmj-nav-btn:active { border: 1px solid transparent; }
.cmj-cat-cab:focus,
.cmj-cat-cab:active { border: 0; border-top: 1px solid var(--cmj-line); }
.cmj-cat:first-of-type > .cmj-cat-cab:focus,
.cmj-cat:first-of-type > .cmj-cat-cab:active { border-top: 0; }

/* ---------- SIN RESULTADOS ---------------------------------------------- */
.cmj-vacio {
  padding: 44px 20px; text-align: center;
  background: var(--cmj-surface); border: 1px dashed var(--cmj-line);
  border-radius: var(--cmj-radio); color: var(--cmj-ink-3);
}
.cmj-vacio strong {
  display: block; font-family: var(--cmj-display); font-size: 1.05rem;
  font-weight: 700; color: var(--cmj-ink); margin-bottom: 6px;
}

/* ---------- PIE LEGAL ---------------------------------------------------- */
.cmj-legal {
  max-width: 68ch; margin: 26px 0 0;
  font-size: .8rem; line-height: 1.65; font-weight: 300; color: var(--cmj-ink-3);
}

/* ---------- BANDEJA DE PRESUPUESTO -------------------------------------- */
.cmj-tray {
  position: fixed; left: 50%; bottom: 0; z-index: 60;
  width: min(660px, calc(100% - 24px));
  transform: translate(-50%, 130%);
  margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--cmj-surface);
  border: 1px solid var(--cmj-line);
  border-radius: var(--cmj-radio);
  box-shadow: var(--cmj-shadow-lift);
  transition: transform .28s cubic-bezier(.22,.8,.3,1);
  overflow: hidden;
}
.cmj-tray.is-visible { transform: translate(-50%, 0); }

.cmj-tray-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
}
.cmj-tray-toggle {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
  min-width: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.cmj-tray-toggle:focus-visible { outline: 2px solid var(--cmj-primary); outline-offset: 3px; border-radius: 6px; }
.cmj-tray-n {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--cmj-primary); color: var(--cmj-primary-on);
  font-family: var(--cmj-display); font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cmj-tray-label { display: block; font-size: .78rem; color: var(--cmj-ink-3); }
.cmj-tray-total {
  display: block; font-family: var(--cmj-display); font-size: 1.12rem;
  font-weight: 700; color: var(--cmj-ink); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.cmj-tray-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  font-family: var(--cmj-display); font-size: .875rem; font-weight: 700;
  color: var(--cmj-primary-on); background: var(--cmj-primary);
  border: 0; border-radius: var(--cmj-radio-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.cmj-tray-cta:hover { background: var(--cmj-primary-hover); }
.cmj-tray-cta:focus-visible { outline: 2px solid var(--cmj-ink); outline-offset: 2px; }
.cmj-tray-cta svg { width: 16px; height: 16px; }

.cmj-tray-detalle {
  border-top: 1px solid var(--cmj-line-soft);
  max-height: min(42vh, 320px); overflow-y: auto;
}
.cmj-tray-detalle ul { list-style: none; margin: 0; padding: 0; }
.cmj-tray-detalle li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--cmj-line-soft);
  font-size: .89rem;
}
.cmj-tray-detalle li:last-child { border-bottom: 0; }
.cmj-tray-detalle .cmj-tray-nombre { flex: 1 1 auto; min-width: 0; }
.cmj-tray-detalle .cmj-ref { text-transform: none; margin: 1px 0 0; }
.cmj-tray-detalle .cmj-tray-precio {
  font-family: var(--cmj-display); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmj-quitar {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--cmj-surface-2); color: var(--cmj-ink-2); font-size: 14px;
}
.cmj-quitar:hover { background: var(--cmj-line); color: var(--cmj-ink); }
.cmj-tray-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--cmj-line-soft);
  font-size: .75rem; color: var(--cmj-ink-3);
}
.cmj-vaciar {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--cmj-ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.cmj-vaciar:hover { color: var(--cmj-ink); }

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width: 899px) {
  .cmj-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cmj-nav {
    position: static; max-height: none;
    flex-direction: row; gap: 7px;
    overflow-x: auto; padding: 2px 2px 6px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .cmj-nav-btn {
    flex: 0 0 auto; width: auto; white-space: nowrap;
    border-radius: 999px; border-color: var(--cmj-line);
    background: var(--cmj-surface); padding: 6px 13px 6px 7px;
  }
  .cmj-nav-btn[aria-pressed="true"] {
    background: var(--cmj-primary); border-color: var(--cmj-primary);
    color: var(--cmj-primary-on); box-shadow: none;
  }
  .cmj-nav-btn[aria-pressed="true"] .cmj-nav-ico {
    background: color-mix(in srgb, var(--cmj-primary-on) 20%, transparent);
    color: var(--cmj-primary-on);
  }
  .cmj-nav-btn[aria-pressed="true"] .cmj-nav-n,
  .cmj-nav-btn[aria-pressed="true"] .cmj-nav-prox { color: inherit; opacity: .75; }
  .cmj-nav-ico { width: 26px; height: 26px; border-radius: 7px; }
  .cmj-nav-ico svg { width: 15px; height: 15px; }
  .cmj-nav-prox { display: none; }
}

@media (max-width: 620px) {
  .cmj-panel-cab { padding: 14px; gap: 11px; }
  .cmj-panel-desc { display: none; }
  .cmj-icono { width: 34px; height: 34px; border-radius: 9px; }
  .cmj-icono svg { width: 18px; height: 18px; }
  .cmj-cat-cab {
    grid-template-columns: minmax(0, 1fr) 16px 76px 28px;
    padding: 12px 14px; gap: 6px 8px;
  }
  .cmj-item {
    grid-template-columns: minmax(0, 1fr) 16px 76px 28px;
    padding: 8px 14px; gap: 6px 8px;
  }
  .cmj-detalle { padding: 11px 13px; }
  .cmj-add, .cmj-add-hueco { width: 28px; height: 28px; }
  .cmj-item.es-hijo { padding-left: 26px; }
  .cmj-subserv { padding: 12px 14px 4px; }
  .cmj-orden { flex: 1 1 100%; }
  .cmj-tray-barra { flex-wrap: wrap; }
  .cmj-tray-cta { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cmj-precios *, .cmj-tray { transition: none !important; }
}

/* ---------- IMPRESIÓN ---------------------------------------------------- */
@media print {
  .cmj-toolbar, .cmj-tray, .cmj-add, .cmj-add-hueco, .cmj-plegar,
  .cmj-chevron, .cmj-item-chevron, .cmj-cat-n, .cmj-nav,
  .cmj-revision, .cmj-detalle { display: none !important; }
  .cmj-layout { display: block; }
  .cmj-precios {
    background: #fff; color: #000; padding: 0;
    --cmj-surface: #fff; --cmj-line: #bbb; --cmj-line-soft: #ddd;
    --cmj-ink: #000; --cmj-ink-2: #333; --cmj-ink-3: #555;
  }
  .cmj-panel { box-shadow: none; }
  .cmj-cat { break-inside: avoid; page-break-inside: avoid; }
  .cmj-cat-cuerpo { display: block !important; background: #fff; }
  .cmj-item { break-inside: avoid; }
}

/* =========================================================================
   VENTANA (modal) — para abrir la sección desde un enlace del menú
   Los colores van literales, no con variables, porque el elemento dialog vive
   fuera del contenedor .cmj-precios donde se declaran los tokens.
   ========================================================================= */

/* Botón opcional. Si prefieres usar el enlace que ya tienes en el menú,
   no hace falta: basta con ponerle data-cmj-abrir.                        */
.cmj-boton {
  display: inline-flex; align-items: center; justify-content: center;
  /* Los contenedores de Elementor son flex: sin esto el botón se encoge y
     el texto parte en dos líneas. */
  flex: 0 0 auto;
  gap: 14px;
  padding: 19px 40px;
  font-family: "Inria Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .875rem; font-weight: 400; line-height: 1;
  letter-spacing: .11em; text-transform: uppercase;
  color: #2F2E2C; background: transparent;
  border: 1px solid rgba(47, 46, 44, .34);
  border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cmj-boton svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  transition: transform .2s ease;
}
.cmj-boton:hover {
  background: #2F2E2C; border-color: #2F2E2C; color: #F7F2E9;
}
.cmj-boton:hover svg { transform: translateX(4px); }
.cmj-boton:focus-visible { outline: 2px solid #2F2E2C; outline-offset: 3px; }
@media (max-width: 480px) {
  .cmj-boton { padding: 17px 28px; font-size: .8rem; letter-spacing: .09em; gap: 11px; }
}

.cmj-modal {
  width: min(1180px, calc(100vw - 32px));
  max-width: none; max-height: none;
  height: min(88vh, 940px);
  padding: 0; border: 0;
  border-radius: 18px;
  background: #F7F2E9; color: #3D231A;
  box-shadow: 0 30px 80px -24px rgba(33, 20, 16, .55);
  overflow: hidden;
}
/* Fondo de la ventana: velo traslúcido y desenfoque de la página de detrás.
   El velo va más suave cuando hay desenfoque, porque el propio blur ya
   separa la ventana del contenido; sin él haría falta más opacidad para
   que el texto de la web no compitiera.                                   */
.cmj-modal::backdrop { background: rgba(33, 20, 16, .55); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cmj-modal::backdrop {
    background: rgba(33, 20, 16, .32);
    -webkit-backdrop-filter: blur(11px) saturate(118%);
    backdrop-filter: blur(11px) saturate(118%);
  }
}

/* Quien tenga activado «reducir transparencia» en su sistema ve un velo
   sólido, sin desenfoque. */
@media (prefers-reduced-transparency: reduce) {
  .cmj-modal::backdrop {
    background: rgba(33, 20, 16, .72);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

.cmj-modal-cuerpo {
  height: 100%; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Dentro de la ventana el sticky se mide contra la propia ventana */
.cmj-modal .cmj-precios {
  --cmj-sticky-top: 0px;
  --cmj-aire-arriba: 26px;
  padding-block: var(--cmj-aire-arriba) 30px;
}
.cmj-modal .cmj-nav {
  top: 78px;
  max-height: calc(min(88vh, 940px) - 190px);
}
/* La barra de presupuesto se ancla a la ventana, no a la pantalla */
.cmj-modal .cmj-tray { position: absolute; }

.cmj-cerrar {
  position: absolute; top: 12px; right: 14px; z-index: 40;
  width: 38px; height: 38px;
  display: grid; place-items: center; padding: 0;
  color: #513229; background: #FDFBF2;
  border: 1px solid #DAD5BB; border-radius: 50%;
  cursor: pointer;
}
.cmj-cerrar svg { width: 17px; height: 17px; }
.cmj-cerrar:hover { background: #EDE9D8; }
.cmj-cerrar:focus-visible { outline: 2px solid #513229; outline-offset: 2px; }

/* Mismo criterio para la ventana y el botón: color fijo. Solo se ponen en
   oscuro si se pide a mano con data-cmj-theme="dark" en el elemento.    */
.cmj-modal[data-cmj-theme="dark"] { background: #211410; color: #F7F2E9; }
.cmj-modal[data-cmj-theme="dark"] .cmj-cerrar {
  color: #D7D4B1; background: #2C1B15; border-color: #453026;
}
.cmj-modal[data-cmj-theme="dark"] .cmj-cerrar:hover { background: #3A2419; }
.cmj-boton[data-cmj-theme="dark"] {
  color: #D7D4B1; background: transparent;
  border-color: rgba(215, 212, 177, .38);
}
.cmj-boton[data-cmj-theme="dark"]:hover {
  background: #D7D4B1; border-color: #D7D4B1; color: #2A1A14;
}

@media (max-width: 620px) {
  .cmj-modal {
    width: 100vw; height: 100dvh;
    border-radius: 0;
    margin: 0; max-height: none;
  }
  .cmj-modal .cmj-nav { max-height: none; }
  .cmj-cerrar { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; }
}