/* =========================================================================
   CLÍNICA MÉDICA JARDINES — CAPA DE CRISTAL
   -------------------------------------------------------------------------
   Se carga DESPUÉS de precios.css y precios-minimal.css. Quitando esta línea
   del widget, la sección vuelve exactamente a como estaba.

   Toma el tratamiento del widget «concierge» de la web (blur, saturación,
   filete blanco superior, sombras profundas, radios y la curva de
   aceleración), pero con nuestra paleta: ningún color cambia.

   Equivalencias con el concierge:
     --jc-glass        saturate(170%) blur(30px)   -> idéntico
     --jc-glass-edge   inset 0 1px 0 rgba(255,255,255,.5)
     --jc-shadow-panel 0 24px 60px rgba(21,23,26,.22) …
     radios            24px panel · 14px pieza · 999px píldora
     curva             cubic-bezier(.22,.61,.36,1) a 300 ms
   Nuestras sombras llevan el mismo dibujo pero teñidas con nuestra tinta
   (#3D231A) en vez del gris azulado del concierge.
   ========================================================================= */

.cmj-precios,
.cmj-modal,
.cmj-tray {
  /* El papel translúcido es nuestro --cmj-surface (#FDFBF2), no blanco. */
  --cmj-glass:        saturate(170%) blur(30px);
  --cmj-glass-suave:  saturate(150%) blur(10px);
  --cmj-glass-papel:  rgba(253, 251, 242, .72);
  --cmj-glass-pieza:  rgba(253, 251, 242, .58);
  /* Sin filete blanco ni brillo interior. El borde se queda en transparente
     (no en 0) para que no cambie ni un píxel de la maquetación, y la luz
     pasa a ser una sombra nula porque va dentro de listas de box-shadow,
     donde «none» no vale. */
  --cmj-glass-filete: transparent;
  --cmj-glass-luz:    0 0 0 0 rgba(255, 255, 255, 0);
  --cmj-glass-sombra: 0 10px 30px rgba(61, 35, 26, .13), 0 2px 6px rgba(61, 35, 26, .07);
  --cmj-glass-panel:  0 24px 60px rgba(61, 35, 26, .20), 0 4px 12px rgba(61, 35, 26, .08);
  --cmj-glass-curva:  cubic-bezier(.22, .61, .36, 1);
  --cmj-glass-tiempo: 300ms;
}

/* ---------- la ventana: el panel de cristal ------------------------------ */
.cmj-modal {
  background: var(--cmj-glass-papel);
  -webkit-backdrop-filter: var(--cmj-glass);
          backdrop-filter: var(--cmj-glass);
  border: 1px solid var(--cmj-glass-filete);
  border-radius: 24px;
  box-shadow: var(--cmj-glass-panel), var(--cmj-glass-luz);
}
/* El velo de detrás se aligera: antes tapaba la página y el cristal no
   tenía nada que filtrar. Ahora la web se intuye a través del panel. */
.cmj-modal::backdrop {
  background: rgba(61, 35, 26, .20);
  -webkit-backdrop-filter: blur(3px) saturate(108%);
          backdrop-filter: blur(3px) saturate(108%);
}
/* El botón de cerrar conserva su filete crema (#DAD5BB, el de precios.css):
   no es un borde blanco, y sin él el círculo se pierde sobre el papel. */
.cmj-cerrar {
  background: var(--cmj-glass-pieza);
  -webkit-backdrop-filter: var(--cmj-glass-suave);
          backdrop-filter: var(--cmj-glass-suave);
}
.cmj-cerrar:hover,
.cmj-cerrar:focus,
.cmj-cerrar:active { background: rgba(255, 255, 255, .58); }

/* ---------- barra de presupuesto: flota, así que es cristal -------------- */
.cmj-tray {
  background: var(--cmj-glass-papel);
  -webkit-backdrop-filter: var(--cmj-glass);
          backdrop-filter: var(--cmj-glass);
  border: 1px solid var(--cmj-glass-filete);
  border-radius: 24px;
  box-shadow: var(--cmj-glass-panel), var(--cmj-glass-luz);
  transition: transform var(--cmj-glass-tiempo) var(--cmj-glass-curva);
}

/* ---------- piezas sueltas: píldoras de área, buscar y ordenar ----------- */
.cmj-nav-btn,
.cmj-buscador input {
  background: var(--cmj-glass-pieza);
  -webkit-backdrop-filter: var(--cmj-glass-suave);
          backdrop-filter: var(--cmj-glass-suave);
  border-color: var(--cmj-glass-filete);
  box-shadow: var(--cmj-glass-luz);
  transition: background-color .2s var(--cmj-glass-curva),
              border-color .2s var(--cmj-glass-curva),
              color .2s var(--cmj-glass-curva);
}
.cmj-nav-btn:hover,
.cmj-buscador input:hover { background: rgba(255, 255, 255, .58); }

/* El desplegable de orden lleva su flecha como imagen de fondo: aquí solo
   se puede tocar background-color, o se borra la flecha. */
.cmj-orden {
  background-color: var(--cmj-glass-pieza);
  -webkit-backdrop-filter: var(--cmj-glass-suave);
          backdrop-filter: var(--cmj-glass-suave);
  border-color: var(--cmj-glass-filete);
  box-shadow: var(--cmj-glass-luz);
}
.cmj-orden:hover { background-color: rgba(255, 255, 255, .58); }

/* El área activa no es cristal: es la única pieza sólida, para que mande. */
.cmj-nav-btn[aria-pressed="true"] {
  background: var(--cmj-primary);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: var(--cmj-primary);
  box-shadow: var(--cmj-glass-sombra);
}

/* Un elemento con backdrop-filter crea su propio contexto de apilado y pasa
   a pintarse por encima de sus hermanos en posición absoluta. Sin esto, el
   input del buscador tapaba la lupa y el aspa de limpiar: se veían como una
   mancha pálida a través del cristal. */
.cmj-buscador svg,
.cmj-limpiar { z-index: 2; }

/* ---------- círculo de añadir ------------------------------------------- */
.cmj-add {
  background: var(--cmj-glass-pieza);
  -webkit-backdrop-filter: var(--cmj-glass-suave);
          backdrop-filter: var(--cmj-glass-suave);
  box-shadow: var(--cmj-glass-luz);
}
.cmj-add:hover { background: rgba(255, 255, 255, .58); }
.cmj-add[aria-pressed="true"] { box-shadow: var(--cmj-glass-luz); }

/* ---------- botón que abre la ventana ------------------------------------ */
.cmj-boton {
  -webkit-backdrop-filter: saturate(150%) blur(10px);
          backdrop-filter: saturate(150%) blur(10px);
  background: rgba(253, 251, 242, .34);
  transition: background .2s cubic-bezier(.22, .61, .36, 1),
              color .2s cubic-bezier(.22, .61, .36, 1),
              border-color .2s cubic-bezier(.22, .61, .36, 1);
}
.cmj-boton:hover { box-shadow: 0 10px 30px rgba(61, 35, 26, .13); }

/* ---------- avisos de revisión: fichas de cristal ------------------------ */
.cmj-revision {
  background: var(--cmj-glass-pieza);
  -webkit-backdrop-filter: var(--cmj-glass-suave);
          backdrop-filter: var(--cmj-glass-suave);
  box-shadow: var(--cmj-glass-luz);
}

/* ---------- respaldo: navegadores sin cristal ---------------------------- */
/* Safari viejo, Firefox con la opción desactivada. Sin esto el panel se
   quedaría semitransparente sobre nada y el texto sería ilegible.        */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cmj-modal, .cmj-tray { background: var(--cmj-surface); border-color: var(--cmj-line); }
  .cmj-cerrar, .cmj-nav-btn, .cmj-buscador input,
  .cmj-add, .cmj-revision, .cmj-boton {
    background: var(--cmj-surface); border-color: var(--cmj-line);
  }
  .cmj-orden { background-color: var(--cmj-surface); border-color: var(--cmj-line); }
  .cmj-modal::backdrop { background: rgba(61, 35, 26, .72); }
}

/* Quien pide menos transparencia en su sistema recibe lo mismo, opaco. */
@media (prefers-reduced-transparency: reduce) {
  .cmj-modal, .cmj-tray, .cmj-cerrar, .cmj-nav-btn, .cmj-buscador input,
  .cmj-add, .cmj-revision, .cmj-boton {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--cmj-surface);
  }
  .cmj-orden { -webkit-backdrop-filter: none; backdrop-filter: none;
               background-color: var(--cmj-surface); }
  .cmj-modal::backdrop { background: rgba(61, 35, 26, .78); backdrop-filter: none; }
}

/* =========================================================================
   GLOBOS
   -------------------------------------------------------------------------
   Cada parte de la sección va dentro de su propio panel redondeado, con
   aire entre ellos, como los pasos del buscador de tratamientos.

   Medidas tomadas de .jr-bt__panel de la web:
     radio 28px · relleno 28px 24px · blur(18px) saturate(1.15)
     sombra 0 20px 50px -30px · separación 14px
   Aquí el relleno y la separación van más generosos, porque estos globos
   llevan listas largas dentro y no tres líneas de texto.
   ========================================================================= */

.cmj-precios {
  --cmj-globo-radio:  28px;
  --cmj-globo-aire:   clamp(18px, 2.4vw, 30px);
  --cmj-globo-dentro: clamp(20px, 2.8vw, 34px);
  /* Más opaco que antes. Sobre el papel liso, .55 bastaba; sobre el fondo
     amarillo los globos se teñían y cada uno salía de un color según dónde
     cayera. A .84 siguen siendo crema y el fondo se intuye. */
  --cmj-globo-papel:  rgba(253, 251, 242, .84);
}

/* Ni las píldoras de área ni la barra de buscar llevan globo: sus piezas
   ya son cajas redondeadas, y meterlas dentro de otra era burbuja sobre
   burbuja. */
.cmj-panel,
.cmj-revision,
.cmj-revision.cmj-demo {
  padding: var(--cmj-globo-dentro);
  border-radius: var(--cmj-globo-radio);
  background: var(--cmj-globo-papel);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
          backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid var(--cmj-glass-filete);
  /* Sombra ambiente, no una barra debajo. La del buscador de tratamientos
     (0 20px 50px -30px) está pensada para paneles de tres líneas; sobre
     bloques de 900 px se convertía en un manchón oscuro pegado al canto
     inferior y sin nada a los lados. Menos caída, más difuminado y algo
     de vuelo lateral para que el globo parezca flotar. */
  box-shadow: 0 12px 44px -24px rgba(61, 35, 26, .34),
              0 2px 10px -6px rgba(61, 35, 26, .07),
              var(--cmj-glass-luz);
}

/* La cabecera va sin globo, directamente sobre el fondo: es la entrada a
   la sección, no una ficha más. Solo conserva el sangrado lateral de los
   globos para que todo arranque en la misma vertical. */
.cmj-head {
  max-width: none;
  padding: calc(var(--cmj-globo-dentro) * .6) var(--cmj-globo-dentro)
           calc(var(--cmj-globo-dentro) * 1.1);
}
.cmj-head > * { max-width: 62ch; }

/* Fuera del globo, el gris claro de la letra pequeña se queda corto sobre
   el amarillo fuerte del fondo: 3,4 de contraste, por debajo del 4,5 que
   pide la norma. Baja un escalón, al mismo tono de la entradilla, y sube
   a 5,2. El titular y la entradilla ya iban sobrados. */
.cmj-head .cmj-eyebrow,
.cmj-head .cmj-datos-head,
.cmj-head .cmj-datos-head li { color: var(--cmj-ink-2); }

/* El aire entre globos. Es lo que hace que la sección respire. */
.cmj-revision,
.cmj-layout,
.cmj-legal { margin-top: var(--cmj-globo-aire); }
.cmj-revision + .cmj-revision { margin-top: calc(var(--cmj-globo-aire) / 2); }
.cmj-nav { margin: 0 0 var(--cmj-globo-aire); }
.cmj-layout { margin-bottom: 0; }

/* La barra de buscar y ordenar va sin caja de ningún tipo: ni globo, ni
   filete, ni fondo. Y por lo tanto tampoco pegajosa: una barra pegajosa
   necesita fondo opaco para tapar las filas que le pasan por debajo, y ese
   fondo era justo la caja que sobraba. Para recuperarla haría falta volver
   a ponerle position: sticky y un fondo. */
.cmj-toolbar::after { display: none; }
.cmj-toolbar {
  position: static;
  background: transparent;
  border: 0; border-radius: 0;
  padding: 10px 0 14px;
  margin-top: calc(var(--cmj-globo-aire) + 14px);
}

/* El resumen «76 prestaciones · Contraer todo» vive fuera de los globos,
   a modo de pie de la barra de áreas. */
.cmj-resumen {
  margin: 0 0 var(--cmj-globo-aire);
  padding-inline: var(--cmj-globo-dentro);
}

/* Los avisos de revisión ya traían su propio filete lateral: dentro del
   globo se queda solo el filete, sin la caja de antes. El de «precios de
   ejemplo» se nombra con las dos clases porque la capa minimalista lo deja
   transparente con (0,2,0) y si no, sobre el fondo salía en amarillo. */
.cmj-revision,
.cmj-revision.cmj-demo { border-left: 3px solid currentColor; }

/* La nota legal cierra, sin caja: es letra pequeña, no una sección. */
.cmj-legal {
  padding-inline: var(--cmj-globo-dentro);
  border-top: 0;
  /* De lado a lado: aquí no es un párrafo de lectura, es el pie de la
     sección, y cortarlo a 68 caracteres lo dejaba descolgado a la izquierda. */
  max-width: none;
}

/* Dentro de la ventana el fondo ya es un globo: los de dentro se aligeran
   para no acumular tres capas de cristal una encima de otra. */
.cmj-modal .cmj-panel,
.cmj-modal .cmj-revision,
.cmj-modal .cmj-revision.cmj-demo {
  background: rgba(253, 251, 242, .78);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 14px 34px -26px rgba(61, 35, 26, .4), var(--cmj-glass-luz);
}

@media (max-width: 620px) {
  .cmj-precios { --cmj-globo-radio: 22px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cmj-panel, .cmj-revision, .cmj-revision.cmj-demo {
    background: var(--cmj-surface); border-color: var(--cmj-line);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cmj-panel, .cmj-revision, .cmj-revision.cmj-demo {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--cmj-surface);
  }
}

/* =========================================================================
   EL FONDO
   -------------------------------------------------------------------------
   Dos imágenes: una apaisada para pantallas anchas y una vertical para el
   móvil, que es donde la apaisada se quedaría corta por los lados.

   Van como variables para que cambiarlas sea una línea. Para quitar el
   fondo y volver al papel liso basta con:
       .cmj-precios { --cmj-fondo: none; }

   Las rutas son relativas a ESTE archivo: deja los .webp en la misma
   carpeta que precios-glass.css y funcionan solas.
   ========================================================================= */

.cmj-precios,
.cmj-modal {
  --cmj-fondo: url("fondo-tarifas-ancho.webp");
  /* Un velo de papel por encima, muy leve: solo para quitarle filo al
     amarillo más saturado. Súbelo si lo quieres más apagado. */
  --cmj-fondo-velo: rgba(253, 251, 242, .12);
  /* El grano va aparte, dibujado por el navegador. A las imágenes se les ha
     quitado: un degradado suave se puede estirar sin que se note, pero el
     grano estirado es justo lo que se veía pixelado. Así sale siempre
     nítido, a la resolución real de la pantalla, y pesa 300 bytes. */
  --cmj-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
}
@media (max-width: 820px) {
  .cmj-precios,
  .cmj-modal { --cmj-fondo: url("fondo-tarifas-alto.webp"); }
}

/* El fondo va en su propia capa, no en background-attachment: fixed.
   Safari de iOS ignora «fixed» y lo trata como «scroll»: la imagen se
   estiraba a los 8.000 px de alto de la sección y se pixelaba. Con una capa
   pegajosa de un alto de pantalla el fondo se queda quieto —al 100 % del
   hueco visible, sin estirarse— y funciona igual en todos los navegadores.
   El margen negativo es lo que hace que no ocupe sitio en la maquetación. */
.cmj-precios { position: relative; }
.cmj-fondo {
  position: sticky; top: 0;
  height: 100vh;
  /* Se sale del relleno de la sección por arriba y por los lados: si no,
     esos 16-96 px se quedaban sin fondo. */
  margin-top: calc(var(--cmj-aire-arriba) * -1);
  margin-inline: calc(var(--cmj-aire-lados) * -1);
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--cmj-grano),
    linear-gradient(var(--cmj-fondo-velo), var(--cmj-fondo-velo)),
    var(--cmj-fondo);
  background-size: 180px 180px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center, center, center;
}
@supports (height: 100svh) {
  .cmj-fondo { height: 100svh; margin-bottom: -100svh; }
}
/* El contenido, por encima de su fondo. */
.cmj-precios > .cmj-wrap { position: relative; z-index: 1; }