/*
 * Hoja propia de Liwen para la web pública (JFP-2133, JFP-2134).
 *
 * NO SE EDITA A MANO: la genera scripts/web-hoja-liwen.mjs desde
 * scripts/web-hoja-liwen-estilos.mjs (`node scripts/web-hoja-liwen.mjs`), y su
 * `--check` falla si este fichero no es el generado.
 *
 * Se carga DESPUÉS del último custom.css del tema (lo enlaza el espejo:
 * scripts/web-mirror.mjs → htmlParaGuardar), así que con el mismo selector le gana
 * en la cascada. custom.css es del proveedor y lo sobrescribe cada re-réplica: lo
 * nuestro va aquí, que el espejo no toca.
 *
 * Qué hace:
 *   1. Define los tokens del Figma (color, tipografía).
 *   2. Saca el lila de marca de UN token. custom.css lo escribía en 9 tonos
 *      (#b4add5, #a39ec4, #a49ec4, #a7a4d1, #b3aed8, #a499cc, #9a8fc4, #a49ed1,
 *      #b8b5d8) y uno con transparencia (#a7a4d1d4). Cada regla que lo escribía
 *      a mano se repite abajo con el mismo selector y leyendo el token. Qué es
 *      «un lila de marca» lo decide esLilaDeMarca (scripts/web-hoja-liwen.mjs)
 *      por el color, así que src/test/jfp2133-web-base-tecnica.test.ts falla si
 *      una re-réplica trae un tono que no está cubierto aquí, aunque sea nuevo.
 *      Los lilas escritos dentro del HTML los pasa al token el propio espejo.
 *   3. Arregla la variable del formulario de inversor, que se referenciaba a
 *      sí misma y quedaba inválida.
 *   4. Quita el desborde horizontal de la portada en móvil (JFP-1403).
 *   5. El rediseño fiel al Figma en escritorio (JFP-2134).
 *   6. El acabado «web de 2027» (JFP-2134): radios, capas, sombras, velos, cabecera
 *      fija, cookies, hover y foco. Pisa al Figma en radios, sombras y profundidad.
 *   7. La paleta «papel, tinta y tres láminas de marca» (JFP-2134, propuesta para
 *      Yolanda): el reparto del color, las láminas, el ritmo vertical y la ventana de
 *      detalles de las cookies (scripts/web-hoja-liwen-paleta.mjs).
 *   8. La adaptación móvil (JFP-2135), al final y solo por debajo de 768 px.
 */

:root {
  /* Color (Figma). */
  --liwen-lila: #a7a4d1;
  --liwen-lima: #d3fe1e;
  --liwen-negro: #000000;
  --liwen-tinta: #303030;
  --liwen-titulo: #1a1a1a;
  --liwen-cta-cabecera: #141414;
  --liwen-boton-servicio: #213d34;
  --liwen-oscuro: #1c1a1a;
  --liwen-enviar: #191a23;
  --liwen-borde-tarjeta: #98999a;
  --liwen-faq-abierta: #ececec;
  --liwen-fondo-por-que: #f1f2ed;
  --liwen-buscar: #f5f7fa;
  --liwen-testimonio: #797979;
  --liwen-nombre-testimonio: #453232;
  --liwen-borde-testimonio: #ededed;
  --liwen-estrellas: #ebd163;
  --liwen-placeholder: #898989;
  --liwen-blanco: #ffffff;
  --liwen-papel: #f6f4ef;
  --liwen-papel-hondo: #e9e5dc;
  --liwen-papel-claro: #fcfbf8;
  --liwen-tinta950: #15141a;
  --liwen-tinta900: #201f27;
  --liwen-tinta800: #2c2b34;
  --liwen-tinta600: #46444e;
  --liwen-tinta500: #625f69;
  --liwen-sobre-tinta: rgba(246, 244, 239, 0.74);
  --liwen-sobre-tinta-tenue: rgba(246, 244, 239, 0.58);
  --liwen-lila100: color-mix(in oklab, var(--liwen-lila) 16%, white);
  --liwen-lila200: color-mix(in oklab, var(--liwen-lila) 34%, white);
  --liwen-lila300: color-mix(in oklab, var(--liwen-lila) 62%, white);
  --liwen-lila700: color-mix(in oklab, var(--liwen-lila) 42%, var(--liwen-tinta950));
  --liwen-lila-borde: color-mix(in oklab, var(--liwen-lila) 45%, transparent);
  --liwen-lima-volumen: color-mix(in oklab, var(--liwen-lima) 88%, #5c7a00);
  --liwen-lima-suave: rgba(211, 254, 30, 0.7);
  --liwen-papel-velo: rgba(252, 251, 248, 0.62);
  --liwen-crema: #f3ead2;
  --liwen-crema-borde: rgba(120, 98, 20, 0.18);

  /* Tipografía (Figma). */
  --liwen-fuente: "Helvetica", Arial, sans-serif;
  --liwen-fuente-negrita: "Helvetica-Bold", "Helvetica", Arial, sans-serif;
  --liwen-fuente-legal: "Inter", "Helvetica", Arial, sans-serif;
  --liwen-texto-h1: 78.1px;
  --liwen-texto-h2: 56px;
  --liwen-texto-h2-interlineado: 67.34px;
  --liwen-texto-h2-tracking: -1.02px;
  --liwen-texto-intro: 21.17px;
  --liwen-texto-pretitulo: 19.24px;
  --liwen-texto-boton: 18.27px;
  --liwen-texto-pie: 13px;

  /* Escala móvil (JFP-2135), reducida desde la del Figma de escritorio. */
  --liwen-movil-h1: 34px;
  --liwen-movil-h1-interlineado: 1.05;
  --liwen-movil-h2: 28px;
  --liwen-movil-h2-interlineado: 1.15;
  --liwen-movil-h3: 22px;
  --liwen-movil-h3-interlineado: 1.2;

  /* Acabado (JFP-2134): radios, elevación, líneas, movimiento, espacio y capas. */
  --liwen-radio-xs: 10px;
  --liwen-radio-sm: 14px;
  --liwen-radio-md: 20px;
  --liwen-radio-lg: 28px;
  --liwen-radio-xl: 36px;
  --liwen-radio-pildora: 999px;
  --liwen-sombra-1: 0 1px 2px rgba(20, 20, 20, 0.04), 0 2px 8px rgba(20, 20, 20, 0.04);
  --liwen-sombra-2: 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 28px -8px rgba(20, 20, 20, 0.12);
  --liwen-sombra-3: 0 2px 6px rgba(20, 20, 20, 0.05), 0 24px 48px -16px rgba(20, 20, 20, 0.22);
  --liwen-sombra-lima: 0 8px 20px -8px rgba(150, 190, 0, 0.6);
  --liwen-sombra-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --liwen-sombra-tinta: inset 0 1px 0 rgba(246, 244, 239, 0.06), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
  --liwen-sombra-halo-lila: 0 48px 110px -46px color-mix(in oklab, var(--liwen-lila) 80%, transparent);
  --liwen-sombra-halo-lima: 0 34px 70px -40px rgba(98, 128, 0, 0.5);
  --liwen-sombra-boton-tinta: inset 0 1px 0 rgba(246, 244, 239, 0.08), 0 1px 2px rgba(21, 20, 26, 0.14), 0 10px 22px -12px rgba(21, 20, 26, 0.55);
  --liwen-sombra-sobre-foto: 0 1px 2px rgba(0, 0, 0, 0.16), 0 10px 24px -12px rgba(0, 0, 0, 0.5);
  --liwen-sombra-sobre-lila: 0 1px 2px rgba(77, 75, 96, 0.12), 0 10px 24px -12px rgba(77, 75, 96, 0.5);
  --liwen-sombra-sobre-lima: 0 1px 2px rgba(74, 96, 0, 0.12), 0 10px 24px -12px rgba(74, 96, 0, 0.45);
  --liwen-linea-suave: rgba(20, 20, 20, 0.08);
  --liwen-linea-media: rgba(20, 20, 20, 0.14);
  --liwen-linea-clara: rgba(255, 255, 255, 0.12);
  --liwen-linea-fuerte: rgba(20, 20, 20, 0.34);
  --liwen-linea-campo: rgba(20, 20, 20, 0.6);
  --liwen-mov-rapido: 180ms;
  --liwen-mov-base: 240ms;
  --liwen-mov-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --liwen-espacio-seccion: clamp(72px, 9vw, 136px);
  --liwen-espacio-contenedor: 1240px;
  --liwen-espacio-barra: 62px;
  --liwen-capa-contenido: 1;
  --liwen-capa-cabecera: 1020;
  --liwen-capa-desplegable: 1025;
  --liwen-capa-flotante: 1030;
  --liwen-capa-aviso: 1035;
  --liwen-capa-fondo-modal: 1050;
  --liwen-capa-modal: 1055;
  --liwen-capa-cookies: 999997;
}

/* Las dos variables del tema leen el token (custom.css las define en body). */
body {
  --jg-purple: var(--liwen-lila);
  --jg-purple-light: var(--liwen-lila);
  font-family: var(--liwen-fuente);
}

/* custom.css: «--jg-purple-light: var(--jg-purple-light)» es circular y deja la
   variable inválida dentro del formulario. */
#jg-formulario-inversor {
  --jg-purple-light: var(--liwen-lila);
}

/* ── Reglas de custom.css que escribían el lila a mano ─────────────────────── */

#jg-busqueda-blog {
  background-color: var(--liwen-lila);
}

.author-card {
  background-color: var(--liwen-lila);
}

#sobre-jg .custom-purple-text {
  color: var(--liwen-lila);
}

#propuesta-jg .bg-purple-dark {
  background-color: var(--liwen-lila) !important;
}

#jg-modelo .jg-card strong {
  color: var(--liwen-lila);
}

#sobre-jg .jg-equipo-nombre {
  color: var(--liwen-lila) !important;
}

#sobre-jg .jg-equipo-banner {
  background-color: var(--liwen-lila) !important;
}

#jg-tienes-dudas h2 {
  color: var(--liwen-lila);
}

.ticket-divider {
  border-top-color: var(--liwen-lila);
}

/* custom.css: «#a7a4d1d4», el lila con un 83 % de opacidad. */
.jg-box-v {
  background: color-mix(in srgb, var(--liwen-lila) 83%, transparent);
}

/* ── La portada no desborda en móvil (JFP-1403) ────────────────────────────────
   A 390 px la portada medía 432 de ancho: el navegador móvil ensancha el viewport
   de diseño hasta que cabe, y el banner de cookies —fijo a ese viewport— salía
   cortado por la derecha (los botones, el texto). Dos causas, las dos de custom.css:

   · «.fan-carousel { width: 420px }»: el abanico de «¿Por qué JG fitness?» no
     cabe en una pantalla de menos de 444 px. Nunca más ancho que su contenedor.

   · «#jg-centros .container { padding: 95px 0 }» quita el relleno lateral de un
     contenedor cuyas «.row» llevan margen negativo (-12 px) y se salen 12 px por
     cada lado; y el abanico gira sus tarjetas, que se asoman por el borde. En
     ninguna de las dos secciones, que ocupan todo el ancho, se ve nada fuera de la
     pantalla: «clip» recorta lo que sobra SIN crear scroll ni cambiar la maquetación
     (a diferencia de «hidden», que además convierte la sección en un contenedor
     de scroll).

   Lo vigila src/test/jfp1403-web-remates.test.ts, que mide la portada con un
   navegador a 320, 360, 390 y 430 px. */
.fan-carousel {
  max-width: 100%;
}

#jg-porque,
#jg-centros {
  overflow-x: clip;
}

/* ══ Rediseño fiel al Figma, escritorio (JFP-2134) ══════════════════════════════ */

/* ── Tipografía ──────────────────────────────────────────────────────────────────
   El Figma usa Helvetica en tres pesos: Light 300 (párrafos, pretítulos, textos de
   tarjeta, respuestas de la FAQ, enlaces del pie), Regular 400 y Bold 700. El tema
   solo trae la Regular y la Bold, y la Bold como una familia aparte
   («Helvetica-Bold»), así que «font-weight: 700» sobre «Helvetica» salía
   sintetizada y el 300 caía en la Regular.

   · Light: la del sistema («Helvetica Light»), que traen macOS e iOS —donde se
     revisa el diseño— sin servir ningún fichero (la licencia de los woff del tema
     sigue abierta, JFP-2133). Donde no la hay (Windows, Android) cae en la Regular
     del tema, como hasta ahora.
   · Bold: el woff de la negrita del tema, ahora también bajo «Helvetica». */
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Helvetica Light"), local("Helvetica-Light"), url("/wp-content/themes/jg-fitness/fonts/Helvetica.woff") format("woff");
}

@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/themes/jg-fitness/fonts/Helvetica-Bold.woff") format("woff");
}

/* Inter: legales (Medium 500) y copyright (Regular 400) del pie. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/cdn.jsdelivr.net/npm/@fontsource/inter@5.2.8/files/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/cdn.jsdelivr.net/npm/@fontsource/inter@5.2.8/files/inter-latin-500-normal.woff2") format("woff2");
}

/* El texto principal del Figma es #000, no el #212529 de Bootstrap. */
html body {
  --bs-body-color: var(--liwen-negro);
  color: var(--liwen-negro);
}

/* ── Cabecera (todas las páginas) ────────────────────────────────────────────────
   Figma: menú Regular 16 negro; buscar 48 × 48 #F5F7FA con radio 3; dos CTA lima
   de 160 × 48 y 181 × 48, radio 8, Bold 16 #141414 en una sola línea; 18 de buscar
   al primer CTA y 12 entre los dos. Con «Franquicias» y «Tienda» el menú tiene 8
   enlaces y no 6: a 1280 y a 1440 «Acerca de» y «Encuentra tu centro» se partían
   en dos líneas y la cabecera crecía a 153 px. Ahora no se parte nada. El menú es
   negro solo en las cabeceras claras (ver CAB_CLARA). */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
  color: var(--liwen-negro);
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle {
  background: var(--liwen-buscar) !important;
  border-radius: 3px;
}

@media (min-width: 1200px) {
  /* Solo aquí: entre 992 y 1199 el menú no cabe en una línea y, sin partirse,
     desbordaba la página 16 px más. */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
    white-space: nowrap;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-item {
    padding: 0 4px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 16px;
    line-height: 1.3;
    color: var(--liwen-cta-cabecera) !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button.me-2 {
    margin-right: 12px !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-wrapper {
    margin-right: 18px !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse.ps-xl-5 {
    padding-left: 32px !important;
  }
}

@media (min-width: 1400px) {
  /* Figma: la cabecera va de x 91 a 1352 (1261 de contenido; su centro está 1.5 px
     a la derecha del de la página). */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) > .container {
    max-width: 1285px;
    padding-left: 13.5px;
    padding-right: 10.5px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar {
    padding-bottom: 36px;
  }

  /* La línea base del menú, en y 61.5–62 (unos 2 px por debajo de la de los CTA):
     3 px más abajo dentro de la misma caja de 40, sin cambiar el alto de la cabecera. */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
    font-size: 16px;
    padding-top: 11px;
    padding-bottom: 5px;
  }

  /* 8 enlaces y no los 6 del Figma: 30 entre ellos en vez de 42, para que quepan. */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-item {
    padding: 0 7px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button {
    padding: 0 24px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button:not(.me-2) {
    padding: 0 15px;
  }

  /* El menú empieza en x 220. */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse.ps-xl-5 {
    padding-left: 33px !important;
  }

  /* Inicio: la foto del hero empieza en y 141. */
  #jg-header .cabecera {
    margin-top: 27px;
  }
}

/* ── Inicio · las medidas del Figma DENTRO de cada sección (1440) ────────────────
   77 del H2 de «¿Por qué?» a las tarjetas, 72 del de servicios a las suyas, 44 del de
   Centros (bloque lima) a las ciudades, 52.5 del de la FAQ a las preguntas y 57.5 de
   las ciudades a «Ver todos los centros» (botón que se quitó en JFP-2238). Del pretítulo al
   H2, 38.5 en todas.
   Los huecos ENTRE secciones del Figma (115, 153, 172, 172, 191: desiguales) ya no van
   aquí: los pone el ritmo S de la paleta (scripts/web-hoja-liwen-paleta.mjs, JFP-2134,
   17/10/2026), igual a 820, 1280 y 1440. */
@media (min-width: 1400px) {
  #jg-porque .jg-porque-titulo.pb-sm-5 {
    padding-bottom: 0 !important;
    margin-bottom: 69px !important;
  }

  section.jg-servicios:not(.single-centro-servicios) h2.jg-servicios-titulo {
    margin-bottom: 72px !important;
  }

  #jg-centros h2.jg-servicios-titulo {
    margin-bottom: 20.5px !important;
  }

  [id^="jg-faq"] h2.jg-servicios-titulo {
    margin-bottom: 52.8px !important;
  }
}

/* ── Ficha · las medidas del Figma DENTRO de cada sección (1440) ─────────────────
   El bloque del hero (migas, titular y botones) va 23 px por debajo del centro; la
   banda, 36.5 bajo el hero; 45 del H2 de servicios a las tarjetas y 44 del H2 de la
   FAQ a las preguntas. Los huecos ENTRE secciones del Figma (115 bajo la banda, 212.5
   hasta los testimonios, 177 y 178 alrededor de la caja de contacto) los pone ahora el
   ritmo S de la paleta (scripts/web-hoja-liwen-paleta.mjs, JFP-2134, 17/10/2026). */
@media (min-width: 1400px) {
  /* Sin el margen inferior de 45 del tema: se fundía con el de la banda y mandaba él. */
  .cabecera-centros.alcala-henares {
    padding-top: 45px;
    margin-bottom: 0;
  }

  #jg-entrenamiento-personal-header + .mt-5 {
    margin-top: 36.5px !important;
  }

  .single-centro-servicios h2.jg-servicios-titulo {
    margin-bottom: 45.3px !important;
  }

  body:has(.cabecera-centros) [id^="jg-faq"] h2.jg-servicios-titulo {
    margin-bottom: 44px !important;
  }
}

/* ── Pretítulos y H2 de sección ──────────────────────────────────────────────────
   Pretítulo: Light 19.24, interlineado 21.16, tracking 1.56, subrayado, negro.
   H2: Regular 56 / 67.34, tracking −1.02, negro. En la FAQ y el Blog, pretítulo y
   H2 van en #1A1A1A. «Centros JG fitness» (bloque lima) es la versión escalada:
   H2 52.69 / 63.37 / −0.96 y pretítulo 18.1 / 19.92 / 1.47. */
.jg-servicios-pret,
#jg-porque p.jg-servicios-pret {
  font-weight: 300;
  letter-spacing: 1.56px;
  color: var(--liwen-negro);
}

.jg-servicios-titulo,
.jg-porque-titulo h2,
#jg-galeria-centro h2 {
  color: var(--liwen-negro);
}

[id^="jg-faq"] .jg-servicios-pret,
[id^="jg-faq"] .jg-servicios-titulo,
#jg-articulos .jg-servicios-pret,
#jg-articulos h2.jg-servicios-titulo {
  color: var(--liwen-titulo);
}

@media (min-width: 1200px) {
  /* Del pretítulo al H2, 74.2 de línea base a línea base en todas las secciones
     (69.9 en la de Centros, con su H2 escalado). */
  .jg-servicios-pret,
  #jg-porque p.jg-servicios-pret {
    font-size: var(--liwen-texto-pretitulo);
    line-height: 21.16px;
    margin-bottom: 18.1px;
  }

  #jg-centros .jg-servicios-pret {
    font-size: 18.1px;
    line-height: 19.92px;
    letter-spacing: 1.47px;
    margin-bottom: 16px;
  }

  #jg-centros h2.jg-servicios-titulo {
    font-size: 52.69px;
    line-height: 63.37px;
    letter-spacing: -0.96px;
  }
}

/* ── Negritas dentro de un texto Light ───────────────────────────────────────────
   Bootstrap pinta «b» y «strong» con «font-weight: bolder», que sobre un 300 da un
   400: las frases en negrita de «¿Por qué?» salían en Regular. En el Figma son Bold
   (700), y lo mismo en cualquier texto que ahora es Light. */
:is(
  #jg-entrenamiento-personal .jg-box-v p,
  #jg-porque .jg-porque-lista-texto p,
  .jg-servicios .jg_frame-div p,
  .faq-accordion .accordion-body,
  .jg-servicios-pret,
  .custom-footer .footer-links,
  #jg-tienda header p.text-muted,
  #jgt-productos .card-text
) :is(b, strong) {
  font-weight: 700;
}

/* ── Inicio · bloque lila ────────────────────────────────────────────────────────
   Lo que señaló Yolanda: el titular va MÁS APRETADO y MÁS NEGRO (Bold 78.1, 85 %,
   tracking −9 %, #000; la web tenía −4 % y #212529) y el texto «Somos JG fitness…»
   MÁS CLARITO (Light 21.17, 120 %, −4 %). El botón secundario lleva borde y texto
   #303030 de 0.91 (en la web, negro de 2 px). Bloque de 1236 × 711 con radio 36.55
   y el lila al 74 %.
   Segunda vuelta (Antonio, 18/10/2026: «Ojo con los bordes sólidos de algunas div y
   botones, quedan feos»): los dos bordes se quedan con su ANCHO del Figma (1 y 0.91,
   para no mover ninguna medida) pero TRANSPARENTES; la capa la dan el brillo y la
   sombra (web-hoja-liwen-pulido.mjs). */
#jg-entrenamiento-personal .jg-box-v {
  background: color-mix(in srgb, var(--liwen-lila) 74%, transparent);
  border-radius: 36.55px;
}

#jg-entrenamiento-personal .jg-box-v h2 {
  letter-spacing: -0.09em;
  color: var(--liwen-negro);
}

#jg-entrenamiento-personal .jg-box-v p {
  font-weight: 300;
  color: var(--liwen-negro);
}

#jg-entrenamiento-personal .jg-box-v .btn-yellow {
  border: 1px solid transparent;
}

#jg-entrenamiento-personal .jg-box-v .btn-transparent {
  border: 0.91px solid transparent;
  color: var(--liwen-tinta);
}

@media (min-width: 1200px) {
  #jg-entrenamiento-personal .jg-box-v p {
    font-size: var(--liwen-texto-intro);
  }

  #jg-entrenamiento-personal .jg-box-v .btn {
    font-size: var(--liwen-texto-boton);
    line-height: 1;
    padding: 16.9px 36px;
  }

  #jg-entrenamiento-personal .jg-box-v .btn-transparent {
    margin-top: 13.8px !important;
  }
}

@media (min-width: 1400px) {
  #jg-entrenamiento-personal .jg-box-v {
    flex: 0 0 auto;
    width: 1236px;
    padding: 78px 109px 64px 74px;
  }

  #jg-entrenamiento-personal .jg-box-v h2 {
    margin-bottom: 36px !important;
  }

  /* La caja del texto, 470 como en el Figma: corta «…en todo / el proceso…». */
  #jg-entrenamiento-personal .jg-box-v p {
    max-width: 470px;
  }

  /* La foto (con sus etiquetas y sus marcos, que son parte de la imagen): 471 de
     ancho, del x 757 al 1228, y 7 por debajo del titular. La proporción de la
     imagen (1000 × 1192) reserva su alto antes de que cargue. */
  #jg-entrenamiento-personal .jg-box-v .img-fluid {
    display: block;
    width: 471px;
    aspect-ratio: 1000 / 1192;
    object-fit: contain;
    margin: 7px 0 0 auto;
  }
}

/* ── Inicio · ¿Por qué JG fitness? ───────────────────────────────────────────────
   Tarjetas de 430.3 × 152, radio 25.6, borde negro de 0.9; título Bold 17.71
   (−4 %) y texto Light 14.38 (120 %, −4 %); 7.5 entre tarjetas. A 1200 o más, el
   contenido centrado en vertical: las de dos o tres líneas no quedan pegadas arriba
   con un hueco de 60 px debajo (JFP-2291, revisión del 23/10; ya se veía en la versión
   tinta, y con las tarjetas claras se nota más). */
#jg-porque .jg-porque-lista {
  border: 0.9px solid var(--liwen-negro);
  border-radius: 25.6px;
}

#jg-porque .jg-porque-lista .jg-porque-titulo {
  color: var(--liwen-negro);
}

#jg-porque .jg-porque-lista-texto p {
  font-weight: 300;
  line-height: 1.2;
  color: var(--liwen-negro);
}

@media (min-width: 1200px) {
  #jg-porque .jg-porque-lista {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 152px;
    padding: 28.3px 38.4px;
    margin-bottom: 7.5px !important;
  }

  #jg-porque .jg-porque-lista .jg-porque-titulo {
    font-size: 17.71px;
    margin-bottom: 9.7px;
  }

  #jg-porque .jg-porque-lista-texto p {
    font-size: 14.38px;
  }
}

/* Figma: las tarjetas van de x 821.5 a 1251.8 (20.5 a la izquierda de su columna) y
   el texto empieza en 859.9. Cada caja de texto mide lo que en el Figma —302.18 la
   de la primera tarjeta y 338.04 la de las largas—, así que corta donde él: «…para
   que / cumplas tus objetivos…». Del título al texto, 27 de línea base a línea base. */
@media (min-width: 1400px) {
  #jg-porque .jg-porque-lista {
    max-width: 430.3px;
    margin-left: -20.5px;
    padding-left: 37.5px;
    padding-right: 0;
    /* Las de cuatro líneas también miden 152, como en el Figma. */
    padding-bottom: 24.3px;
  }

  #jg-porque .jg-porque-lista .jg-porque-titulo {
    margin-bottom: 11.3px;
  }

  #jg-porque .jg-porque-lista-texto p {
    max-width: 338.04px;
  }

  #jg-porque .jg-porque-lista:first-child .jg-porque-lista-texto p {
    max-width: 302.18px;
  }
}

/* ── Tarjetas de servicio (inicio y ficha) ───────────────────────────────────────
   Inicio: 281.9 × 463.1, radio 18.1, borde #98999A de 0.85; imagen 259 × 272 con
   radio 10.9; título Bold 16.78 (−4 %), texto Light 13.63 (120 %, −2 %) NEGRO
   —Yolanda: «el interlineado es más ancho»—; botón lima de 26.7 de alto, radio
   13.36, texto 9.15 #213D34, del ancho de su texto. Columnas a 17.8 y filas a 29:
   la segunda fila (4 tarjetas) va de 123.4 a 1304.6. */
.jg-servicios .jg-servicios-box {
  border: 0.85px solid var(--liwen-borde-tarjeta);
  border-radius: 18.1px;
}

.jg-servicios .jg-box-servicios-titulo {
  letter-spacing: -0.04em;
  color: var(--liwen-negro);
}

.jg-servicios .jg_frame-div p,
.jg-servicios .jg_frame-div p.new-text {
  font-weight: 300;
  line-height: 1.2;
  color: var(--liwen-negro) !important;
}

.jg-servicios .jg-button {
  color: var(--liwen-boton-servicio);
}

@media (min-width: 1200px) {
  .jg-servicios .jg-servicios-box {
    padding: 8.6px 11.5px 17.3px;
  }

  .jg-servicios .jg-servicios-box img.locofy_stat-backgrounds-icon {
    aspect-ratio: 259 / 272;
    height: auto;
    border-radius: 10.9px;
  }

  .jg-servicios .jg_frame-div {
    padding: 19.75px 4.9px 0;
  }

  .jg-servicios .jg-box-servicios-titulo {
    font-size: 16.78px;
    margin-bottom: 4.5px;
  }

  .jg-servicios .jg_frame-div p,
  .jg-servicios .jg_frame-div p.new-text {
    font-size: 13.63px;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }

  /* A 1280 la tarjeta es más estrecha que en el Figma y el texto más largo
     («Ver servicio de Entrenamiento personal») puede necesitar dos líneas. */
  .jg-servicios .jg-button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto !important;
    min-height: 26.7px;
    padding: 2px 16.5px;
    border-radius: 13.36px;
    font-size: 9.15px;
    line-height: 11.65px;
  }

  .jg-servicios .jg-button .locofy_span {
    flex-shrink: 0;
  }
}

@media (min-width: 1400px) {
  .jg-servicios .jg-button {
    white-space: nowrap;
  }

  .jg-servicios:not(.single-centro-servicios) .col-xl-11 > .row {
    --bs-gutter-x: 17.8px;
    --bs-gutter-y: 29px;
  }

  .jg-servicios:not(.single-centro-servicios) .col-xl-11 > .row > .col-lg-3 {
    flex: 0 0 auto;
    width: 299.7px;
  }

  .jg-servicios:not(.single-centro-servicios) .jg-servicios-box {
    min-height: 463.1px;
  }
}

/* Ficha: 304 × 412, radio 19.4, borde de 0.92; imagen 279 × 254 con radio 12.8;
   título Bold 18.11, texto Light 13.77 (−4 %); «Ver servicios» 128 × 33 en
   píldora, texto 11.09 #1C1A1A. Cuatro tarjetas a 37: de x 57.5 a 1383.5, algo
   más anchas que el contenedor. */
.single-centro-servicios .jg-servicios-box {
  border-width: 0.92px;
  border-radius: 19.4px;
}

.single-centro-servicios .jg-button {
  color: var(--liwen-oscuro);
}

@media (min-width: 1200px) {
  .single-centro-servicios .jg-servicios-box {
    padding: 9.5px 12.5px 17px;
  }

  .single-centro-servicios .jg-servicios-box img.locofy_stat-backgrounds-icon {
    aspect-ratio: 279 / 254;
    border-radius: 12.8px;
  }

  .single-centro-servicios .jg_frame-div h3.jg-box-servicios-titulo {
    font-size: 18.11px;
  }

  .single-centro-servicios .jg_frame-div p.jg-box-servicios-descripcion {
    font-size: 13.77px;
    letter-spacing: -0.04em;
  }

  .single-centro-servicios .jg-button {
    min-height: 33px;
    padding: 0 25.5px;
    border-radius: 16.5px;
    font-size: 11.09px;
    line-height: 14.11px;
  }
}

@media (min-width: 1400px) {
  .single-centro-servicios .col-xl-11 {
    flex: 0 0 auto;
    width: 1363px;
    max-width: none;
  }

  .single-centro-servicios .col-xl-11 > .row {
    --bs-gutter-x: 37px;
  }

  .single-centro-servicios .col-xl-11 > .row > .col-lg-3 {
    flex: 0 0 auto;
    width: 341px;
  }
}

/* ── Inicio · Centros JG fitness (bloque lima) ───────────────────────────────────
   Bloque de 1312 con radio 36.55 y 90 / 89 de relleno; tarjetas de ciudad de
   278.9 × 313.4 (imagen 279 × 209) con borde negro de 1.41 y 18.2 entre ellas;
   título Bold 22.71 (−3 %); «Ver Centros» Regular 10.39 #1C1A1A. (El botón «Ver todos los
   centros», en píldora de 295 × 51, se quitó en JFP-2238 y sus reglas con él.) */
#jg-centros > .container {
  border-radius: 36.55px;
}

#jg-centros .jg-centros-box {
  border-width: 1.41px;
}

#jg-centros .jg-centros-city h3 {
  font-weight: 700;
  color: var(--liwen-negro);
}

#jg-centros .jg_ver-centros {
  font-weight: 400;
  color: var(--liwen-oscuro);
}

/* Dentro de la tarjeta (Figma, «Tomato»): título a 17.03 del borde con la línea base
   a 240.4 de arriba; «Ver Centros» en una píldora de 32.17 de alto que empieza a
   257.33, con el texto a 16.2 de su borde (33.24 del de la tarjeta) y la línea base
   a 276.9; la tarjeta mide 313.44. */
@media (min-width: 1200px) {
  #jg-centros .jg-centros-city {
    padding: 10px 17px 22.3px 16px;
  }

  #jg-centros .jg-centros-city h3 {
    font-size: 22.71px;
    margin-bottom: 10px !important;
  }

  #jg-centros .jg_ver-centros {
    display: inline-block;
    height: 32.17px;
    padding: 0 15px 0 16.2px;
    font-size: 10.39px;
    line-height: 32.17px;
  }

  #jg-centros .jg-centros-box > img {
    width: 100%;
    aspect-ratio: 279 / 209;
    height: auto;
    object-fit: cover;
  }
}

@media (min-width: 1400px) {
  #jg-centros > .container {
    max-width: 1312px;
    padding: 90px 0 89px;
  }

  #jg-centros .col-11 > .row.g-3 {
    --bs-gutter-x: 18.2px;
  }

  #jg-centros .col-11 > .row.g-3 > .col-lg-3 {
    flex: 0 0 auto;
    width: 297.1px;
  }
}

/* ── Preguntas frecuentes (inicio y ficha) ───────────────────────────────────────
   Cerrada: 600 × 88.9 (ficha 611.5 × 90.9), radio 21.3, borde #303030 de 0.91 y
   sin relleno. Abierta: fondo #ECECEC y sin borde. Pregunta Bold 19.32 (−4 %)
   #303030, respuesta Light 15.69 (120 %, −4 %) #303030. Columnas a 37.5. */
.faq-accordion .accordion-item {
  border: 0.91px solid var(--liwen-tinta);
  border-radius: 21.3px !important;
  background: transparent;
}

.faq-accordion .accordion-item:has(.accordion-collapse.show),
.faq-accordion .accordion-item:has(.accordion-collapse.collapsing) {
  background: var(--liwen-faq-abierta);
  border-color: transparent;
}

.faq-accordion .accordion-button,
.faq-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--liwen-tinta);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.14;
}

.faq-accordion .accordion-body,
.faq-accordion .accordion-body p {
  color: var(--liwen-tinta);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

@media (min-width: 992px) {
  /* 88.9 de tarjeta, borde incluido. */
  .faq-accordion .accordion-button {
    min-height: 87px;
    padding: 12px 26.7px 12px 45px;
    font-size: 19.32px;
  }

  .faq-accordion .accordion-button:not(.collapsed) {
    padding-top: 34px;
    padding-bottom: 17.6px;
  }

  .faq-accordion .accordion-body {
    padding: 0 45px 28px;
  }

  .faq-accordion .accordion-body,
  .faq-accordion .accordion-body p {
    font-size: 15.69px;
  }
}

@media (min-width: 1400px) {
  #faqAccordionLeft {
    max-width: 600px;
    margin: 0 6.75px 0 auto;
  }

  #faqAccordionright {
    max-width: 600px;
    margin: 0 auto 0 6.75px;
  }

  body:has(.cabecera-centros) #faqAccordionLeft,
  body:has(.cabecera-centros) #faqAccordionright {
    max-width: 611.5px;
  }

  body:has(.cabecera-centros) .faq-accordion .accordion-button {
    min-height: 89px;
    font-size: 19.7px;
  }
}

/* ── Pie ──────────────────────────────────────────────────────────────────────────
   Figma: fondo #1C1A1A de 550; Helvetica (el tema lo tenía en system-ui, que es
   otra letra en cada sistema); títulos Bold 15 / 22.4; enlaces Light 13 (120 %,
   −2 %) en blanco, uno cada 27 de línea base a línea base y el primero a 39.8 de la
   del título; descripción Regular 12 / 18 en blanco; legales en Inter Medium 12 y
   copyright en Inter Regular 12, en blanco.

   A todos los anchos, solo la letra y el color. Las medidas van en escritorio: en
   un iPhone (390) los legales con el hueco de 35 pasaban de 3 + 1 a 2 + 2 y el botón
   flotante de WhatsApp tapaba «Condiciones de Contratación». */
.custom-footer {
  background-color: var(--liwen-oscuro);
  font-family: var(--liwen-fuente);
}

.custom-footer .footer-title {
  font-family: var(--liwen-fuente);
  font-weight: 700;
  color: var(--liwen-blanco);
}

.custom-footer .footer-links a {
  color: var(--liwen-blanco);
  font-size: var(--liwen-texto-pie);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.custom-footer .footer-links a.link-highlight {
  font-weight: 700;
}

.custom-footer .footer-description {
  color: var(--liwen-blanco);
}

.custom-footer .footer-copyright {
  font-family: var(--liwen-fuente-legal);
  font-weight: 400;
  color: var(--liwen-blanco);
}

.custom-footer .footer-legal-links a {
  font-family: var(--liwen-fuente-legal);
  font-weight: 500;
  color: var(--liwen-blanco);
}

@media (min-width: 1200px) {
  .custom-footer {
    padding-top: 38px;
    padding-bottom: 47px;
  }

  .custom-footer .footer-title {
    font-size: 15px;
    line-height: 22.4px;
    margin-bottom: 21px;
  }

  /* La caja de la línea es la del enlace (13 / 15.6): con el 16 / 24 que heredaba
     del pie, iban uno cada 35.4 y no cada 27. */
  .custom-footer .footer-links li {
    font-size: var(--liwen-texto-pie);
    line-height: 15.6px;
    margin-bottom: 11.4px;
  }

  .custom-footer .footer-description {
    font-size: 12px;
    line-height: 18px;
    max-width: 243px;
  }

  .custom-footer .footer-copyright {
    font-size: 12px;
    line-height: 16.8px;
  }

  .custom-footer .footer-legal-links {
    column-gap: 35px;
  }

  .custom-footer .footer-legal-links a {
    font-size: 12px;
    line-height: 27px;
  }

  .custom-footer .footer-logo {
    width: 102px;
    margin: 19px 0 28px;
  }
}

@media (min-width: 1400px) {
  /* Columnas en x 95 (logo), 715, 963 y 1177; contenido de 95 a 1342. */
  .custom-footer > .container {
    max-width: 1271px;
  }

  .custom-footer .row.g-4 > :nth-child(1) {
    flex: 0 0 auto;
    width: 620px;
  }

  .custom-footer .row.g-4 > :nth-child(2) {
    flex: 0 0 auto;
    width: 248px;
    margin-left: 0;
  }

  .custom-footer .row.g-4 > :nth-child(3) {
    flex: 0 0 auto;
    width: 214px;
  }

  .custom-footer .row.g-4 > :nth-child(4) {
    flex: 0 0 auto;
    width: 188px;
  }

  /* El pie mide 550; la línea base de los legales, a 488.9 del borde de arriba, y
     la del copyright 14.6 más abajo (en el Figma no van a la misma altura: se baja
     sin mover la fila). */
  .custom-footer {
    padding-bottom: 52.1px;
  }

  .custom-footer .footer-bottom-divider {
    margin-bottom: 200.6px;
  }

  .custom-footer .footer-copyright {
    position: relative;
    top: 14.6px;
  }
}

/* ── Ficha de centro · hero ──────────────────────────────────────────────────────
   Figma: hero de 591 con 32 de margen lateral y radio 46, en y 114; migas Bold
   14.08 / 17.61 (−0.35) con el separador en lima; titular Bold 78.1 (85 %, −7 %);
   botones de 32 de alto en píldora (radio 16), borde negro de 0.56, icono de 18 a
   37 del borde y texto 11.3. */
.cabecera-centros #breadcrumbs {
  font-weight: 700;
  letter-spacing: -0.35px;
}

#breadcrumbs .bi-chevron-right {
  color: var(--liwen-lima);
}

.cabecera-centros h1 {
  letter-spacing: -0.07em;
}

.cabecera-centros .btn-lille {
  border-width: 0.56px;
}

@media (min-width: 1200px) {
  .cabecera-centros #breadcrumbs {
    font-size: 14.08px;
    line-height: 17.61px;
    margin-bottom: 13px;
  }

  #breadcrumbs .bi-chevron-right {
    font-size: 9px;
    padding: 0 12px;
    top: -1px;
  }

  .cabecera-centros h1 {
    margin-bottom: 0;
  }

  .cabecera-centros .btn-lille {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 30px 0 37px;
    border-radius: 16px;
    font-size: 11.3px;
    line-height: 13.38px;
    margin: 37px 4.5px 0 !important;
  }

  .cabecera-centros .btn-lille > span {
    display: inline-flex;
    margin-right: 9px !important;
  }

  .cabecera-centros .btn-lille img {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 1400px) {
  .cabecera-centros {
    margin: 0 32px 45px;
    border-radius: 46px;
  }

  .cabecera-centros h1 {
    font-size: var(--liwen-texto-h1);
  }
}

/* ── Ficha · testimonios ─────────────────────────────────────────────────────────
   Borde #EDEDED de 2.24 sin radio; texto Regular 17.92 / 26.88 #797979; nombre
   Bold 15.68 #453232 y rol Regular 13.44 #797979. */
.jg-slider-item .jg-card {
  border: 2.24px solid var(--liwen-borde-testimonio);
  border-radius: 0;
}

.jg-slider-item .jg-comment-text {
  color: var(--liwen-testimonio);
}

.jg-slider-item .jg-user-name {
  font-weight: 700;
  color: var(--liwen-nombre-testimonio);
}

.jg-slider-item .jg-user-role {
  color: var(--liwen-testimonio);
}

@media (min-width: 1200px) {
  .jg-slider-item .jg-comment-text {
    font-size: 17.92px;
    line-height: 26.88px;
  }

  .jg-slider-item .jg-user-name {
    font-size: 15.68px;
  }

  .jg-slider-item .jg-user-role {
    font-size: 13.44px;
  }
}

/* ── Ficha · caja de contacto ────────────────────────────────────────────────────
   Caja lima de 1310 con radio 19 y 108 de relleno lateral; etiquetas Regular 16 /
   28; campos de 555 × 56 (área de texto, 189) con borde negro de 1 y radio 13.5,
   texto 18 y placeholder #898989; un campo cada 105; Enviar 556 × 68, radio 14,
   #191A23, Regular 20 blanco; «O contacta directamente:» Regular 20 / 28 negro,
   con su línea base a 100.9 bajo Enviar; imagen de 490 × 758 con radio 19, a la
   altura del primer campo. Del rótulo (línea base) a su campo, 14. */
.jg-form-container {
  border-radius: 19px;
  box-shadow: none;
}

.jg-form-container .form-label {
  font-weight: 400 !important;
  color: var(--liwen-negro) !important;
}

.jg-form-container .jg-input {
  border: 1px solid var(--liwen-negro);
  color: var(--liwen-negro);
}

.jg-form-container .jg-input::placeholder {
  color: var(--liwen-placeholder);
}

.jg-form-container .jg-btn-submit {
  background-color: var(--liwen-enviar);
  font-weight: 400 !important;
  letter-spacing: 0;
}

.jg-direct-contact span,
.jg-direct-contact a {
  font-weight: 400 !important;
  color: var(--liwen-negro) !important;
}

.jg-form-img-wrapper {
  border-radius: 19px;
  box-shadow: none;
}

/* El enlace a la política de privacidad, en el negro del texto y no en el azul de Bootstrap. */
.jg-form-container form a {
  color: var(--liwen-negro);
}

@media (min-width: 1200px) {
  .jg-form-container .form-label {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 4.3px !important;
  }

  .jg-form-container form > .mb-4 {
    margin-bottom: 16.7px !important;
  }

  .jg-form-container .jg-input {
    height: 56px;
    padding: 0 29px;
    border-radius: 13.5px;
    font-size: 18px;
  }

  .jg-form-container textarea.jg-input {
    height: 189px;
    padding-top: 16px;
  }

  .jg-form-container .jg-btn-submit {
    height: 68px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 14px;
    font-size: 20px;
  }

  .jg-direct-contact {
    font-size: 20px;
    line-height: 28px;
    justify-content: flex-start;
    column-gap: 34px !important;
  }
}

@media (min-width: 1400px) {
  .jg-form-container {
    margin: 0 -7px;
    /* El borde de abajo, a 68.1 de la línea base de «O contacta directamente:». */
    padding: 77px 108px 60.1px !important;
  }

  .jg-form-container .col-lg-5:not(.d-flex) {
    flex: 0 0 auto;
    width: 603px;
    max-width: none;
  }

  .jg-form-container .col-lg-5.d-flex {
    flex: 0 0 auto;
    width: 538px;
    max-width: none;
    padding-top: 48.3px;
  }

  /* La foto arriba, a la altura del primer campo, y no centrada con el formulario. */
  .jg-form-container .row.align-items-center {
    align-items: flex-start !important;
  }

  .jg-form-container .jg-direct-contact {
    margin-top: 80.9px !important;
  }
}

/* ── Tienda ───────────────────────────────────────────────────────────────────────
   El Figma no tiene tienda: se viste con las piezas del propio Figma. Título como
   los H2 de sección; subtítulo como el texto del bloque lila; producto como la
   tarjeta de servicio; filtros como la paginación de los carruseles (píldora, la
   activa en lima); «Añadir al carrito» como «Pagar» del evento (píldora lima). Solo
   estilo: dónde va y con cuánto protagonismo es una propuesta aparte.
   Segunda vuelta (Antonio, 18/10/2026: «Ojo con los bordes sólidos de algunas div y
   botones, quedan feos»): sin los contornos #1C1A1A y negros; filtros y tallas, en
   reposo, con la línea fina del sistema, y «Añadir» sin raya. Su piel, las sombras y la
   hoja del carrito están en web-hoja-liwen-pulido.mjs; el carrito es el botón flotante
   de la derecha (web-hoja-liwen-acabado.mjs). */
#jg-tienda h1 {
  font-family: var(--liwen-fuente);
  font-weight: 400;
  letter-spacing: var(--liwen-texto-h2-tracking);
  color: var(--liwen-negro);
}

#jg-tienda header p.text-muted {
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--liwen-negro) !important;
}

#jgt-filtros .btn {
  border: 1px solid var(--liwen-linea-suave);
  border-radius: 20.4px;
  background: transparent;
  color: var(--liwen-negro);
}

#jgt-filtros .btn.btn-dark {
  background: var(--liwen-lima);
}

#jgt-productos .card {
  border: 0.85px solid var(--liwen-borde-tarjeta) !important;
  border-radius: 18.1px;
}

#jgt-productos .card-img-top {
  border-radius: 10.9px;
}

#jgt-productos .card-title {
  font-family: var(--liwen-fuente);
  font-weight: 700;
  font-size: 16.78px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--liwen-negro);
}

#jgt-productos .card-text {
  font-weight: 300;
  font-size: 13.63px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--liwen-negro) !important;
}

#jgt-productos p.h5 {
  font-weight: 400;
  font-size: var(--liwen-texto-boton);
  color: var(--liwen-oscuro);
}

#jgt-productos [data-tallas] .btn {
  border-color: var(--liwen-linea-suave);
  color: var(--liwen-negro);
}

#jgt-productos [data-tallas] .btn.btn-dark,
#jgt-productos [data-anadir].btn-dark {
  background: var(--liwen-lima);
  border-color: transparent;
  color: var(--liwen-negro);
}

#jgt-productos [data-anadir] {
  border: 1px solid transparent;
  border-radius: 28.5px !important;
  font-weight: 400 !important;
}

#jgt-productos .btn-outline-secondary.w-100 {
  border-radius: 28.5px;
}

@media (min-width: 1200px) {
  #jgt-filtros .btn {
    padding: 6px 18px;
  }

  #jgt-productos .card {
    padding: 8.6px 11.5px 17.3px;
  }

  #jgt-productos .card-body {
    padding: 19.75px 4.9px 0;
  }

  #jg-tienda h1 {
    font-size: var(--liwen-texto-h2);
    line-height: var(--liwen-texto-h2-interlineado);
  }

  #jg-tienda header p.text-muted {
    font-size: var(--liwen-texto-intro);
  }
}

/* ══ Acabado «web de 2027» (JFP-2134, 17/10/2026) ══════════════════════════════
   Antonio: «capas cuidadas, bordes menos cantosos, que sea bonita». Manda sobre el
   Figma en radios, sombras y profundidad; textos, páginas y colores de marca, igual.
   Todo sale de los tokens de :root (radio, sombra, línea, movimiento, espacio, capa).

   ESCALA DE CAPAS (z-index), de abajo arriba — no se usa un número suelto:
     --liwen-capa-contenido    1       velos y tarjetas elevadas dentro de su sección
     --liwen-capa-cabecera     1020    la barra fija del menú
     --liwen-capa-desplegable  1025    el buscador que se abre en la cabecera
     --liwen-capa-flotante     1030    el botón flotante: WhatsApp, o el carrito en la tienda
     --liwen-capa-aviso        1035    el aviso de ayuda por WhatsApp, encima del flotante (JFP-2241)
     --liwen-capa-fondo-modal  1050    el velo de un modal de Bootstrap
     --liwen-capa-modal        1055    el modal
     --liwen-capa-cookies      999997  el banner de cookies: el consentimiento, encima de todo */

a.jg-wa-flotante {
  z-index: var(--liwen-capa-flotante);
  box-shadow: 0 2px 6px rgba(20, 20, 20, 0.12), 0 14px 30px -10px rgba(18, 140, 70, 0.55);
}

/* Al pasar el ratón y al pulsarlo (:focus), la misma sombra: el bloque en línea de cada
   página pone la suya en «:hover,:focus» y, sin el :focus aquí, al hacer clic salía la
   gris del bloque en vez de esta. Con el teclado manda el foco de la casa. */
a.jg-wa-flotante:is(:hover, :focus) {
  box-shadow: 0 4px 10px rgba(20, 20, 20, 0.14), 0 20px 40px -12px rgba(18, 140, 70, 0.6);
}

/* ── Los dos botones flotantes: WhatsApp (derecha) y cookies (izquierda) ──────────
   Antonio (17/10/2026): «El speeddial del wassap no está a la misma altura que el de
   las cookies y se mueve. Debe estar a la misma altura y no se debe de mover.» El
   distintivo que deja Cookie-Script al aceptar iba a 10 px y medía 46 (36 en móvil);
   el de WhatsApp, a 18 y 56. Ahora los dos son el mismo círculo, con el mismo
   margen a su borde (FLOTANTE, en scripts/web-flotante-whatsapp.mjs, que también da la
   medida del botón en cada página): mismo suelo, mismo alto y mismo centro.
   QUIETOS: sin lvh/dvh (saltaban con la barra del navegador del móvil) y sin escala ni
   desplazamiento; al pasar el ratón o al enfocar solo cambia la sombra. Del distintivo
   se anulan las transiciones del proveedor (500 ms en todo) y el texto que se
   desplegaba al pasar el ratón y lo ensanchaba: la etiqueta «Configuración de cookies»
   sigue en el <title> del icono (la que enseña el navegador). El lector de pantalla
   lee el aria-label que pone el proveedor, «Cookie consent button», en inglés: es
   suyo y la hoja no lo cambia. */
html body :is(a.jg-wa-flotante, button.jg-carrito-flotante, #cookiescript_badge) {
  position: fixed;
  top: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  z-index: var(--liwen-capa-flotante);
  transition: box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html body :is(a.jg-wa-flotante, button.jg-carrito-flotante) {
  right: calc(18px + env(safe-area-inset-right, 0px));
  left: auto;
}

html body #cookiescript_badge {
  right: auto;
  left: calc(18px + env(safe-area-inset-left, 0px));
  line-height: 0;
  border: 1px solid var(--liwen-linea-suave);
  background: var(--liwen-blanco);
  box-shadow: var(--liwen-sombra-2);
  /* Sin el parpadeo de entrada: Cookie-Script lo inserta opaco y, 200 ms después, lo
     funde desde 0 con un style.opacity en línea (unos 470 ms en cada carga de página,
     al lado de un WhatsApp quieto). El !important gana a ese estilo en línea y el
     distintivo sale ya quieto; para quitarlo, el proveedor sigue usando display. */
  opacity: 1 !important;
}

html body #cookiescript_badge:hover {
  box-shadow: var(--liwen-sombra-3);
}

html body #cookiescript_badge :is(#cookiescript_badgeimage, #cookiescript_badgesvg) {
  width: 30px;
  height: 30px;
}

html body #cookiescript_badge #cookiescript_badgetext,
html body #cookiescript_badge:hover #cookiescript_badgetext {
  max-width: 0;
  padding: 0;
}

/* En la tienda, el botón de la derecha es el CARRITO (Antonio, 18/10/2026: «En la
   tienda, el carrito debe ser un speeddial que sustituya al del WhatsApp de la
   derecha»). La forma y la quietud son las de arriba, compartidas con el WhatsApp y las
   cookies; aquí, su piel: un círculo de tinta con el icono en papel y la cifra en una
   insignia lima con un aro de papel. La lima se queda para la acción («Añadir al
   carrito») y para la insignia: un círculo lima competiría con «Añadir» y se fundiría
   con la lima de la cabecera. Como el WhatsApp, al pasar el ratón o al enfocar solo
   cambia la sombra (las del flotante, con un filo de papel que lo despega del papel). */
html body button.jg-carrito-flotante {
  z-index: var(--liwen-capa-flotante);
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--liwen-tinta950);
  color: var(--liwen-papel) !important;
  -webkit-tap-highlight-color: transparent;
  /* El filo de papel (al 30 %) es lo que lo separa del pie, que también es tinta. */
  box-shadow: 0 0 0 1px rgba(246, 244, 239, 0.3), inset 0 1px 0 rgba(246, 244, 239, 0.1), 0 2px 6px rgba(20, 20, 20, 0.14), 0 14px 30px -10px rgba(20, 20, 20, 0.5);
}

html body button.jg-carrito-flotante:is(:hover, :focus) {
  box-shadow: 0 0 0 1px rgba(246, 244, 239, 0.36), inset 0 1px 0 rgba(246, 244, 239, 0.12), 0 4px 10px rgba(20, 20, 20, 0.16), 0 20px 40px -12px rgba(20, 20, 20, 0.56);
}

/* Foco con el teclado: su propio anillo doble (papel y tinta), que se ve sobre el papel
   y sobre el pie de tinta, sin depender del foco global del acabado. */
html body button.jg-carrito-flotante:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--liwen-papel), 0 0 0 5px var(--liwen-tinta950), 0 4px 10px rgba(20, 20, 20, 0.16), 0 20px 40px -12px rgba(20, 20, 20, 0.56);
}

html body button.jg-carrito-flotante svg {
  width: 26px;
  height: 26px;
  margin-top: -1px;
}

html body .jg-carrito-flotante .jg-carrito-insignia {
  position: absolute;
  top: -4px;
  right: -4px;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
  font-family: var(--liwen-fuente);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--liwen-papel), 0 2px 6px rgba(20, 20, 20, 0.2);
  pointer-events: none;
}

@media (max-width: 575.98px) {
  html body :is(a.jg-wa-flotante, button.jg-carrito-flotante, #cookiescript_badge) {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }

  html body :is(a.jg-wa-flotante, button.jg-carrito-flotante) {
    right: calc(14px + env(safe-area-inset-right, 0px));
  }

  html body #cookiescript_badge {
    left: calc(14px + env(safe-area-inset-left, 0px));
  }
}

/* ── El aviso de ayuda por WhatsApp (JFP-2241, 20/10/2026) ────────────────────────
   Lo crea public/web/liwen.js a los 150 s de navegación (ver scripts/web-hoja-liwen-ayuda.mjs).
   Una tarjeta blanca sobre el botón flotante de WhatsApp, en su misma columna y sin tocarlo:
   su suelo queda 12 px por encima del techo del flotante, en escritorio y en móvil. En
   la capa «aviso» de la escala: por encima del flotante y por debajo de los modales y de las
   cookies. El texto y el botón, sobre tinta; el icono, en el verde de WhatsApp. */
html body .jg-ayuda-wa {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: var(--liwen-capa-aviso);
  box-sizing: border-box;
  width: 304px;
  max-width: calc(100vw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  margin: 0;
  padding: 20px 20px 20px 22px;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-md);
  background: var(--liwen-blanco);
  color: var(--liwen-tinta950);
  font-family: var(--liwen-fuente);
  box-shadow: var(--liwen-sombra-3);
  animation: jg-ayuda-wa-entra var(--liwen-mov-base) var(--liwen-mov-curva) both;
}

@keyframes jg-ayuda-wa-entra {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html body .jg-ayuda-wa .jg-ayuda-wa__titulo {
  margin: 0 36px 14px 0;
  color: var(--liwen-tinta950);
  font-family: var(--liwen-fuente-negrita);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

html body .jg-ayuda-wa a.jg-ayuda-wa__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-tinta950);
  color: var(--liwen-papel);
  font-family: var(--liwen-fuente);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--liwen-sombra-boton-tinta);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html body .jg-ayuda-wa a.jg-ayuda-wa__boton:is(:hover, :focus-visible) {
  background: var(--liwen-tinta800);
  color: var(--liwen-papel);
  text-decoration: none;
}

html body .jg-ayuda-wa a.jg-ayuda-wa__boton svg {
  flex: none;
  color: #25d366;
}

html body .jg-ayuda-wa button.jg-ayuda-wa__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--liwen-radio-pildora);
  background: transparent;
  color: var(--liwen-tinta600);
  cursor: pointer;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html body .jg-ayuda-wa button.jg-ayuda-wa__cerrar:hover {
  background: var(--liwen-linea-suave);
  color: var(--liwen-tinta950);
}

@media (max-width: 575.98px) {
  html body .jg-ayuda-wa {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .jg-ayuda-wa {
    animation: none;
  }

  html body .jg-ayuda-wa a.jg-ayuda-wa__boton,
  html body .jg-ayuda-wa button.jg-ayuda-wa__cerrar {
    transition: none;
  }
}

/* Con el menú plegado abierto (por debajo de 992) el panel llega hasta el borde de
   abajo y los flotantes tapaban sus botones: «Encuentra tu centro» en el iPhone 14 y
   «¿Empezamos?» en el iPhone SE (revisión 3, 17/10/2026). Mientras el menú está
   abierto se apagan EN SU SITIO —ni se mueven ni cambian de tamaño, solo dejan de verse
   y de recibir toques— y vuelven al cerrarlo. Subirlos por encima de la cabecera
   cambiaría la escala de CAPAS. */
html body:has(.navbar-collapse:is(.show, .collapsing)) :is(a.jg-wa-flotante, button.jg-carrito-flotante, #cookiescript_badge, .jg-ayuda-wa) {
  opacity: 0 !important;
  pointer-events: none;
}

/* El buscador recorta lo que abre (overflow: hidden, para crecer de 0 a 320 px): con
   el radio de su campo, el recorte sigue la píldora y no asoman esquinas. */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-form {
  z-index: var(--liwen-capa-desplegable);
  border-radius: var(--liwen-radio-pildora);
}

.modal-backdrop {
  --bs-backdrop-zindex: var(--liwen-capa-fondo-modal);
}

.modal {
  --bs-modal-zindex: var(--liwen-capa-modal);
}

/* ── Banner de cookies ───────────────────────────────────────────────────────────
   Cookie-Script lo pintaba como una tarjeta de 300 × 568 a la izquierda, el 71 % del
   alto de la pantalla, tapando el titular y el botón del héroe en 12 de 13 páginas;
   con «ACEPTAR TODO» en un verde petróleo fuera de marca y una sombra dura. Ahora es
   una lámina translúcida: en escritorio y tableta, una barra baja y ancha, centrada,
   que hasta unos 1400 px va por ENCIMA del botón de WhatsApp mientras se decide (ver
   más abajo); en el móvil, una hoja inferior. Las casillas
   siguen a la vista (en píldoras), y «Rechazar todo» igual de grande que «Aceptar». */
html body #cookiescript_injected {
  z-index: var(--liwen-capa-cookies) !important;
  box-sizing: border-box;
  top: auto !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 18px 18px 14px !important;
  border: 1px solid var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-lg) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: var(--liwen-sombra-3) !important;
  color: var(--liwen-cta-cabecera) !important;
  font-family: var(--liwen-fuente) !important;
}

html body #cookiescript_injected :is(#cookiescript_header, #cookiescript_description, #cookiescript_description span, #cookiescript_readmore, .cookiescript_checkbox_text, #cookiescript_accept, #cookiescript_reject, #cookiescript_save, #cookiescript_manage, #cookiescript_manage span) {
  font-family: var(--liwen-fuente) !important;
}

html body #cookiescript_injected #cookiescript_header {
  margin: 0 0 6px !important;
  padding: 0 40px 0 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--liwen-cta-cabecera) !important;
}

html body #cookiescript_injected #cookiescript_description,
html body #cookiescript_injected #cookiescript_description span {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--liwen-tinta500) !important;
}

/* El enlace de la descripción, sin subrayado (Antonio, 17/10/2026): en negro y en 600,
   frente a la descripción en tinta 500 (3,4:1), y con una píldora lima al pasar el
   ratón (la regla de los enlaces dentro de un texto, en la paleta). */
html body #cookiescript_injected #cookiescript_readmore {
  color: var(--liwen-negro) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

html body #cookiescript_injected .cookiescript_pre_header {
  top: 12px !important;
  right: 12px !important;
}

html body #cookiescript_injected #cookiescript_close {
  width: 32px;
  height: 32px;
  border-radius: var(--liwen-radio-pildora);
  font-size: 22px !important;
  line-height: 31px !important;
  text-align: center;
  /* La tinta 500 y opaca: el gris translúcido, con el opacity: 0.85 que le pone
     Cookie-Script encima, se quedaba en 3,6:1. */
  color: var(--liwen-tinta500) !important;
  opacity: 1 !important;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html body #cookiescript_injected #cookiescript_close:hover {
  background: rgba(20, 20, 20, 0.06);
}

/* Las categorías, en píldoras que se alinean en vez de una lista de 5 líneas. */
html body #cookiescript_injected #cookiescript_checkboxs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

html body #cookiescript_injected .cookiescript_checkbox {
  align-items: center;
  margin: 0 !important;
  padding: 0 12px 0 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--liwen-linea-media);
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-blanco);
}

html body #cookiescript_injected .cookiescript_checkbox .mdc-checkbox {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  padding: 8px !important;
  margin: 0 !important;
}

html body #cookiescript_injected .cookiescript_checkbox .mdc-checkbox__native-control {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
}

html body #cookiescript_injected .cookiescript_checkbox .mdc-checkbox__background {
  top: 8px !important;
  left: 8px !important;
  width: 16px !important;
  height: 16px !important;
  border-width: 1.5px !important;
  border-radius: 5px !important;
}

html body #cookiescript_injected .cookiescript_checkbox .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
  background-color: var(--liwen-cta-cabecera) !important;
  border-color: var(--liwen-cta-cabecera) !important;
}

html body #cookiescript_injected .cookiescript_checkbox_label {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Cookie-Script las pasa a MAYÚSCULAS espaciadas: se vuelve al texto tal cual. */
html body #cookiescript_injected .cookiescript_checkbox_text {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--liwen-cta-cabecera) !important;
}

html body #cookiescript_injected #cookiescript_buttons {
  display: flex !important;
  gap: 8px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

html body #cookiescript_injected :is(#cookiescript_accept, #cookiescript_reject, #cookiescript_save) {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: var(--liwen-radio-pildora) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-transform: none !important;
  white-space: nowrap;
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva), background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html body #cookiescript_injected :is(#cookiescript_accept, #cookiescript_save) {
  border: 1px solid var(--liwen-lima) !important;
  background: var(--liwen-lima) !important;
  color: var(--liwen-cta-cabecera) !important;
}

html body #cookiescript_injected #cookiescript_reject {
  border: 1px solid var(--liwen-linea-media) !important;
  background: var(--liwen-blanco) !important;
  color: var(--liwen-cta-cabecera) !important;
}

html body #cookiescript_injected :is(#cookiescript_accept, #cookiescript_save):hover {
  transform: translateY(-1px);
  box-shadow: var(--liwen-sombra-lima);
}

html body #cookiescript_injected #cookiescript_reject:hover {
  background: rgba(20, 20, 20, 0.05) !important;
}

html body #cookiescript_injected #cookiescript_manage_wrap {
  margin: 10px 0 0 !important;
  text-align: center;
}

html body #cookiescript_injected :is(#cookiescript_manage, #cookiescript_manage span) {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  /* Tinta 500, como la descripción: el gris translúcido de antes daba 4,21:1 sobre el
     blanco del banner, por debajo del 4,5:1 de un texto de 12,5 px. Y opaco: Cookie-Script
     le pone opacity: 0.85, que se aplica ENCIMA del color y lo dejaba en 4,38:1 (el
     color computado no lo dice; revisión 2, 17/10/2026). */
  color: var(--liwen-tinta500) !important;
  opacity: 1 !important;
}

html body #cookiescript_injected #cookiescript_manage:hover span {
  color: var(--liwen-negro) !important;
}

@media (max-width: 767.98px) {
  /* Móvil: hoja inferior opaca (al 97 % aún se leían debajo los filtros de la tienda y
     asomaba el botón flotante, revisión del 18/10/2026) y las categorías en dos
     columnas, para que la hoja no pase de unos 400 px de los 664 de un iPhone. */
  html body #cookiescript_injected {
    background: var(--liwen-blanco) !important;
  }

  html body #cookiescript_injected #cookiescript_description,
  html body #cookiescript_injected #cookiescript_description span,
  html body #cookiescript_injected #cookiescript_readmore {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  html body #cookiescript_injected #cookiescript_checkboxs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  html body #cookiescript_injected .cookiescript_checkbox {
    padding-right: 10px !important;
    border-radius: var(--liwen-radio-sm);
  }

  html body #cookiescript_injected .cookiescript_checkbox_text {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 768px) {
  /* Una barra baja y ancha, centrada: el texto y las categorías (en UNA fila a 1280 y
     a 1440) a la izquierda, los dos botones a la derecha. Unos 150 px de alto: a
     1280 × 800 empieza por debajo del botón del héroe. Hasta unos 1400 px tapa el
     botón de WhatsApp mientras se decide (el consentimiento va encima de todo); a
     1440 ya no lo alcanza. */
  html body #cookiescript_injected {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "cab botones"
      "texto botones"
      "casillas gestionar"
      "tabla tabla";
    column-gap: 24px;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(1248px, calc(100vw - 32px)) !important;
    margin: 0 auto !important;
    padding: 18px 20px 16px !important;
  }

  html body #cookiescript_injected #cookiescript_header {
    grid-area: cab;
    margin-bottom: 4px !important;
    padding-right: 0 !important;
  }

  html body #cookiescript_injected #cookiescript_description {
    grid-area: texto;
  }

  html body #cookiescript_injected #cookiescript_checkboxs {
    grid-area: casillas;
    margin-top: 10px !important;
  }

  html body #cookiescript_injected .cookiescript_checkbox_text {
    font-size: 11px !important;
  }

  html body #cookiescript_injected #cookiescript_buttons {
    grid-area: botones;
    align-self: end;
    margin: 0 !important;
    padding-top: 40px !important;
  }

  html body #cookiescript_injected :is(#cookiescript_accept, #cookiescript_reject, #cookiescript_save) {
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  html body #cookiescript_injected #cookiescript_manage_wrap {
    grid-area: gestionar;
    align-self: end;
    margin: 0 !important;
    padding-bottom: 6px;
  }

  html body #cookiescript_injected #cookiescript_cookietablewrap {
    grid-area: tabla;
  }
}

/* ── Cabecera fija (escritorio) ──────────────────────────────────────────────────
   Al bajar de la cabecera el menú se iba con ella, y con él los dos botones lima: ni
   navegación ni llamada a la acción. public/web/liwen.js le pone «jg-barra-fija» al
   <html> y aquí el menú pasa a ser una barra flotante translúcida (desenfoque y borde
   fino), compacta y centrada, igual en las trece páginas. Arriba del todo la cabecera
   es la del Figma: no cambia nada. */
.jg-barra-hueco {
  pointer-events: none;
}

@media (min-width: 992px) {
  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar {
    position: fixed !important;
    top: 12px;
    left: 0;
    right: 0;
    z-index: var(--liwen-capa-cabecera) !important;
    width: min(var(--liwen-espacio-contenedor), calc(100% - 32px)) !important;
    max-width: none;
    margin: 0 auto;
    padding: 8px 10px 8px 20px !important;
    border: 1px solid var(--liwen-linea-suave);
    border-radius: var(--liwen-radio-lg);
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow: var(--liwen-sombra-3);
    animation: liwen-barra-entra var(--liwen-mov-base) var(--liwen-mov-curva);
  }

  /* Preguntas frecuentes, servicios y acerca de: arriba, logo y menú blancos sobre la
     foto; al bajar, la barra va casi siempre sobre blanco o lila, y oscura se veía gris
     sucio (≈ #5f5f5f) y cambiaba de tono al pasar de una página a otra. Es la misma
     barra blanca que en las otras diez: el logo blanco, en negro, y el menú, negro. */
  html.jg-barra-fija #jg-sevicios-header nav.navbar .navbar-brand img {
    filter: brightness(0);
  }

  html.jg-barra-fija #jg-sevicios-header nav.navbar .navbar-nav .nav-link {
    color: var(--liwen-negro);
  }

  /* Saltar a un ancla («Encuentra tu centro más cercano», «Dónde encontrarnos», las
     categorías de preguntas) dejaba el título debajo de la barra: se para por debajo
     de ella (12 de margen + su alto) con 24 de aire. */
  html {
    scroll-padding-top: calc(12px + var(--liwen-espacio-barra) + 24px);
  }

  /* A 1440 el menú lleva el espaciado del Figma: la barra, algo más ancha. */
  @media (min-width: 1400px) {
    html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar {
      width: min(1320px, calc(100% - 48px)) !important;
    }
  }

  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar .navbar-brand img {
    width: auto;
    height: 44px;
  }

  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar .container-fluid {
    padding: 0;
  }

  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar a.header-button {
    height: 44px;
  }

  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar .jg-search-toggle {
    width: 44px;
    height: 44px;
  }

  @keyframes liwen-barra-entra {
    from {
      opacity: 0;
      transform: translateY(-14px);
    }
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar {
    background: rgba(255, 255, 255, 0.97);
  }
}

/* ── Cabecera: una sola forma ────────────────────────────────────────────────────
   En la misma fila había un cuadrado de radio 3 (buscar), dos rectángulos de radio 8
   (los CTA) y píldoras en el resto de la web. Ahora todo es píldora; el buscador se
   abre como una lámina translúcida con sombra, no como un recorte blanco. */
/* La lupa (36 × 36, con su propio fondo) asomaba cuatro picos por fuera del círculo de
   48: el botón recorta lo que lleva dentro (el foco va por fuera y no se recorta). */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle {
  overflow: hidden;
  border-radius: var(--liwen-radio-pildora);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle:hover {
  background: #eceef2 !important;
}

/* lupa.svg trae su propio cuadrado #F5F7FA: al pasar el ratón el botón se oscurece y
   el cuadrado se veía dentro del círculo. Con «darken» toma el color del botón. */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle img {
  mix-blend-mode: darken;
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) #jg-search-input {
  border: 1px solid var(--liwen-linea-media);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--liwen-sombra-2);
}

/* Las píldoras de la cabecera en UNA línea: partido en dos, «Encuentra tu centro»
   medía 84 de alto y quedaba un óvalo junto a una píldora (menú móvil y 992-1199). */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button,
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
  white-space: nowrap;
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button {
  border-radius: var(--liwen-radio-pildora);
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva), filter var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

/* La hamburguesa era la única forma fuera del sistema: un cuadrado de radio 6 con
   borde gris. Ahora, un círculo lima de 48 sin borde, con el brillo lima al pasar el
   ratón (no al tocar: en un móvil el hover se queda pegado). */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-toggler {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--liwen-radio-pildora);
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

/* (Solo donde se ve: en escritorio Bootstrap la oculta con display: none.) */
@media (max-width: 991.98px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-toggler-icon {
  width: 24px;
  height: 24px;
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-toggler:focus:not(:focus-visible) {
  box-shadow: none;
}

@media (hover: hover) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-toggler:hover {
    transform: translateY(-1px);
    box-shadow: var(--liwen-sombra-lima);
  }
}

@media (min-width: 992px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse {
    align-items: center;
  }
}

/* Entre 992 y 1199 (iPad en horizontal) la fila no cabía: los enlaces y «Encuentra tu
   centro» se partían y el logo del inicio se encogía hasta 0 px. La misma cabecera,
   algo más compacta: menú a 13 px, botones a 14 y de 44 de alto, y menos aire entre
   enlaces. Medido: a 992 sobran unos 40 px, arriba y con la barra fija. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-brand {
    flex-shrink: 0;
    margin-right: 12px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-item {
    padding: 0;
  }

  /* custom.css los deja a 12 px con !important por debajo de 1200. */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
    padding-inline: 6px;
    font-size: 13px !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-wrapper {
    margin-right: 10px !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle {
    width: 44px;
    height: 44px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 14px;
    border: 0;
    font-size: 14px;
    line-height: 1.2;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button.me-2 {
    margin-right: 8px !important;
  }
}

/* ── Menú plegado (< 992) ────────────────────────────────────────────────────────
   El buscador se abría hacia la izquierda, desde la lupa, y en el menú plegado la lupa
   va pegada al borde izquierdo: quedaba fuera de la pantalla (x = −278 a 390). Se abre
   hacia la derecha, sin tapar la lupa (con la que se cierra). */
@media (max-width: 991.98px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-form {
    left: calc(100% + 10px);
    right: auto;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-form.open {
    width: min(320px, calc(100vw - 150px));
  }

  /* Los botones del menú plegado, de 48 como la lupa y la hamburguesa (en servicios,
     a 820, medían 28), y el menú a 16 px (a 820 iba a 12). */
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse .nav-link {
    font-size: 16px !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse a.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    line-height: 1.2;
  }

  /* Preguntas frecuentes, servicios y acerca de abren el menú en un panel sobre la
     foto. Era un rectángulo negro al 85 %: a través se leían el titular, la entradilla
     y el botón del héroe, montados sobre los enlaces, y en WebKit la franja lima lo
     cruzaba. Ahora es una lámina opaca (al 96-98 % aún se adivinaba el titular, y a
     esa opacidad un desenfoque no se aprecia), redondeada y con sombra, en la capa de
     los desplegables (por encima del héroe y de la franja). El menú lleva «z-index:
     10» en línea: hace falta el !important. El panel, con el peso de la regla del
     tema («#jg-sevicios-header .navbar .navbar-collapse») para ganarle.
     JFP-2291 (Antonio, 23/10/2026: «evita poner negro de fondo en las capas»): la
     lámina era negra (#141414); ahora es la MISMA que en el resto de cabeceras —papel
     claro, línea fina, radio lg— con la sombra de destacado, porque va sobre una foto, y
     los enlaces en tinta (los del tema son blancos, para la foto). */
  #jg-sevicios-header nav.navbar {
    z-index: var(--liwen-capa-desplegable) !important;
  }

  #jg-sevicios-header nav.navbar .navbar-collapse {
    margin-top: 12px;
    padding: 20px 24px 24px;
    border: 1px solid var(--liwen-linea-suave);
    border-radius: var(--liwen-radio-lg);
    background-color: var(--liwen-papel-claro);
    box-shadow: var(--liwen-sombra-3);
  }

  #jg-sevicios-header nav.navbar .navbar-collapse .navbar-nav .nav-link,
  #jg-sevicios-header nav.navbar .navbar-collapse .navbar-nav .nav-link.active {
    color: var(--liwen-tinta950);
  }

  /* Su gemelo claro, en las cabeceras sobre papel (inicio, servicio/*, blog, contacto):
     el menú se abría en línea, plano sobre el papel, y el héroe arrancaba pegado a
     «Encuentra tu centro». Es una capa: papel claro, línea fina, radio lg y la sombra
     de destacado (segunda vuelta, 18/10/2026: «Aplica también alguna sombra donde lo
     requiera»). */
  html :is(#jg-header, #jg-entrenamiento-personal-header, #jg-blog-header, #jg-contacto) nav.navbar .navbar-collapse:is(.show, .collapsing) {
    margin-top: 12px;
    padding-inline: 16px;
    border: 1px solid var(--liwen-linea-suave);
    border-radius: var(--liwen-radio-lg);
    background-color: var(--liwen-papel-claro);
    box-shadow: var(--liwen-sombra-2);
  }

  html :is(#jg-header, #jg-entrenamiento-personal-header, #jg-blog-header, #jg-contacto) nav.navbar .navbar-collapse.show {
    padding-block: 8px 16px;
  }
}

/* En el móvil los dos botones no caben en la fila de la lupa («Encuentra tu centro»
   se partía): la lupa arriba, con su buscador abriéndose a su derecha, y debajo los
   dos botones a todo el ancho, uno por fila. */
@media (max-width: 767.98px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse .d-flex.align-items-center.ms-auto {
    flex-wrap: wrap;
    gap: 10px;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse .jg-search-wrapper {
    margin-right: 0 !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-collapse a.header-button {
    flex: 1 1 100%;
    margin: 0 !important;
  }
}

/* El menú: la página activa y el enlace bajo el ratón se marcan con una píldora suave
   detrás del texto, sin cambiar la caja. Antes era un subrayado lima; Antonio
   (17/10/2026): «Quita los subrayados de las letras, que no queda bien». La píldora va
   centrada en el TEXTO, no en la caja: a 1400 o más el enlace lleva 11 px arriba y 5
   abajo (la línea base del Figma), y --jg-menu-baja lo compensa. En la cabecera
   oscura de foto (servicios, preguntas frecuentes, acerca de) el texto es claro y la
   píldora es de papel translúcido; en su barra fija, que es blanca, la de siempre. */
@media (min-width: 992px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
    --jg-menu-raton: var(--liwen-papel-hondo);
    --jg-menu-activa: var(--liwen-lima-suave);
    --jg-menu-baja: 0px;
    position: relative;
    isolation: isolate;
  }

  #jg-sevicios-header .navbar-nav .nav-link {
    --jg-menu-raton: rgba(246, 244, 239, 0.16);
    --jg-menu-activa: rgba(246, 244, 239, 0.24);
  }

  html.jg-barra-fija #jg-sevicios-header .navbar-nav .nav-link {
    --jg-menu-raton: var(--liwen-papel-hondo);
    --jg-menu-activa: var(--liwen-lima-suave);
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    inset: calc(4px + var(--jg-menu-baja)) 0 calc(4px - var(--jg-menu-baja));
    z-index: calc(-1 * var(--liwen-capa-contenido));
    border-radius: var(--liwen-radio-pildora);
    background: transparent;
    transition: background-color var(--liwen-mov-base) var(--liwen-mov-curva);
    pointer-events: none;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link:hover::before {
    background: var(--jg-menu-raton);
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link.active::before {
    background: var(--jg-menu-activa);
  }
}

@media (min-width: 1400px) {
  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
    --jg-menu-baja: 3px;
  }
}

/* ── Héroes con foto: velo y aire ────────────────────────────────────────────────
   Ningún héroe llevaba velo: el titular blanco sobre la foto clara de pilates daba
   1,9:1 de contraste, el de centros 2,2:1, las migas de la ficha 2,8:1. Un degradado
   oscuro que deja ver la foto a la derecha (y uno radial en la ficha, que va
   centrada), y una sombra de texto suave. El aislamiento pone el velo encima de la
   foto y debajo del texto. */
:is(.cabecera-centros, .cabecera-entrenmiento-personal, .cabecera-servicios) {
  position: relative;
  isolation: isolate;
}

:is(.cabecera-centros, .cabecera-entrenmiento-personal, .cabecera-servicios)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: calc(-1 * var(--liwen-capa-contenido));
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 14, 14, 0.6) 0%, rgba(14, 14, 14, 0.34) 40%, rgba(14, 14, 14, 0) 70%),
    linear-gradient(180deg, rgba(14, 14, 14, 0.32) 0%, rgba(14, 14, 14, 0) 26%);
}

/* Servicios, preguntas frecuentes y acerca de llevaban el héroe a sangre, sin radio,
   y el resto recuadrado con radio 35-46: al navegar parecía otra web. En escritorio,
   recuadrados como los demás (el menú, absoluto, baja con ellos y sigue sobre la foto). */
@media (min-width: 992px) {
  #jg-sevicios-header {
    padding-top: 16px;
  }

  .cabecera-servicios {
    margin: 0 32px;
    overflow: hidden;
    border-radius: var(--liwen-radio-xl);
  }
}

/* ── Preguntas frecuentes: el héroe más bajo, para que se vean las preguntas (JFP-2251) ──
   custom.css le daba al contenedor del héroe (#jg-sevicios-header) 850 px (700 hasta 1399 px,
   500 en tableta y 380 en móvil) y, debajo, «Categorías de preguntas» y el título de cada
   bloque con 48 px de aire por arriba y por abajo: en un 1280×720 la primera pregunta
   empezaba en y=1125, casi dos pantallas por debajo del pliegue (820×1180: y=925; móvil:
   y=811). Ese contenedor lo comparten servicios, preguntas frecuentes y acerca de: solo se
   baja el de la FAQ, que es el único con la clase de plantilla page-template-jg-faqs; los
   otros dos no se tocan. El titular sigue centrado en la foto, por debajo del menú.

   Segunda vuelta (revisión, 21/10/2026): con 360 px la primera pregunta acababa en y=709 a
   1280×720, pegada al borde, y el banner de cookies (una lámina de ~164 px abajo, que sale
   en la primera visita) la tapaba entera. Escritorio baja a 256 px con el titular a 3,4 rem
   (sigue siendo de marca, dos líneas, y a más de 10 px del menú); «Categorías de preguntas»
   pasa de 3,5 a 1,5 rem y el título de cada categoría a 1,75 rem (todas, para que ninguna
   quede pequeña junto a otra enorme), y las filas de las preguntas ganan compacidad. La
   primera pregunta acaba por encima del banner con más de 60 px de aire. Medido en 1280×720:
   y=709 → 468 (el banner empieza en 540). */
@media (min-width: 992px) {
  html body.page-template-jg-faqs #jg-sevicios-header {
    height: 256px;
  }

  /* El titular se centra en lo que queda DEBAJO del menú (que es absoluto y se come los primeros
     ~100 px): sin este relleno, con la foto más baja quedaba pegado al logo. */
  html body.page-template-jg-faqs .cabecera-servicios.jg-faqs {
    padding-top: 80px;
  }

  html body.page-template-jg-faqs .cabecera-servicios.jg-faqs h1 {
    font-size: 3.4rem;
    line-height: 1;
  }
}

@media (max-width: 991.98px) {
  html body.page-template-jg-faqs #jg-sevicios-header {
    height: 300px;
  }

  html body.page-template-jg-faqs .cabecera-servicios.jg-faqs {
    padding-top: 64px;
  }
}

/* Y el aire entre el héroe y la primera pregunta: el bloque «Categorías de preguntas» (los
   chips que saltan a cada categoría) llevaba 48 + 48 px de margen por encima y 48 por
   debajo, y el primer título otros 48 de relleno. */
html body.page-template-jg-faqs #jg-faq-all {
  padding-top: 0 !important;
}

html body.page-template-jg-faqs #jg-faq-all > .container.text-center {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

html body.page-template-jg-faqs #jg-faq-all > .container.text-center h2 {
  font-size: 1.5rem;
  margin-bottom: 8px !important;
}

html body.page-template-jg-faqs #jg-faq-all > .container.text-center > .d-flex {
  margin-bottom: 0 !important;
}

/* Los títulos de TODAS las categorías (no solo el de la primera, que quedaría pequeño al lado de un
   «Fisioterapia» enorme) y las filas de TODAS las preguntas, con el mismo tamaño y el mismo aire. */
html body.page-template-jg-faqs #jg-faq-all h3 {
  font-size: 1.75rem;
}

html body.page-template-jg-faqs #jg-faq-all .accordion-button {
  padding-block: 12px;
}

/* El primer título pegado a los chips: el resto conserva el aire que trae entre categorías. */
html body.page-template-jg-faqs #jg-faq-all #entrenamiento h3 {
  margin-top: 10px;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
}

/* Móvil (decisión de Antonio, 21/10/2026): los siete chips de categorías en UNA fila que se
   desliza con el dedo, no en cuatro filas que empujaban las preguntas más allá del pliegue.
   La fila sangra hasta los bordes de la pantalla (el último chip asoma cortado, y eso dice que
   hay más), empieza por la izquierda (centrada, el primer chip quedaría fuera y sin forma de
   llegar a él) y se desliza SOLO ella: la página no gana scroll horizontal. Sin barra, que en
   el móvil es un hilo gris sobre los chips; los enlaces siguen enfocables con el teclado. */
@media (max-width: 767.98px) {
  html body.page-template-jg-faqs #jg-faq-all > .container.text-center > .d-flex {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) / -2);
    padding: 4px calc(var(--bs-gutter-x, 1.5rem) / 2);
    scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
  }

  html body.page-template-jg-faqs #jg-faq-all > .container.text-center > .d-flex::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html body.page-template-jg-faqs #jg-faq-all > .container.text-center > .d-flex > .jg-btn-cat {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ── Página 404 (JFP-2251) ───────────────────────────────────────────────────────
   El dinosaurio es un JPG con el fondo BLANCO y la paleta pinta section.bg-white de papel:
   sin esto se vería un rectángulo blanco sobre el papel. Con multiply el blanco desaparece
   (blanco × papel = papel) y el lima y el negro de la imagen se quedan como están. */
html body #page-404 img {
  mix-blend-mode: multiply;
}

/* La ficha va centrada: velo radial. */
.cabecera-centros.text-center::before {
  background: radial-gradient(ellipse 70% 62% at 50% 54%, rgba(14, 14, 14, 0.56), rgba(14, 14, 14, 0.2) 70%, rgba(14, 14, 14, 0.08));
}

/* Provincias (JFP-2291, revisión del 23/10): ya no traen el velo plano de NEGRO al 50 % que el origen les ponía
   en línea (lo quita conProvinciaSinVeloPlano, scripts/web-cierre-2291.mjs): toda la foto salía gris y apagada.
   El velo es este, en tinta. En escritorio el texto llega al 57 % del héroe (titular largo): denso bajo él y la
   foto libre a la derecha. */
.cabecera-centros.madrid::before {
  background: linear-gradient(90deg, rgba(21, 20, 26, 0.7) 0%, rgba(21, 20, 26, 0.62) 52%, rgba(21, 20, 26, 0.3) 70%, rgba(21, 20, 26, 0) 88%);
}

/* En la tableta y el móvil el texto ocupa todo el ancho: un velo en tinta que lo cubre todo (lo que cubría el
   plano), algo más denso arriba, donde van la miga y el titular. */
@media (max-width: 991.98px) {
  .cabecera-centros.madrid::before {
    background: linear-gradient(180deg, rgba(21, 20, 26, 0.68) 0%, rgba(21, 20, 26, 0.61) 45%, rgba(21, 20, 26, 0.55) 100%);
  }
}

/* Su entradilla son diez líneas: con el interlineado legible ya no cabían en los 611
   px fijos del héroe y las migas se salían por arriba. En escritorio el héroe crece lo
   que haga falta (nunca menos de lo que medía). */
@media (min-width: 992px) {
  .cabecera-centros.madrid {
    height: auto;
    min-height: 611px;
    padding-block: 56px 72px;
  }
}

/* Y en el móvil y la tableta, lo mismo (segunda vuelta, 18/10/2026): con 450 px fijos,
   la miga, el titular y el botón se salían de la foto. */
@media (max-width: 991.98px) {
  .cabecera-centros.madrid {
    height: auto;
    min-height: 450px;
    padding-block: 40px 64px;
  }
}

/* En el móvil la entradilla iba en una columna de un 65 % (custom.css le deja un 35 % a
   la derecha, para la foto de escritorio): quince líneas de dos o tres palabras. A todo
   el ancho se lee y el héroe es más corto. */
@media (max-width: 767.98px) {
  .cabecera-centros.madrid p {
    padding-right: 0;
  }
}

/* Trabaja con nosotros: su héroe tampoco cabía (dos botones bajo una entradilla larga) y
   las franjas, que suben 102 px sobre él, tapaban «Enviar candidatura». Crece con su
   texto y deja abajo el sitio de las franjas. */
.cabecera-centros.trabaja-con-nosotros {
  height: auto;
  min-height: 611px;
  padding-block: 64px 136px;
}

@media (max-width: 991.98px) {
  .cabecera-centros.trabaja-con-nosotros {
    min-height: 0;
    padding-block: 40px 72px;
  }
}

/* Solo la sombra corta: el halo gris de 28 px que llevaba además envejecía el héroe, y
   el contraste ya lo da el velo (segunda vuelta, 18/10/2026: «que todo sea elegante»). */
:is(.cabecera-centros, .cabecera-entrenmiento-personal, .cabecera-servicios) :is(h1, p, #breadcrumbs, .jg-entradilla) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* El titular (85 % de interlineado, de marca) pegado al párrafo: los trazos de
   «personalizado.» montaban «Más de 70 centros…». Aire debajo y entradilla legible. */
:is(.cabecera-centros, .cabecera-entrenmiento-personal, .cabecera-servicios) h1 {
  text-wrap: balance;
}

/* (El rediseño le quitaba el margen al titular de la ficha; en centros y provincias
   también lo perdía, y allí no hay botones debajo que lo separen.) */
.cabecera-centros:not(.text-center) h1 {
  margin-bottom: 24px !important;
}

:is(.cabecera-centros, .cabecera-entrenmiento-personal, .cabecera-servicios) :is(h1 + p, .jg-entradilla),
.cabecera-servicios p {
  line-height: 1.4 !important;
  text-wrap: pretty;
}

/* ── Tarjetas: un solo sistema de capas ──────────────────────────────────────────
   92 de 92 tarjetas del inicio sin sombra, separadas por bordes de 1 px negros o
   grises (#98999a, #303030, #000): bloques planos de aspecto de maqueta. Ahora todas
   son una capa: fondo, línea rgba muy fina y sombra de reposo; las que se pulsan se
   elevan un poco al pasar el ratón. */
:is(
  .jg-servicios .jg-servicios-box,
  #jg-centros .jg-centros-box,
  #jg-porque .jg-porque-lista,
  .faq-accordion .accordion-item,
  #jgt-productos .card,
  .jg-slider-item .jg-card,
  #jg-centros-region .json-centro-card,
  .single-centro .json-centro-card,
  .card.custom-card
) {
  border-color: var(--liwen-linea-suave) !important;
  box-shadow: var(--liwen-sombra-1);
  transition: transform var(--liwen-mov-base) var(--liwen-mov-curva), box-shadow var(--liwen-mov-base) var(--liwen-mov-curva), background-color var(--liwen-mov-base) var(--liwen-mov-curva);
}

:is(.jg-servicios .jg-servicios-box, #jg-porque .jg-porque-lista, .faq-accordion .accordion-item:not(:has(.accordion-collapse.show)), #jgt-productos .card) {
  background-color: var(--liwen-blanco);
}

:is(
  .jg-servicios .jg-servicios-box,
  #jg-centros .jg-centros-box,
  #jgt-productos .card,
  #jg-centros-region .json-centro-card,
  .card.custom-card
):hover {
  transform: translateY(-3px);
  box-shadow: var(--liwen-sombra-3);
}

.faq-accordion .accordion-item:hover {
  box-shadow: var(--liwen-sombra-2);
}

/* Fotos que flotan: abanico de «¿Por qué?», foto del formulario, equipo. */
:is(.fan-item img, .jg-form-img-wrapper, #sobre-jg img.rounded-4) {
  box-shadow: var(--liwen-sombra-3);
}

/* La foto del equipo (acerca de) llevaba un borde negro de 1 px. */
#sobre-jg img.rounded-4 {
  border: 0 !important;
  border-radius: var(--liwen-radio-lg) !important;
}

/* Blanco sobre lila daba 2,4:1: en las tarjetas lila, el texto en negro, como el
   bloque lila de la portada. El lila no cambia. */
:is(#jg-centros-region .json-centro-card, .single-centro .json-centro-card),
:is(#jg-centros-region .json-centro-card, .single-centro .json-centro-card) :is(h3, h4, h5, p, .text-white, a:not(.btn):not(.boton-card)) {
  color: var(--liwen-cta-cabecera) !important;
}

#jg-centros-region .json-centro-card .centro-thumb,
.single-centro .json-centro-card img:not([width="16"]) {
  border-radius: var(--liwen-radio-md);
}

/* ── Componentes con esquinas vivas ──────────────────────────────────────────── */
.form-block-card .form-control,
.form-block-card .wpcf7-select {
  border: 1px solid var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-sm) !important;
  background-color: var(--liwen-blanco) !important;
  transition: border-color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.form-block-card {
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-lg) !important;
  box-shadow: var(--liwen-sombra-1);
}

#jg-soporte .soporte-item {
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-md) !important;
  background: var(--liwen-blanco) !important;
  box-shadow: var(--liwen-sombra-1);
  transition: transform var(--liwen-mov-base) var(--liwen-mov-curva), box-shadow var(--liwen-mov-base) var(--liwen-mov-curva);
}

/* El texto iba en gris #6c757d (3,8:1): el de la tinta del sistema. */
#jg-soporte .soporte-item,
#jg-soporte .soporte-item * {
  color: rgba(20, 20, 20, 0.78) !important;
}

#jg-soporte .soporte-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--liwen-sombra-2);
}

/* Formularios de Contact Form 7 (contacto y similares) y el buscador del blog. */
.wpcf7-form :is(.form-control, .form-select) {
  border-radius: var(--liwen-radio-sm) !important;
  transition: box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

/* Contacto se quedó fuera del acabado: «Enviar» en un rectángulo de radio 8 y 39 de
   alto (en franquicias, trabaja con nosotros y la ficha es una píldora), la casilla
   nativa de 13 px pegada al texto y el enlace en el azul de Bootstrap sobre lila. */
.wpcf7-form .wpcf7-submit {
  min-height: 48px;
  border-radius: var(--liwen-radio-pildora) !important;
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.wpcf7-form .wpcf7-submit.btn-dark {
  box-shadow: var(--liwen-sombra-boton-tinta);
}

.wpcf7-form .wpcf7-submit.btn-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(25, 26, 35, 0.7);
}

.jgf-privacidad input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
  accent-color: var(--liwen-cta-cabecera);
  vertical-align: -3px;
}

.jgf-privacidad a {
  color: var(--liwen-cta-cabecera);
  font-weight: 600;
}

#jg-busqueda-blog .form-control {
  border: 1px solid var(--liwen-linea-media);
  border-radius: var(--liwen-radio-pildora);
  padding-inline: 20px;
}

#jg-busqueda-blog .btn {
  border-radius: var(--liwen-radio-pildora);
  padding-inline: 22px;
}

/* Las tallas: píldoras sueltas con aire entre ellas (Bootstrap las solapaba 1 px). */
#jgt-productos [data-tallas] {
  gap: 6px;
}

#jgt-productos [data-tallas] .btn {
  margin-left: 0 !important;
  border-radius: var(--liwen-radio-pildora) !important;
}

#jgt-filtros .btn {
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), border-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

/* Centros por provincia (desplegables): barras #e9e9e9 sobre #f2f2f2, sin capa. */
#jg-centro-collapse .jg-collapse-item {
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-md) !important;
  background: var(--liwen-blanco) !important;
  box-shadow: var(--liwen-sombra-1);
  transition: transform var(--liwen-mov-base) var(--liwen-mov-curva), box-shadow var(--liwen-mov-base) var(--liwen-mov-curva);
}

#jg-centro-collapse .jg-collapse-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--liwen-sombra-2);
}

#jg-centro-collapse .jg-collapse-item:has(.collapse.show) {
  background: var(--liwen-lima) !important;
}

/* Página de preguntas frecuentes: separadores negros y un «+» en un cuadrado lima. */
.jg-faq-accordion .accordion-item {
  border-color: var(--liwen-linea-suave) !important;
}

.jg-faq-accordion .accordion-button::after {
  border-radius: 50%;
  transition: transform var(--liwen-mov-base) var(--liwen-mov-curva), background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.jg-faq-accordion .accordion-button:hover {
  background-color: rgba(20, 20, 20, 0.03);
}

/* Chips de categoría y etiquetas del blog: borde discontinuo gris → píldora fina. */
.jg-btn-cat,
.jg-tag {
  border: 1px solid var(--liwen-linea-media) !important;
  border-radius: var(--liwen-radio-pildora) !important;
  background: var(--liwen-blanco) !important;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), border-color var(--liwen-mov-rapido) var(--liwen-mov-curva), transform var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.jg-btn-cat:hover,
.jg-btn-cat.active,
.jg-tag:hover {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
}

/* ── Ficha: testimonios, tarjeta del centro y formulario ─────────────────────────
   Testimonios con radio y la misma capa que el resto; el carrusel se desvanece en
   los bordes en vez de cortar la tarjeta contra la ventana.
   El desvanecido va en la VENTANA (.jg-slider-track-container), que no se mueve. Iba
   en la pista (.jg-slider-track), y el carrusel la desplaza con transform (a 1280,
   unos −8100 px): la máscara viajaba con ella y en DEV no se veía ningún testimonio. */
.jg-slider-track {
  align-items: stretch;
  padding-block: 24px;
}

.jg-slider-track-container {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.jg-slider-item .jg-card {
  border-width: 1px !important;
  border-radius: var(--liwen-radio-lg) !important;
}

.jg-slider-item.is-active .jg-card,
.jg-slider-item .jg-card:hover {
  box-shadow: var(--liwen-sombra-3);
}

/* «Escribir un whatsapp al centro» se partía en dos líneas dentro de su píldora. Solo
   en escritorio: en un móvil, con un texto largo (Matosinhos), desbordaría la página. */
@media (min-width: 992px) {
  .single-centro .json-centro-card .boton-card {
    white-space: nowrap;
  }
}

.jg-form-container .jg-input {
  border-color: var(--liwen-linea-media);
  background: var(--liwen-blanco);
  box-shadow: inset 0 1px 2px rgba(20, 20, 20, 0.04);
  transition: border-color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.jg-form-container .jg-input:focus {
  border-color: var(--liwen-cta-cabecera);
  box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.08);
}

.jg-form-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: var(--liwen-cta-cabecera);
  vertical-align: -3px;
}

.jg-form-container .jg-btn-submit {
  border-radius: var(--liwen-radio-pildora) !important;
  box-shadow: var(--liwen-sombra-boton-tinta);
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.jg-form-container .jg-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(25, 26, 35, 0.7);
}

/* ── Botones pequeños de las tarjetas ────────────────────────────────────────────
   «Ver servicio de …» iba a 9,15 px (11 en la ficha): por debajo de lo legible. */
@media (min-width: 1200px) {
  .jg-servicios:not(.single-centro-servicios) .jg-button {
    min-height: 30px;
    padding: 4px 14px;
    border-radius: var(--liwen-radio-pildora);
    font-size: 11px;
    line-height: 1.25;
  }

  /* «Ver Centros» (tarjetas de ciudad) va en una píldora en el Figma, pero sin fondo
     su texto parecía descolocado 16 px a la derecha del título: la píldora, a la vista. */
  #jg-centros .jg_ver-centros {
    border-radius: var(--liwen-radio-pildora);
    background: rgba(20, 20, 20, 0.05);
    font-size: 12px;
    transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
  }

  #jg-centros .jg-centros-box:hover .jg_ver-centros {
    background: var(--liwen-lima);
  }
}

/* ── Movimiento al pasar el ratón ────────────────────────────────────────────────
   El CTA lima de la cabecera no cambiaba; «Reservar primera sesión gratis» y «Ver
   servicio…» se quedaban transparentes (texto suelto). Ahora los botones lima siguen
   lima, se elevan un píxel y ganan una sombra lima; los transparentes se tiñen. */
:is(:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button, .btn-yellow, .jg-servicios .jg-button):hover {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: var(--liwen-sombra-lima);
}

:is(.btn-yellow, .jg-servicios .jg-button) {
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva), background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.btn-transparent:hover {
  background: rgba(20, 20, 20, 0.06) !important;
}

/* «Leer más» de los artículos y «Descubre este centro» de las tarjetas lila. */
:is(.btn-read-more, .json-centro-card .btn-light) {
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), border-color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

:is(.btn-read-more, .json-centro-card .btn-light):hover {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
  color: var(--liwen-cta-cabecera) !important;
  box-shadow: var(--liwen-sombra-lima);
}

.faq-accordion .accordion-button:hover {
  background: rgba(20, 20, 20, 0.03);
}

/* ── Foco visible ────────────────────────────────────────────────────────────────
   El contorno pasaba de 3 px a 0 sin nada a cambio en 12 de 13 elementos del inicio
   (y el halo azul de Bootstrap en el menú). Uno de marca, que se ve sobre claro y
   sobre oscuro: contorno negro y halo lima. */
:where(a, button, .btn, .accordion-button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--liwen-cta-cabecera) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(211, 254, 30, 0.6) !important;
}

/* Los campos de texto casan con :focus-visible también al hacer clic: el doble anillo
   negro y lima salía en cada clic (y sobre el formulario lima quedaba un borde doble).
   En ellos, el foco es el del propio campo: borde negro y un halo gris suave. Enlaces,
   botones, casillas y «Enviar» siguen con el contorno y el halo lima. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):focus-visible {
  outline: none !important;
  border-color: var(--liwen-cta-cabecera) !important;
  box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.12) !important;
}

/* El buscador de la cabecera recorta lo que sale de su píldora (crece de 0 a 320 px con
   overflow: hidden): un halo por fuera se cortaba y dejaba cuatro esquinas. Su foco va
   por dentro. */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) #jg-search-input:focus-visible {
  outline: none !important;
  border-color: var(--liwen-cta-cabecera) !important;
  box-shadow: inset 0 0 0 1px var(--liwen-cta-cabecera) !important;
}

/* ── Pie ─────────────────────────────────────────────────────────────────────────
   Una lámina con las esquinas de arriba redondeadas, una línea fina antes de los
   legales y enlaces que reaccionan. Las medidas del Figma (550 de alto, un enlace
   cada 27 px) no cambian. */
.custom-footer {
  border-radius: var(--liwen-radio-xl) var(--liwen-radio-xl) 0 0;
}

/* En la portada el pie va tras la lámina lila de Instagram (JFP-2291; antes, una foto): monta
   sobre ella lo que mide su radio, para que las esquinas dejen ver el lila y no dos picos blancos. */
#jg-rrss + .custom-footer {
  position: relative;
  z-index: var(--liwen-capa-contenido);
  margin-top: calc(-1 * var(--liwen-radio-xl));
}

.custom-footer .footer-links a,
.custom-footer .footer-legal-links a {
  text-decoration: none;
  transition: color var(--liwen-mov-rapido) var(--liwen-mov-curva), opacity var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.custom-footer .footer-links a:hover,
.custom-footer .footer-legal-links a:hover {
  color: var(--liwen-lima) !important;
}

/* La línea, justo encima de los legales, y el aire ENTRE las columnas y ella (no
   debajo): custom.css le daba 250 px de margen inferior a todos los anchos y el pie
   quedaba medio vacío. A 1440 el pie mide los 550 del Figma (200,6 + 1 + 24 = lo
   mismo que antes); por debajo, se queda en un aire razonable. */
.custom-footer .footer-bottom-divider {
  margin: 56px 0 24px !important;
  border-top: 1px solid var(--liwen-linea-clara);
}

@media (min-width: 1400px) {
  .custom-footer .footer-bottom-divider {
    margin: 176.6px 0 24px !important;
  }
}

/* ── Instagram: si las miniaturas caducan ────────────────────────────────────────
   Las miniaturas del feed son URL firmadas de Instagram que caducan (las del espejo,
   hacia el 04/10/2026): la foto no llega y el plugin pinta el texto alternativo —los
   pies de foto enteros— en azul sobre la casilla. Mientras no se vuelvan a bajar
   al bucket, la casilla rota se queda como un azulejo de marca, sin texto encima. */
#sb_instagram .sbi_photo {
  overflow: hidden;
  border-radius: var(--liwen-radio-md);
  box-shadow: var(--liwen-sombra-2);
}

#sb_instagram .sbi_photo img {
  color: transparent;
  font-size: 0;
}

#sb_instagram .sbi_photo:has(img.sbi_img_error) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--liwen-lila) 55%, white) 0%, color-mix(in srgb, var(--liwen-lima) 40%, white) 100%) !important;
}

#sb_instagram .sbi_photo img.sbi_img_error {
  opacity: 0 !important;
}

#jg-rrss .sbi_header_img img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Movimiento reducido ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.jg-barra-fija :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) nav.navbar {
    animation: none;
  }

  html body :is(a.jg-wa-flotante, button.jg-carrito-flotante, #cookiescript_badge) {
    transition: none;
  }

  :is(
    :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button,
    .btn-yellow,
    .jg-servicios .jg-button,
    .jg-servicios .jg-servicios-box,
    #jg-centros .jg-centros-box,
    #jgt-productos .card,
    #jg-centros-region .json-centro-card,
    .card.custom-card,
    #jg-centro-collapse .jg-collapse-item,
    #jg-soporte .soporte-item,
    .jg-form-container .jg-btn-submit,
    .wpcf7-form .wpcf7-submit,
    :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-toggler,
    html body #cookiescript_injected #cookiescript_accept,
    html body #cookiescript_injected #cookiescript_save
  ) {
    transition: none !important;
    transform: none !important;
  }

  :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link::before {
    transition: none;
  }

  /* La ventana «Mostrar detalles» de las cookies: sin transiciones (las del proveedor
     en interruptores y casillas). Solo la duración: sus interruptores se mueven con
     transform y un «transform: none» los dejaría a medias. */
  html body #cookiescript_injected_fsd *,
  html body #cookiescript_injected_fsd *::before,
  html body #cookiescript_injected_fsd *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ══ Paleta «papel, tinta y tres láminas de marca» (JFP-2134, propuesta para Yolanda,
   17/10/2026) ═══════════════════════════════════════════════════════════════════
   Antonio: «capas y colores más profesionales». La web del Figma, con el color
   repartido en papel, tinta y tres láminas de marca. Todo sale de los tokens. */

/* ── 1. Base: papel cálido en vez del blanco de pantalla ─────────────────────────
   Tres alturas: papel (la página), papel hondo (bandas funcionales: buscador,
   listado, mapa) y papel claro (tarjetas y campos). Las capas flotantes (barra fija,
   banner de cookies) siguen en blanco translúcido: sobre el papel se leen como capa. */
html {
  background-color: var(--liwen-papel);
}

html body {
  --bs-body-bg: var(--liwen-papel);
  background-color: var(--liwen-papel);
}

html body section.bg-white {
  background-color: var(--liwen-papel) !important;
}

/* Franquicias: «Propuesta de valor» (el blanco de custom.css) y «Casos de éxito» (un
   background-color: white en línea, de ahí el !important) eran dos franjas a sangre en
   blanco puro en medio del papel: costuras de dos casi-blancos y, bajo «Propuesta de
   valor», una tira de papel (su mb-5) antes de la banda de papel hondo de «Modelo de
   franquicia». En papel, la tira es parte de la misma superficie y solo queda una
   costura: papel → papel hondo (revisión 2, 17/10/2026). */
html body :is(section#propuesta-jg, section#jg-casos) {
  background-color: var(--liwen-papel) !important;
}

::selection {
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
}

/* ── 2. Pretítulo: el del Figma, en Light y SIN subrayado ─────────────────────────
   El Figma (y el tema) lo subrayaban; la propuesta lo dejaba en lima. Antonio
   (17/10/2026), mirando DEV: «Quita los subrayados de las letras, que no queda bien».
   Lo quita la regla general del bloque 19b; el tamaño, el peso y el tracking no se
   tocan (los mide jfp2134-web-figma-escritorio). */

/* ── 3. Cabecera: jerarquía de botones ───────────────────────────────────────────
   «Encuentra tu centro», la acción principal, en lima; «¿Empezamos?», en tinta. Antes
   eran dos píldoras lima iguales y ninguna destacaba. (Decisión a validar, D6.) */
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle {
  background: var(--liwen-papel-hondo) !important;
  box-shadow: inset 0 0 0 1px var(--liwen-linea-suave);
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .jg-search-toggle:hover {
  background: var(--liwen-lima) !important;
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button:not(.me-2) {
  box-shadow: var(--liwen-sombra-brillo), 0 1px 2px rgba(20, 20, 20, 0.08);
}

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button.me-2 {
  border-color: transparent !important;
  background: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.2);
}

/* Sobre la foto oscura de servicios, FAQ y acerca de: un filo de luz que la despega. */
#jg-sevicios-header a.header-button.me-2 {
  box-shadow: inset 0 0 0 1px rgba(246, 244, 239, 0.2), 0 1px 2px rgba(20, 20, 20, 0.2);
}

/* (Hasta JFP-2291 el menú plegado de esas tres páginas era un panel negro y allí
   «¿Empezamos?» iba en contorno de papel. Ahora el panel es claro, como en el resto de
   cabeceras (web-hoja-liwen-acabado.mjs), y el botón vuelve a su tinta.) */

:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button.me-2:hover {
  background: var(--liwen-tinta800) !important;
  color: var(--liwen-papel) !important;
  filter: none;
  box-shadow: var(--liwen-sombra-2);
}

/* ── 4. Héroes con foto: velo en tinta (no en negro) y el botón principal en lima ── */
:is(.cabecera-centros, .cabecera-entrenmiento-personal, .cabecera-servicios)::before {
  background:
    linear-gradient(90deg, rgba(21, 20, 26, 0.62) 0%, rgba(21, 20, 26, 0.34) 42%, rgba(21, 20, 26, 0) 72%),
    linear-gradient(180deg, rgba(21, 20, 26, 0.28) 0%, rgba(21, 20, 26, 0) 28%);
}

.cabecera-centros.text-center::before {
  background: radial-gradient(ellipse 70% 62% at 50% 54%, rgba(21, 20, 26, 0.58), rgba(21, 20, 26, 0.24) 70%, rgba(21, 20, 26, 0.1));
}

:is(#jg-sevicios-header .cabecera-servicios, #jg-entrenamiento-personal-header .cabecera-centros:not(.text-center)) .btn-lille {
  border: 0;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-brillo), 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1200px) {
  #jg-entrenamiento-personal-header .cabecera-centros:not(.text-center) .btn-lille {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 28px;
    font-size: 16px;
    font-weight: 700;
  }
}

/* ── 5. Lámina LILA (tarjeta de /contacto, El método, buscador del blog): el lila
   deja de ser una placa plana. Luz arriba a la izquierda, del lila 300 al lila de
   marca (el que Yolanda reconoce), filo de luz y un halo lila que la despega del
   papel. Titular y texto en negro, como en el Figma. */
html section#jg-contacto .row > .col-md-6:has(.wpcf7-form) > .rounded-5 {
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, var(--liwen-lila300) 0%, var(--liwen-lila) 78%) !important;
  /* El filo, como sombra interior: un borde movería las medidas del Figma (711 de alto). */
  box-shadow: inset 0 0 0 1px var(--liwen-lila-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-2), var(--liwen-sombra-halo-lila);
}

/* ── 5b. Lámina CREMA (el bloque 2 del inicio, JFP-2237): ya no es lila. Yolanda
   (minuta del 19/10/2026): el lila «da sensación de hecho con IA»; quieren un tono
   claro, o mejor amarillento. El crema (--liwen-crema) con la misma luz arriba a la
   izquierda que las láminas de marca y su filo. Va con !important porque le gana a las
   dos capas anteriores del bloque (la base, lila al 83 %, y el rediseño, lila al 74 %). Es
   un color PLANO más un degradado de blanco: sin color-mix, así que no necesita
   respaldo en el bloque «sin color-mix» del final. La lima del botón principal se queda:
   «la lima queda para la acción». */
html #jg-entrenamiento-personal .jg-box-v {
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
    var(--liwen-crema) !important;
  /* El filo, como sombra interior: un borde movería las medidas del Figma (711 de alto). */
  box-shadow: inset 0 0 0 1px var(--liwen-crema-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-2);
}

html section#jg-metodo,
html #jg-busqueda-blog {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--liwen-lila300) 0%, var(--liwen-lila) 100%) !important;
}

/* La foto del bloque lila: SIN filtro. El arreglo es el recurso (la foto del Figma sin
   el perfil Adobe RGB y con su encuadre, D10): la cambia conLiwen en el HTML. */
html #jg-entrenamiento-personal .jg-box-v .img-fluid {
  filter: none;
}

/* El método: la sombra de las fotos va en su caja (nunca filter: drop-shadow). */
#jg-metodo .metodo-img {
  border-radius: 20%;
  box-shadow: 0 30px 40px -26px rgba(21, 20, 26, 0.45);
}

/* ── 6. Lámina LILA: «¿Por qué JG fitness?» (JFP-2291) ─────────────────────────────
   Hasta el 23/10/2026 era la lámina TINTA, casi negra, con tarjetas tinta 900. Antonio,
   revisando DEV en el iPhone: fuera el fondo negro, «evita poner negro de fondo en las
   capas: tiene que ser elegante», y que pruebe el degradado lila de «¿Qué ofrecemos?» de
   Trabaja con nosotros, que le gusta. Ahora es ESA lámina (pulido P5b): la luz arriba, del
   lila 300 al lila de marca, el filo y el halo lila; y a 768 o más, con aire a los lados y
   radio xl, como el resto de láminas. Las tarjetas son capas de papel translúcido sobre el
   lila (el velo de papel, el mismo de los botones secundarios sobre una lámina), con el
   filo de luz arriba y la sombra teñida de lila: se despegan sin un solo negro. Todo el
   texto en tinta (sobre el velo, 10:1 el párrafo; el pretítulo, 5,9:1 sobre el lila). */
html section#jg-porque {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--liwen-lila300) 0%, var(--liwen-lila) 100%) !important;
  color: var(--liwen-tinta950);
}

@media (min-width: 768px) {
  html section#jg-porque {
    margin-inline: 24px;
    border-radius: var(--liwen-radio-xl);
    box-shadow: inset 0 0 0 1px var(--liwen-lila-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-halo-lila);
  }
}

html #jg-porque :is(.jg-porque-titulo h2, h2) {
  color: var(--liwen-tinta950);
}

html #jg-porque p.jg-servicios-pret {
  color: var(--liwen-tinta800);
}

html #jg-porque .jg-porque-lista {
  border-color: var(--liwen-papel-velo) !important;
  background-color: var(--liwen-papel-velo) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-lila);
}

html #jg-porque .jg-porque-lista :is(.jg-porque-titulo, h3) {
  color: var(--liwen-tinta950);
}

html #jg-porque .jg-porque-lista .jg-porque-lista-texto p {
  color: var(--liwen-tinta800);
}

html #jg-porque .jg-porque-lista .jg-porque-lista-texto p :is(b, strong) {
  color: var(--liwen-tinta950);
}

/* Las fotos del abanico: la sombra, teñida de tinta y más suave (sobre el lila, el negro al
   85 % era un agujero). */
#jg-porque .fan-item img {
  box-shadow: 0 2px 8px rgba(21, 20, 26, 0.16), 0 40px 70px -32px rgba(21, 20, 26, 0.45);
}

html #jg-porque .fan-control:not(.fan-next) {
  border: 1px solid var(--liwen-linea-suave);
  background: var(--liwen-papel-velo);
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-1);
}

html #jg-porque .fan-control.fan-next {
  border-color: transparent;
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
}

/* ── 7. Tarjetas sobre papel: papel claro, la línea fina del sistema, sombra 1 ──── */
:is(
  .jg-servicios .jg-servicios-box,
  #jg-centros .jg-centros-box,
  .faq-accordion .accordion-item:not(:has(.accordion-collapse.show)),
  #jgt-productos .card,
  .jg-slider-item .jg-card,
  .card.custom-card
) {
  background-color: var(--liwen-papel-claro) !important;
}

/* ── 8. Lámina LIMA («Servicios cerca de ti» y contacto de la ficha): la lima del Figma,
   PLANA (JFP-2291, Yolanda 22/10/2026: «fondo verde oliva»). Hasta entonces llevaba un
   degradado a --liwen-lima-volumen (la lima mezclada con #5c7a00, un oliva) y una sombra
   teñida del mismo oliva: eso era lo que se veía verde oliva. Los Centros del inicio
   pasan al crema del bloque de arriba (web-hoja-liwen-cierre.mjs). Encima, solo papel
   claro y tinta: nunca lila. */
html #jg-formulario .jg-formulario-box,
html #jg-contacto-centro .jg-form-container {
  background: var(--liwen-lima) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-2);
}

html #jg-centros #jg-centros-region,
html #contenedor-resultados-centros {
  background-color: transparent !important;
}

/* Tarjetas de centro DENTRO de la lámina lima (portada): papel claro, como las de
   ciudad. El lila sobre la lima chocaba. */
html #jg-centros #jg-centros-region .json-centro-card {
  border: 1px solid var(--liwen-linea-suave) !important;
  background-color: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-1);
}

html #jg-centros #jg-centros-region .json-centro-card :is(p, small) {
  color: var(--liwen-tinta600) !important;
}

/* Campos sobre la lima y el papel: papel claro con un borde de 3:1 o más (WCAG
   1.4.11). Blanco sobre lima daba 1,13:1. */
html :is(#jg-centros, #jg-formulario, #jg-centros-region, #jg-centro-collapse) .jg-select .form-select,
html #jg-contacto-centro .jg-form-container .jg-input {
  border: 1px solid var(--liwen-linea-campo) !important;
  background-color: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950);
}

/* El chevrón a 14 px del borde y 40 de relleno (10 de aire entre el texto y la flecha):
   con 48 y la flecha a 18, a 820 (la tableta de los centros) «Todas las ciudades» se
   cortaba en /centros (136 px de texto en 130; revisión 3, 17/10/2026). */
html :is(#jg-centros, #jg-formulario, #jg-centros-region) .jg-select .form-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315141a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
}

html :is(#jg-centros, #jg-formulario, #jg-centros-region) .jg-select .form-select:disabled {
  background-color: var(--liwen-papel) !important;
  color: var(--liwen-tinta500);
}

html #jg-contacto-centro .jg-form-container .jg-input::placeholder {
  color: var(--liwen-tinta500);
}

/* El foco de los campos sigue siendo el del acabado (borde negro y halo gris): con el
   borde de 3:1 hace falta ganarle en peso. */
html #jg-contacto-centro .jg-form-container .jg-input:focus-visible,
html :is(#jg-centros, #jg-formulario, #jg-centros-region, #jg-centro-collapse) .jg-select .form-select:focus-visible,
html section#jg-contacto .row > .col-md-6:has(.wpcf7-form) > .rounded-5 :is(.form-control, .form-select):focus-visible {
  border-color: var(--liwen-cta-cabecera) !important;
}

/* «Servicios cerca de ti»: chips de servicio en tinta, como en el Figma. */
html #jg-formulario .jg-tag {
  border: 1px solid var(--liwen-tinta950) !important;
  background: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
}

/* ── 9. Tarjetas de centro (listado, provincias, ficha): lila 200 sobre papel hondo ─
   El centro es el lila de la marca, en un tono que se lee (14:1 el nombre, 7,3:1 la
   dirección); el botón, en papel claro y lima al pasar el ratón. */
:is(section#jg-centros-region .json-centro-card, .single-centro .json-centro-card) {
  border: 1px solid var(--liwen-lila-borde) !important;
  background-color: var(--liwen-lila200) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-1);
}

:is(section#jg-centros-region .json-centro-card, .single-centro .json-centro-card) :is(p, small) {
  color: var(--liwen-tinta600) !important;
}

:is(.json-centro-card .btn-light, .single-centro .json-centro-card .boton-card) {
  border: 1px solid var(--liwen-linea-suave) !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-1);
}

:is(.json-centro-card .btn-light, .single-centro .json-centro-card .boton-card):hover {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
}

#btn-cargar-mas.btn-dark {
  border: 0;
  background: var(--liwen-tinta950);
  color: var(--liwen-papel);
  box-shadow: var(--liwen-sombra-2);
}

/* Bandas funcionales: papel hondo en vez del gris frío #f7f7f9. */
html section#jg-centros-region,
html #jg-centro-collapse {
  background-color: var(--liwen-papel-hondo) !important;
}

#jg-centro-collapse .jg-collapse-item {
  border-color: var(--liwen-linea-suave) !important;
  background: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-1);
}

#jg-centro-collapse .jg-collapse-item:has(.collapse.show) {
  border-color: var(--liwen-lila-borde) !important;
  background: var(--liwen-lila100) !important;
}

#jg-centro-collapse .jg-icon {
  border-color: var(--liwen-linea-media);
  background: var(--liwen-papel);
}

#jg-centro-collapse .jg-collapse-item:has(.collapse.show) .jg-icon {
  border-color: transparent;
  background: var(--liwen-lima);
}

/* ── 10. El mapa: grises cálidos y la chincheta de la marca ──────────────────────
   Las teselas, en gris por un filtro EN CADA TESELA (WebKit no lo aplica a la capa).
   Provisional: lo definitivo es un proveedor de teselas claras (decisión de licencia,
   fuera de esta tarea). La chincheta NO va por filtro: es un SVG propio
   (public/web/jgf-chincheta.svg) que pone jgf-mapas.js. */
.leaflet-container {
  background: var(--liwen-papel-hondo);
  font-family: var(--liwen-fuente);
}

.leaflet-tile-pane img.leaflet-tile {
  filter: grayscale(1) sepia(0.14) contrast(0.94) brightness(1.04);
}

:is(#jg-centros-region, #jg-centros) .map-container,
#mapa-filtro-centros {
  border-radius: var(--liwen-radio-lg) !important;
}

:is(#jg-centros-region, #jg-centros) .map-container {
  box-shadow: inset 0 0 0 1px var(--liwen-linea-suave), var(--liwen-sombra-2) !important;
}

.leaflet-bar {
  overflow: hidden;
  border: 1px solid var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-sm) !important;
  box-shadow: var(--liwen-sombra-2) !important;
}

.leaflet-bar a {
  border-bottom-color: var(--liwen-linea-suave) !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
}

.leaflet-popup-content-wrapper {
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-md) !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-3) !important;
}

.leaflet-popup-content-wrapper :is(p, span, small, div) {
  color: var(--liwen-tinta600);
}

.leaflet-popup-tip {
  background: var(--liwen-papel-claro) !important;
}

.leaflet-control-attribution {
  background: rgba(246, 244, 239, 0.86) !important;
  color: var(--liwen-tinta500) !important;
}

/* Con las esquinas del mapa redondeadas (hasta 28 px), la atribución, pegada a la
   esquina de abajo a la derecha, perdía la «s» de «contributors» en la curva. Separada
   10 px de los dos bordes y en píldora, cabe entera dentro de la curva. */
html .leaflet-container .leaflet-control-attribution {
  margin: 0 10px 10px 0 !important;
  padding: 0 8px !important;
  border-radius: var(--liwen-radio-pildora);
}

/* Sin subrayado, los enlaces de la atribución («Leaflet», «OpenStreetMap») se
   distinguen del texto por el tono y por el peso: entre los dos tonos de tinta solo hay
   1,5:1. */
.leaflet-control-attribution a {
  color: var(--liwen-tinta600) !important;
  font-weight: 600;
}

/* ── 11. Preguntas frecuentes: abierta, en lila 100 con el círculo lima ──────────── */
html .faq-accordion .accordion-item:has(.accordion-collapse.show),
html .faq-accordion .accordion-item:has(.accordion-collapse.collapsing) {
  border-color: var(--liwen-lila-borde) !important;
  background-color: var(--liwen-lila100) !important;
}

/* El círculo es un disco relleno de 36 px: pegado al final de la línea, la última
   palabra lo tocaba («…cuota de» a 1280, «gratuita?» en el iPhone; revisión 3,
   17/10/2026). El botón es flex y el círculo va al final con margin-left: auto, así que
   el hueco entre el texto y el disco lo da column-gap, sin mover nada a 1440 (allí ya
   quedaban 22 px). */
.faq-accordion .accordion-button {
  column-gap: 16px;
}

.faq-accordion .accordion-button.collapsed::after,
.faq-accordion .accordion-button:not(.collapsed)::after {
  width: 36px;
  height: 36px;
  border-radius: var(--liwen-radio-pildora);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315141a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px var(--liwen-lila-borde);
  transition: transform var(--liwen-mov-base) var(--liwen-mov-curva), background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

.faq-accordion .accordion-button.collapsed::after {
  background-color: var(--liwen-lila200);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  background-color: var(--liwen-lima);
  box-shadow: none;
}

.faq-accordion .accordion-item:last-child {
  margin-bottom: 0;
}

/* Por debajo de 992 las dos columnas de preguntas (inicio, ficha) van una encima de la
   otra: la última de la izquierda queda pegada a la primera de la derecha si pierde su
   margen. Conserva los 15 px del tema, como las demás. */
@media (max-width: 991.98px) {
  .col-lg-6:not(:last-child) > .faq-accordion .accordion-item:last-child {
    margin-bottom: 15px;
  }
}

/* ── 12. Blog ─────────────────────────────────────────────────────────────────── */
.badge-date {
  background-color: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
  box-shadow: 0 8px 18px -10px rgba(21, 20, 26, 0.6) !important;
}

/* «Leer más» de las tarjetas del blog: una ficha tonal en papel hondo, sin la línea
   gris y en caja de oración (custom.css la pasaba a MAYÚSCULAS de 12 px). Va dentro de
   una tarjeta, que ya es una capa: sin sombra propia (segunda vuelta, 18/10/2026). */
html .btn-read-more {
  border-color: transparent !important;
  background: var(--liwen-papel-hondo);
  color: var(--liwen-tinta950) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ── 13. Instagram: la lámina lila de «¿Por qué?» (JFP-2291, revisión del 23/10) ──────
   Era la foto del Figma (img-fondo-rrss.jpg, custom.css) a «cover» bajo un velo de tinta del
   30 al 42 %. Sobre una sección de miles de px (la rejilla en una columna) la foto se estiraba
   hasta enseñar solo una espalda en sombra: detrás de las casillas y de «Cargar más» quedaba
   #351b13 (luminancia 0,016), pegado al pie de tinta (1,16:1), y en escritorio, abajo a la
   izquierda, #0c0b0e. Antonio (23/10/2026): «evita poner negro de fondo en las capas, tiene
   que ser elegante». Ahora es la lámina lila de «¿Por qué?» y «¿Qué ofrecemos?» de Trabaja
   (la luz arriba, del lila 300 al lila de marca), a todos los anchos: sin foto ni velo, y el
   pie de marca se despega de ella. El shorthand con !important anula la foto del tema. */
html body #jg-rrss {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--liwen-lila300) 0%, var(--liwen-lila) 100%) !important;
  color: var(--liwen-tinta950);
}

/* El nombre de la cuenta iba en lima (custom.css), ilegible sobre el lila: en tinta (9:1). */
html body #jg-rrss .sb_instagram_header .sbi_header_text h3 {
  color: var(--liwen-tinta950) !important;
}

#jg-rrss .row.align-items-center.mb-5 {
  margin-bottom: 0 !important;
}

html body #sb_instagram .sb_instagram_header {
  margin-bottom: 40px;
}

/* El avatar es hijo flex de la cabecera, al lado del nombre de la cuenta: en el móvil,
   sin sitio para sus 200 px, encogía SOLO de ancho y el aro lima salía en óvalo (94 ×
   200 en el iPhone; revisión 3, 17/10/2026). Con el alto atado al ancho sigue siendo un
   círculo a cualquier ancho; a partir de la tableta, con sitio, no cambia (200 × 200). */
html body #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
  height: auto;
  aspect-ratio: 1;
}

html body #sb_instagram .sb_instagram_header .sbi_header_img img {
  width: 100% !important;
  height: auto !important;
  max-width: none;
  aspect-ratio: 1;
}

html body #sb_instagram .sbi_load_btn {
  border: 0 !important;
  background: var(--liwen-lima) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-brillo) !important;
}

/* «Seguir en Instagram», sobre la lámina lila: la píldora de papel claro con texto en tinta (en lila
   era lila sobre lila). «Cargar más» se queda en la lima de la acción, como la flecha de «¿Por qué?». */
html body #sb_instagram .sbi_follow_btn a {
  border: 0 !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-lila) !important;
}

/* JFP-2240 — «Seguir en Instagram» va ENCIMA de los posts (antes iba tras ellos) y los posts
   los pinta el script del feed propio (public/web/liwen.js, scripts/web-instagram.mjs), ya
   no el plugin. La altura de cada casilla, que antes le ponía el JS del plugin en línea
   (height: 238px), sale ahora de aspect-ratio, y la foto la llena sin estirarse. El orden no
   es un truco de CSS: el botón va antes que los posts también en el DOM. */
html body #sb_instagram .jgf-ig-seguir {
  margin: 0 0 20px;
  text-align: center;
}

html body #sb_instagram #sbi_images .sbi_item .sbi_photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

html body #sb_instagram #sbi_images .sbi_item .sbi_photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reserva, si una miniatura no llega: un azulejo de marca con el glifo de Instagram,
   no el degradado pastel (que se leía como un hueco). Desde JFP-2291, en lila claro con la
   luz arriba y el glifo en tinta (era tinta casi negra: «evita poner negro de fondo en las
   capas», Antonio, 23/10/2026), como la tarjeta de marca de las ciudades sin foto. */
html body #sb_instagram .sbi_photo:has(img.sbi_img_error) {
  position: relative;
  background:
    radial-gradient(110% 85% at 0% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 64%),
    var(--liwen-lila200) !important;
  box-shadow: inset 0 0 0 1px var(--liwen-lila-borde), var(--liwen-sombra-1);
}

html body #sb_instagram .sbi_photo:has(img.sbi_img_error)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: none;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315141a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='0.9' fill='%2315141a' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 14. Pie: tinta, títulos en lila (el lila como texto, solo sobre tinta) ─────── */
html .custom-footer {
  background-color: var(--liwen-tinta950);
  box-shadow: inset 0 1px 0 rgba(246, 244, 239, 0.08);
}

html .custom-footer .footer-title {
  color: var(--liwen-lila);
}

html .custom-footer :is(.footer-links a, .footer-description, .footer-legal-links a) {
  color: var(--liwen-sobre-tinta);
}

html .custom-footer .footer-links a.link-highlight {
  color: var(--liwen-papel);
}

html .custom-footer .footer-copyright {
  color: var(--liwen-sobre-tinta-tenue);
}

/* ── 15. Ficha: caja de contacto (lámina lima), testimonios y foto ─────────────────
   Etiquetas y textos en tinta; «Enviar» en el negro del Figma (--liwen-enviar). */
html #jg-contacto-centro .jg-form-container :is(.form-label, label, h2, h3) {
  color: var(--liwen-tinta950);
}

.jg-form-img-wrapper {
  box-shadow: var(--liwen-sombra-3);
}

html .jg-slider-item .jg-comment-text {
  color: var(--liwen-tinta600);
}

html .jg-slider-item .jg-user-role {
  color: var(--liwen-tinta500);
}

html .jg-slider-item.is-active .jg-card {
  border-color: var(--liwen-lila-borde) !important;
  box-shadow: var(--liwen-sombra-3);
}

/* Las flechas de los carruseles (testimonios de la ficha y de trabaja): el par del
   Figma, anterior en reposo y siguiente en lima. Con «html body» delante: el contorno
   negro de custom.css (.jg-slider-nav button, 0,1,1) le ganaba a esta regla (segunda
   vuelta, 18/10/2026: «Ojo con los bordes sólidos»). */
html body :is(.fan-control, .jg-slider-btn) {
  border: 1px solid var(--liwen-linea-suave);
  background: var(--liwen-papel-claro);
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-1);
}

html body :is(.fan-control.fan-next, .jg-slider-btn.jg-next) {
  border-color: transparent;
  background: var(--liwen-lima);
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-lima);
}

.jg-side-arrow {
  border: 1px solid var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-pildora) !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-2);
}

/* ── 16. /contacto: la tarjeta del formulario es una lámina lila (ver 5) ─────────
   Se localiza por la estructura —la columna que contiene el formulario—, no por el
   style en línea que reescribe el espejo. Campos de papel claro con borde lila 700
   (3,6:1 sobre el lila); el enlace y el foco, los del acabado. */
html section#jg-contacto .row > .col-md-6:has(.wpcf7-form) > .rounded-5 :is(.form-control, .form-select) {
  border: 1px solid var(--liwen-lila700) !important;
  background-color: var(--liwen-papel-claro) !important;
}

html section#jg-contacto header p.text-secondary {
  color: var(--liwen-tinta600) !important;
}

#jg-contacto .col-md-6 > .rounded-5:not(:has(.wpcf7-form)) img {
  box-shadow: var(--liwen-sombra-3);
}

/* ── 17. El lila como TEXTO sobre claro: lila 700 (7,7:1), no el de marca (2,4:1) ──
   Selectores MÁS específicos que los diez que vigila jfp2133 (la última regla con
   el selector exacto sigue leyendo el token). Y el blanco sobre lila (2,4:1) pasa a
   tinta (8,9:1). */
html #sobre-jg .custom-purple-text,
html #jg-modelo .jg-card strong,
html #jg-tienes-dudas h2,
html #jg-funciona .jg-step-num {
  color: var(--liwen-lila700);
}

html #sobre-jg .jg-equipo-nombre {
  color: var(--liwen-lila700) !important;
}

html #sobre-jg .jg-equipo-banner,
html #sobre-jg .jg-equipo-banner :is(strong, span),
html #propuesta-jg .bg-purple-dark.text-white,
html #propuesta-jg .bg-purple-dark.text-white *,
html #jg-formulario-inversor .btn-action-purple,
html #jg-soporte .column-title {
  color: var(--liwen-tinta950) !important;
}

/* ── 17b. Acerca de y franquicias: lo que se quedó fuera del acabado ─────────────
   Lo encontró la auditoría de contraste de la propuesta (17/10/2026): no está en el
   Figma, pero es la misma web y se notaba.
   · El bloque del fundador (acerca de) iba sobre una banda gris fría (#ededed) que
     chocaba con el papel, con el titular en blanco sobre el lila (2,4:1) y «CEO de JG
     fitness.» en lima sobre el lila (1,6:1). Ahora es una lámina lila como las demás,
     sobre el papel hondo, con el titular en tinta y el cargo en una píldora lima con
     texto de tinta (15,8:1): la lima de marca se queda, y se lee. */
html #sobre-jg .fundador-container {
  background-color: var(--liwen-papel-hondo) !important;
}

html #sobre-jg .fundador-container .jg-fundador-card {
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, var(--liwen-lila300) 0%, var(--liwen-lila) 78%) !important;
  box-shadow: inset 0 0 0 1px var(--liwen-lila-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-2), var(--liwen-sombra-halo-lila);
}

html #sobre-jg .fundador-container .jg-fundador-card h2 {
  color: var(--liwen-tinta950) !important;
}

html #sobre-jg .fundador-container .jg-fundador-card .ceo-span {
  width: fit-content;
  margin-top: 16px;
  padding: 4px 16px;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-lima);
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-brillo), 0 10px 22px -14px rgba(21, 20, 26, 0.5);
}

/* · Franquicias: las tarjetas del modelo, del proceso de apertura y de «¿Para quién?»
     llevaban bordes de 1 px negros o grises (#222, #5f6d68, #7a7a7a) y la píldora de la
     semana un cuadrado de radio 4 con borde negro: la capa de las demás tarjetas. */
html :is(#jg-modelo .jg-card, #jg-proceso .jg-step-card, #jg-funciona .jg-step-card) {
  border: 1px solid var(--liwen-linea-suave) !important;
  background-color: var(--liwen-papel-claro);
  box-shadow: var(--liwen-sombra-1);
}

html #jg-proceso .jg-badge {
  border-color: var(--liwen-linea-media);
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-papel);
  color: var(--liwen-tinta950);
}

/* · Los grises del tema. El de Bootstrap (#6c757d, en .text-secondary y .text-muted: el
     cuerpo entero de los artículos del blog) pasaba por poco sobre el blanco (4,7:1) y
     sobre el papel se queda en 4,3; los de custom.css (#777 en el equipo y en «Ver todos
     los tags», #8c8c8c en el formulario de inversor) no pasaban ni antes (4,1 y 3,1). El
     texto secundario es la tinta 600 (8,7:1 sobre el papel) y el terciario, la 500
     (5,7:1). Fuera de las superficies oscuras y de los héroes de foto, donde el texto
     es claro. La exclusión va con :where() para no sumar el peso de los id: así cualquier
     color que el Figma fije con más peso (el negro del texto de las tarjetas de servicio,
     el de la entradilla de la tienda) sigue mandando y este gris solo sustituye al de
     Bootstrap. */
html body :is(.text-secondary, .text-muted):not(:where(#jg-porque, .custom-footer, .cabecera-centros, .cabecera-servicios, .cabecera-entrenmiento-personal) *) {
  color: var(--liwen-tinta600) !important;
}

html :is(#sobre-jg .jg-equipo-centro, .jg-tags-blog .jg-ver-tags, #jg-formulario-inversor :is(.block-tag, .info-footer-text)) {
  color: var(--liwen-tinta500) !important;
}

/* · Los fondos grises fríos que quedaban del tema (#f4f4f4, #f2f2f0, #f8f9fa de
     Bootstrap), a la escala cálida: las bandas, papel hondo; la tarjeta del formulario
     de inversor, papel claro. */
html :is(section#jg-reservas, section#jg-modelo, section#jg-articulo-destacado.bg-light, #jgt-productos .card-img-top) {
  background-color: var(--liwen-papel-hondo) !important;
}

html .form-block-card {
  background-color: var(--liwen-papel-claro) !important;
}

/* · Los campos de Contact Form 7 fuera de /contacto (el formulario de inversor de
     franquicias): blancos, con la línea «campo» (3:1 o más; la suave daba 1,1:1). Al
     enfocar, el borde negro del acabado, que con este peso hay que repetir. */
html :is(.form-block-card, .wpcf7-form) :is(.form-control, .form-select, .wpcf7-select) {
  border-color: var(--liwen-linea-campo) !important;
  background-color: var(--liwen-blanco) !important;
}

html :is(.form-block-card, .wpcf7-form) :is(.form-control, .form-select, .wpcf7-select):focus-visible {
  border-color: var(--liwen-cta-cabecera) !important;
}

/* La «×» de la ventana del mapa, en el gris de Leaflet (#757575). */
.leaflet-popup-close-button {
  color: var(--liwen-tinta600) !important;
}

/* ── 18. Cookies: el banner y la ventana «Mostrar detalles» ───────────────────────
   «Aceptar todo» y «Rechazar todo» con el MISMO formato (lima, mismo tamaño) en las
   dos: el consentimiento no empuja hacia un lado (guía de cookies de la AEPD). En la
   ventana, «Guardar y cerrar» en tinta. Pestañas en un segmentado, sin mayúsculas. */
html body #cookiescript_injected #cookiescript_reject {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
  color: var(--liwen-cta-cabecera) !important;
}

html body #cookiescript_injected :is(#cookiescript_accept, #cookiescript_reject) {
  box-shadow: var(--liwen-sombra-brillo);
}

html body #cookiescript_injected_fsd {
  z-index: var(--liwen-capa-cookies) !important;
  background-color: rgba(21, 20, 26, 0.42) !important;
}

html body #cookiescript_injected_fsd :is(div, span, p, a, button, td, th, caption, label, table) {
  font-family: var(--liwen-fuente) !important;
}

html body #cookiescript_injected_fsd #cookiescript_fsd_wrapper {
  overflow: hidden;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-lg) !important;
  background-color: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-3) !important;
  color: var(--liwen-tinta950) !important;
}

html body #cookiescript_injected_fsd :is(.cookiescript_fsd_header, .cookiescript_fsd_main, .cookiescript_fsd_footer, .cookiescript_fsd_tabs_content) {
  border-color: var(--liwen-linea-suave) !important;
  background-color: var(--liwen-papel-claro) !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_header {
  min-height: 0;
  padding: 12px 12px 0 !important;
  border-bottom-color: transparent !important;
}

html body #cookiescript_injected_fsd #cookiescript_close {
  width: 34px;
  height: 34px;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-papel-hondo);
  color: var(--liwen-tinta950) !important;
  font-size: 20px !important;
  line-height: 33px !important;
  text-align: center;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_title {
  color: var(--liwen-tinta950) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Los textos con enlaces dentro, en tinta 500, y sus enlaces en negro y en 600 (3,4:1
   entre los dos): sin subrayado se siguen distinguiendo (bloque 19b). */
html body #cookiescript_injected_fsd :is(.cookiescript_fsd_description, .cookiescript_fsd_description span, .cookiescript_category_description, #cookiescript_aboutwrap, #cookiescript_aboutwrap p) {
  color: var(--liwen-tinta500) !important;
  line-height: 1.55 !important;
}

/* Cookie-Script pone la descripción a opacity: 0.85, que se aplica ENCIMA del color: la
   tinta 500 se quedaba en 4,29:1 (revisión 2, 17/10/2026). Opaca, 5,7:1. */
html body #cookiescript_injected_fsd .cookiescript_fsd_description > span {
  opacity: 1 !important;
}

html body #cookiescript_injected_fsd :is(#cookiescript_readmore, .cookiescript_fsd_description a, #cookiescript_aboutwrap a, .cookiescript_vendor_name a, #cookiescript_show_all_partners_button) {
  color: var(--liwen-negro) !important;
  font-weight: 600 !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_tabs {
  gap: 4px;
  width: auto !important;
  margin: 4px 24px 16px !important;
  padding: 4px !important;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-papel-hondo);
}

html body #cookiescript_injected_fsd .cookiescript_fsd_tabs > div {
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: var(--liwen-radio-pildora) !important;
  background: transparent !important;
  color: var(--liwen-tinta600) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_tabs > div.cookiescript_active {
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-1);
}

html body #cookiescript_injected_fsd .cookiescript_fsd_category {
  margin: 0 0 10px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-md);
  background: var(--liwen-papel-claro);
  box-shadow: var(--liwen-sombra-1);
}

html body #cookiescript_injected_fsd .cookiescript_fsd__category_name {
  color: var(--liwen-tinta950) !important;
  font-weight: 700 !important;
}

html body #cookiescript_injected_fsd :is(.cookiescript_fsd_cookies_control, .cookiescript_fsd_cookies_control span) {
  color: var(--liwen-tinta950) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_cookies_control svg {
  fill: var(--liwen-tinta950) !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_cookies {
  border-color: var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-sm) !important;
  background: var(--liwen-papel);
}

html body #cookiescript_injected_fsd .cookiescript_fsd_cookies_table :is(table, tbody, thead, tr, th, td) {
  background-color: transparent !important;
  color: var(--liwen-tinta950) !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_cookies_table td {
  border-top-color: var(--liwen-linea-suave) !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_cookies_table tr:nth-child(even) td {
  background-color: var(--liwen-papel-hondo) !important;
}

html body #cookiescript_injected_fsd .mdc-switch:enabled .mdc-switch__track::after {
  background: var(--liwen-lima) !important;
  opacity: 1 !important;
}

html body #cookiescript_injected_fsd .mdc-switch.mdc-switch--selected :is(.mdc-switch__handle)::after {
  background: var(--liwen-tinta950) !important;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_footer {
  border-top: 1px solid var(--liwen-linea-suave) !important;
}

html body #cookiescript_injected_fsd :is(#cookiescript_accept, #cookiescript_reject, #cookiescript_save) {
  min-height: 44px;
  padding: 0 20px !important;
  border: 1px solid transparent !important;
  border-radius: var(--liwen-radio-pildora) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #cookiescript_injected_fsd :is(#cookiescript_accept, #cookiescript_reject) {
  background-color: var(--liwen-lima) !important;
  color: var(--liwen-cta-cabecera) !important;
  box-shadow: var(--liwen-sombra-brillo);
}

html body #cookiescript_injected_fsd #cookiescript_save {
  background-color: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
}

/* «Cookie report created by CookieScript»: el proveedor la cuelga 20 px POR DEBAJO de
   la ventana (position: absolute; bottom: -20px), en blanco sobre el velo. Con las
   esquinas redondeadas la ventana recorta lo que se sale (overflow: hidden) y la línea
   desaparecía entera, con sus dos enlaces (revisión 2, 17/10/2026). Ahora va DENTRO,
   en el pie, bajo los botones, como la pone el propio proveedor en el móvil; en tinta
   500 y sus enlaces en negro y en 600, como los demás enlaces de la ventana. En una
   línea propia a partir de 441 px; por debajo la sigue quitando el proveedor, como en
   DEV (aquí no se oculta ni se enseña nada que él no haga). */
@media (min-width: 441px) {
  html body #cookiescript_injected_fsd .cookiescript_fsd_reportby {
    display: block;
  }
}

html body #cookiescript_injected_fsd .cookiescript_fsd_reportby {
  position: static !important;
  padding: 0 24px 14px !important;
  color: var(--liwen-tinta500) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  text-align: right;
}

html body #cookiescript_injected_fsd .cookiescript_fsd_reportby a {
  color: var(--liwen-negro) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

html body #cookiescript_injected_fsd :is(.cookiescript_fsd_cookies, .cookiescript_fsd_tabs_content)::-webkit-scrollbar-thumb {
  background-color: rgba(21, 20, 26, 0.3) !important;
}

/* En el móvil el proveedor la pone a pantalla completa con esquinas vivas: una
   lámina con 8 px de aire y el radio de la casa. */
@media (max-width: 440px) {
  html body #cookiescript_injected_fsd #cookiescript_fsd_wrapper {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100% - 16px - env(safe-area-inset-top, 0px)) !important;
    border-radius: var(--liwen-radio-lg) !important;
  }

  html body #cookiescript_injected_fsd .cookiescript_fsd_tabs {
    margin: 4px 16px 12px !important;
  }

  /* El proveedor deja la cabecera (título y descripción) en una caja de 140 px con
     scroll: con el título en dos líneas solo se veía línea y media de la descripción,
     cortada a media frase sobre las pestañas, y «Política de privacidad» quedaba dentro
     de una caja que nadie va a desplazar. El título, más pequeño, y la caja con sitio
     para la descripción entera; las categorías siguen con su propio scroll debajo. */
  html body #cookiescript_injected_fsd .cookiescript_fsd_title {
    padding-right: 40px;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  html body #cookiescript_injected_fsd .cookiescript_fsd_main_info {
    max-height: min(300px, 42vh) !important;
  }
}

/* ── 19. Foco: sobre tinta, el contorno en lima (el negro no se ve). «¿Por qué?» e Instagram ya
   no van en tinta ni sobre una foto oscura (JFP-2291): sobre su lila, el contorno de siempre
   (la lima sobre el lila daría 1,6:1). ──────────────────────────────────────────────── */
.custom-footer :where(a, button, .btn, [tabindex]):focus-visible,
:is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) a.header-button.me-2:focus-visible {
  outline-color: var(--liwen-lima) !important;
}

/* ── 19b. Sin subrayados ─────────────────────────────────────────────────────────
   Antonio (17/10/2026), mirando DEV: «Quita los subrayados de las letras, que no queda
   bien». Ningún texto de la web va subrayado: pretítulos (los del Figma y los del tema,
   «QUÉ OFRECEMOS», «DÓNDE ENCONTRARNOS»…), menú (la página activa y el ratón se marcan
   con una píldora, en el acabado), botones, tarjetas, el pie, el banner y la ventana de
   las cookies, el mapa, los enlaces de contacto y los teléfonos. El tema, Bootstrap
   (a { text-decoration: underline }), Leaflet y Cookie-Script subrayan en una docena de
   sitios y con distinto peso; una regla para todos, para que un subrayado nuevo del tema
   no vuelva a colarse. La clase de Bootstrap .text-decoration-underline (los «Llamar al
   centro» y «WhatsApp» de la ficha) lleva su propio !important y necesita su nombre. No hay texto tachado en la web (ni <del> ni <s>): si algún día
   hace falta un precio tachado, se excluye aquí con su porqué.
   Lo vigila src/test/jfp2134-web-flotantes-y-subrayados.test.ts, que recorre las 13
   páginas clave buscando subrayados y rayas bajo el texto, también al pasar el ratón. */
html body *,
html body *::before,
html body *::after,
html body .text-decoration-underline {
  text-decoration-line: none !important;
}

/* Los enlaces dentro de un texto corrido (artículos del blog y páginas legales) se
   distinguen sin subrayado y sin depender solo del tono (WCAG 1.4.1, técnica G183): el
   texto en tinta 500 (5,7:1 sobre el papel) y el enlace en negro y en 600, que dan 3,4:1
   entre los dos; al pasar el ratón, una píldora lima detrás; al enfocar, el foco de la
   casa (contorno negro y halo lima). */
html :is(.entry-content, .legal) :is(p, li, td, blockquote) {
  color: var(--liwen-tinta500) !important;
}

html :is(.entry-content, .legal) :is(p, li, td, blockquote) a:not(.btn) {
  color: var(--liwen-negro) !important;
  font-weight: 600;
  border-radius: var(--liwen-radio-xs);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html :is(.entry-content, .legal) :is(p, li, td, blockquote) a:not(.btn):hover {
  background-color: var(--liwen-lima-suave);
}

/* El enlace de privacidad de los formularios y el de la descripción del banner, igual. */
:is(.jgf-privacidad a, html body #cookiescript_injected #cookiescript_readmore, html body #cookiescript_injected_fsd #cookiescript_readmore) {
  border-radius: var(--liwen-radio-xs);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

:is(.jgf-privacidad a, html body #cookiescript_injected #cookiescript_readmore, html body #cookiescript_injected_fsd #cookiescript_readmore):hover {
  background-color: var(--liwen-lima-suave);
}

/* La casilla «He leído y acepto la política de privacidad» (las 69 fichas y /contacto)
   es un enlace dentro de una frase: el enlace en negro y en 600, al pasar el ratón la
   píldora lima y al enfocar el foco de la casa. La etiqueta, en línea y no en bloque en
   línea (el de Bootstrap): en /contacto, con la letra de 21 px que el tema daba a sus
   párrafos, no cabía junto a la casilla y saltaba entera a la línea de abajo; en línea
   sigue a la casilla y parte donde haga falta. (Desde la revisión del 23/10 de JFP-2291 la
   casilla de /contacto mide lo que los rótulos de su formulario, 14 px: cierre, C10.) */
html .jgf-privacidad label {
  display: inline;
}

html .jgf-privacidad label a {
  color: var(--liwen-negro) !important;
  font-weight: 600;
}

/* En la ficha, sobre la lámina lima, la etiqueta en tinta 500 (5,3:1 sobre la lima) y
   el enlace llega a 3,4:1 frente a ella; antes iba en tinta 950 (1,1:1) y solo se
   distinguía por el peso. Con !important porque la caja de contacto pone sus etiquetas
   en tinta 950 con un id (bloque 15). En /contacto NO: su caja es la lámina lila, y
   sobre el lila (luminancia 0,39) ningún par de tintas da a la vez 4,5:1 del texto
   frente al fondo y 3:1 del enlace frente al texto; allí la etiqueta sigue en tinta y
   el enlace se distingue por el peso, la píldora del ratón y el foco (límite conocido,
   revisión de JFP-2134). */
html #jg-contacto-centro .jgf-privacidad label {
  color: var(--liwen-tinta500) !important;
}

/* «O contacta directamente: Llamar al centro · WhatsApp» (ficha, sobre la lámina lima):
   sin subrayado eran dos palabras sueltas que no parecían pulsables. Ahora son dos
   píldoras de papel claro y, al pasar el ratón, en tinta. Segunda vuelta (18/10/2026,
   «Ojo con los bordes sólidos»): sin la línea «campo», que es la de los campos de
   formulario; las despega de la lima la sombra teñida de lima (sobre-lima). El borde se
   queda transparente para no mover la fila. El margen negativo devuelve lo que suma el relleno: la fila mide lo
   mismo y «O contacta directamente» sigue donde lo pone el Figma (jfp2134-web-figma). A
   1400 o más, donde el Figma pone los tres en UNA fila con 34 px entre ellos, también en
   horizontal: si no, la fila no cabe en los 603 px de la columna y se parte. */
html .jg-form-container .jg-direct-contact a {
  display: inline-flex;
  align-items: center;
  margin-block: -6px;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--liwen-radio-pildora);
  background-color: var(--liwen-papel-claro);
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-lima);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

@media (min-width: 1400px) {
  html .jg-form-container .jg-direct-contact a {
    margin-inline: -10px;
    padding-inline: 10px;
  }
}

/* Por debajo de 1200 el tema reparte la fila con space-between: en el móvil y la tableta
   la frase iba en una línea y las dos píldoras, cada una a un extremo de la siguiente.
   Juntas a la izquierda, con el hueco de 16 px del propio HTML (gap-3). A 1200 o más la
   fila ya va a la izquierda con los 34 px del Figma (no se toca). */
@media (max-width: 1199.98px) {
  html .jg-form-container .jg-direct-contact {
    justify-content: flex-start;
  }
}

html .jg-form-container .jg-direct-contact a:hover {
  border-color: var(--liwen-tinta950);
  background-color: var(--liwen-tinta950);
  color: var(--liwen-papel) !important;
}

/* «Leer más» de los testimonios: en negro y en 600 (el tema), y al pasar el ratón la
   píldora lima de los enlaces, en vez del subrayado del tema. */
html .jg-read-more {
  border-radius: var(--liwen-radio-xs);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jg-read-more:hover {
  background-color: var(--liwen-lima-suave);
}

/* ── 20. Ritmo vertical: UN aire entre bloques, S = --liwen-espacio-seccion ──────────
   A 768 o más (el móvil es de JFP-2135 y no se toca). Entre los bordes visibles de
   dos bloques, S; dentro de una lámina de color, S de relleno. Las bandas (franjas,
   barra lila, banda lima) van pegadas. Sustituye a los márgenes ENTRE secciones del
   ritmo del Figma a 1400 (estilos.mjs, «el ritmo vertical del Figma»), que se quitan;
   las medidas DENTRO de cada sección (del H2 a las tarjetas, etc.) se quedan. */
@media (min-width: 768px) {
  /* Inicio */
  /* Las franjas del héroe suben con «top» (custom.css: −30 de 768 a 991, −80 hasta
     1399 y −102 desde 1400): su caja no se mueve y dejaba ese hueco de más bajo lo
     que se ve. Se descuenta. */
  html section#jg-entrenamiento-personal {
    --liwen-franjas-subida: 30px;
    margin: 0 !important;
    padding: max(0px, calc(var(--liwen-espacio-seccion) - var(--liwen-franjas-subida))) 0 0 !important;
  }

  html #jg-entrenamiento-personal .jg-box-v {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html section#jg-porque {
    margin-top: var(--liwen-espacio-seccion) !important;
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: var(--liwen-espacio-seccion) !important;
  }

  html section.jg-servicios:not(.single-centro-servicios) {
    margin-top: 0 !important;
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: 0 !important;
  }

  html section#jg-centros {
    margin-top: var(--liwen-espacio-seccion) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html section#jg-centros > .container {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: var(--liwen-espacio-seccion) !important;
  }

  html [id^="jg-faq"].mt-5,
  html #jg-articulos.mt-5 {
    margin-top: var(--liwen-espacio-seccion) !important;
  }

  html :is([id^="jg-faq"], #jg-articulos) > .container.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html #jg-articulos {
    padding-bottom: var(--liwen-espacio-seccion);
  }

  /* Antes del pie, la última fila de artículos trae 24 de margen (mb-4). */
  html section#jg-articulos:has(+ .custom-footer) {
    padding-bottom: max(0px, calc(var(--liwen-espacio-seccion) - 24px));
  }

  /* La banda lima va pegada a Instagram: era una tira de papel suelta entre las dos. */
  html #jg-rrss.mt-5 {
    margin-top: 0 !important;
    padding-block: var(--liwen-espacio-seccion) calc(var(--liwen-espacio-seccion) + var(--liwen-radio-xl)) !important;
  }

  html #jg-rrss > .container.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Ficha */
  html #jg-entrenamiento-personal-header + .mt-5 {
    margin-bottom: 0 !important;
  }

  html section#jg-galeria-centro {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: var(--liwen-espacio-seccion) !important;
  }

  html section#jg-galeria-centro > .container.py-5 {
    padding-top: 0 !important;
  }

  /* La banda del buscador y el mapa (ficha, centros y provincias). */
  html section#jg-centros-region.py-5 {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: var(--liwen-espacio-seccion) !important;
  }

  html section#jg-centros-region.py-5 > .container.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html section.jg-servicios.single-centro-servicios.py-5 {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: 0 !important;
  }

  /* 30 = lo que el carrusel deja sobre el icono de la cita (pista y margen de la tarjeta). */
  html section#jg-slide-comentarios.py-5 {
    padding-top: max(0px, calc(var(--liwen-espacio-seccion) - 30px)) !important;
    padding-bottom: 0 !important;
  }

  html #jg-slide-comentarios > .container.py-5:not(:has(*)) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 16 = el relleno de la pista de testimonios bajo las tarjetas (pb-3). */
  html section#jg-slide-comentarios + [id^="jg-faq"].mt-5 {
    margin-top: max(0px, calc(var(--liwen-espacio-seccion) - 16px)) !important;
  }

  html section#jg-contacto-centro.py-5 {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: var(--liwen-espacio-seccion) !important;
  }

  /* Servicios */
  /* 80 = el aire que el collage de fotos deja dentro de su caja, bajo la última. */
  html section#jg-metodo {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: max(0px, calc(var(--liwen-espacio-seccion) - 80px)) !important;
  }

  html section#jg-formulario {
    padding-top: var(--liwen-espacio-seccion) !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 992px) {
  html section#jg-entrenamiento-personal {
    --liwen-franjas-subida: 80px;
  }
}

@media (min-width: 1400px) {
  html section#jg-entrenamiento-personal {
    --liwen-franjas-subida: 102px;
  }
}

/* ── 20b. Las fotos de los posts no desbordan a ningún ancho ──────────────────────
   Las fotos centradas de WordPress (figure.aligncenter) son display: table y su imagen
   trae un ancho fijo (style="width:552px", o el width="1200" del propio img); las de
   pie (figure.wp-caption) llevan width: 960px en línea. Una tabla no encoge por debajo
   de lo que pide su contenido, así que la figura se quedaba con ese ancho: a 820 px
   cuatro posts medían 1022-1262 de layout y a 1280 dos llegaban a 1330, con la foto
   cargada o sin ella. Chrome Android (también en tableta) ensancha entonces el viewport
   de layout y los dos botones flotantes, que se anclan a él, se salían de la pantalla:
   el WhatsApp en x = 948-1194 con 820 visibles (revisión 2 de JFP-2134, 17/10/2026).
   En bloque, tan ancha como su foto pero nunca más que la columna, y centrada como
   antes; el !important gana al ancho en línea. Antes vivía en el bloque móvil, que no
   rige a partir de 768. */
html .entry-content figure.aligncenter {
  display: block !important;
  width: fit-content;
  max-width: 100% !important;
  margin-inline: auto;
}

html .entry-content .wp-caption {
  max-width: 100% !important;
  height: auto;
}

html .entry-content img {
  max-width: 100%;
  height: auto;
}

html .entry-content :is(figure, .wp-caption) img {
  max-width: 100% !important;
  height: auto !important;
}

/* ══ Pulido: sin bordes duros, la tienda y las plantillas menos miradas (JFP-2134,
   segunda vuelta, 18/10/2026) ═════════════════════════════════════════════════════
   Antonio: «Ojo con los bordes sólidos de algunas div y botones, quedan feos» y «Que
   quede profesional y elegante». Capas con línea fina y sombra suave, jerarquía de
   elevación (plano < reposo < destacado < flotante) y nada de contornos oscuros. */

/* ── P1. Sin emoticonos: lo que pone la hoja (scripts/web-sin-emoticonos.mjs) ─────
   Antonio: «Quita los emoticonos, que se ve que lo ha hecho una IA». */

/* P1a. «¿Por qué JG fitness?» (inicio y franquicias): el título queda solo y lleva
   encima un filete lima corto. La cuadrícula «icono en disco + título» era justo el
   patrón de plantilla; el filete es tipográfico y de la marca. Va en el aire de arriba
   de la tarjeta, fuera de la caja del título (posición absoluta): la tarjeta mide lo
   mismo que en el Figma (152 de alto, lo vigila jfp2134-web-figma-escritorio) y el
   filete no es un subrayado (está encima del texto, no debajo). Desde JFP-2291 las tarjetas
   son de papel translúcido sobre el lila: el filete, en lila 700 (la lima sobre claro no se
   ve, 1,1:1), como ya lo llevaba franquicias. */
html #jg-porque .jg-porque-lista :is(.jg-porque-titulo, h3) {
  position: relative;
}

html #jg-porque .jg-porque-lista :is(.jg-porque-titulo, h3)::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-lila700);
}

/* P1b. Las estrellas de las reseñas: iconos de Bootstrap en el amarillo del Figma (el
   token existía y no se usaba). Una sola forma de estrella en la fila. */
html .jg-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

html .jg-stars .jg-estrella {
  color: var(--liwen-estrellas);
  font-size: 16px;
  line-height: 1;
}

/* P1c. Tarjeta de centro: dirección, horario y «Descubre este centro», con el mismo
   sistema de iconos que el teléfono de al lado. */
html :is(.json-centro-card, .card) .card-text > .bi:is(.bi-geo-alt-fill, .bi-clock-fill) {
  font-size: 0.95em;
  line-height: 1.5;
}

html .btn .bi-arrow-up-right {
  font-size: 0.85em;
  vertical-align: -0.05em;
}

/* ── P2. Botones: un sistema, ningún contorno oscuro ──────────────────────────────
   Primario lima: brillo + lima. Primario tinta: boton-tinta. Secundario sobre papel:
   papel claro, línea rgba media y sombra de reposo; sobre una lámina, velo de papel sin
   línea y la sombra teñida de la lámina. Al pasar el ratón, si el tema los rellenaba de
   tinta, se rellenan de tinta sin borde. Los bordes que pone una regla nuestra se
   cambian en su sitio (estilos.mjs y la paleta); aquí, los de custom.css. */

/* P2a. Primario lima sin la raya negra: bloque lila del inicio (estilos.mjs ya deja su
   borde transparente, del mismo ancho para no mover el Figma) y «¡Agenda tu primera
   sesión gratis!» de entrenamiento personal presencial (custom.css). */
html #jg-entrenamiento-personal .jg-box-v .btn-yellow,
html #jg-tienes-dudas a.btn {
  border-color: transparent !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-lima);
}

/* P2b. Secundario SOBRE LA LÁMINA CREMA («Encuentra tu centro más cercano» del inicio):
   papel claro, sin línea, con su sombra de reposo. Sobre lila iba en velo de papel; sobre
   crema el velo casi desaparecía (JFP-2237), así que ahora es una píldora de papel claro
   (1,16:1 del crema) que se apoya en la sombra. Al pasar el ratón, blanco y más sombra. */
html #jg-entrenamiento-personal .jg-box-v .btn-transparent {
  border-color: transparent !important;
  background: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-1);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva), transform var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html #jg-entrenamiento-personal .jg-box-v .btn-transparent:hover {
  border-color: transparent !important;
  background: var(--liwen-blanco) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-2);
  transform: translateY(-1px);
}

/* P2c. Secundario SOBRE PAPEL («Encuentra tu centro más cercano» de las reservas de
   servicio/*, provincias y acerca de): papel claro, línea rgba media, sombra de
   reposo. Al pasar el ratón se rellena de tinta (como «Llamar al centro»), sin borde. */
html #jg-reservas .jg-btn-outline {
  border-color: var(--liwen-linea-media) !important;
  background: var(--liwen-papel-claro);
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-1);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), color var(--liwen-mov-rapido) var(--liwen-mov-curva), box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html #jg-reservas .jg-btn-outline:hover {
  border-color: transparent !important;
  background: var(--liwen-tinta950);
  color: var(--liwen-papel);
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* «Primera sesión gratis» (tinta), al lado: la sombra de todo botón tinta. */
html #jg-reservas :is(.btn-dark, .jg-btn-dark),
html #jg-reservas .jg-btn:not(.jg-btn-outline) {
  border-color: transparent !important;
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* P2e. Botones sobre foto (héroe de la ficha: «Contacta por WhatsApp» y «con el
   correo»; héroe de trabaja: «Enviar candidatura»): sin contorno, con la sombra de
   botón sobre foto. El tamaño es el del Figma (32 px en la ficha), no se toca. */
html .cabecera-centros .btn-lille,
html .cabecera-centros .btn-lille:hover {
  border-color: transparent !important;
}

html .cabecera-centros .btn-lille {
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-foto);
}

/* Trabaja: el .border-black de Bootstrap lleva !important; esto le gana con el peso. */
html body .jg-btn-outline.border-black,
html body .jg-btn-outline.border-black:hover {
  border-color: transparent !important;
}

html body .jg-btn-outline.border-black {
  box-shadow: var(--liwen-sombra-sobre-foto);
}

/* P2f. CTA de franquicias («Solicita información de franquicias»): blanca sobre papel,
   destacada, sin la raya negra. */
html #jg-casos a.btn,
html #jg-casos a.btn:hover {
  border-color: transparent !important;
}

html #jg-casos a.btn {
  box-shadow: var(--liwen-sombra-2);
}

/* P2g. Buscador del blog: «Buscar» en la tinta de la casa, no el #212529 de Bootstrap. */
html #jg-busqueda-blog .btn-dark,
html #jg-busqueda-blog .btn-dark:hover {
  border-color: transparent !important;
  background: var(--liwen-tinta950) !important;
}

html #jg-busqueda-blog .btn-dark {
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* P2h. Reproducir (franquicias): el disco lima de la casa, sin el aro blanco, con la
   sombra sobre foto. */
html .play-btn-overlay {
  border: 0 !important;
  background-color: var(--liwen-lima) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-foto);
}

html .play-btn-overlay svg {
  fill: var(--liwen-tinta950);
}

/* ── P3. La tienda ────────────────────────────────────────────────────────────────
   Sin un contorno negro: filtros y tallas en reposo como ficha de papel claro con la
   línea fina y sombra de reposo. Seleccionado: el filtro en lima (navegar = lima, como
   las categorías del blog) y la talla en tinta (elegir un valor de formulario = tinta,
   como las casillas). La lima de la tarjeta se queda para «Añadir al carrito». El
   carrito es el botón flotante de la derecha (en el acabado, junto al WhatsApp). */
html #jgt-filtros .btn {
  border: 1px solid var(--liwen-linea-suave) !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-1);
}

html #jgt-filtros .btn:hover {
  background: var(--liwen-blanco) !important;
  box-shadow: var(--liwen-sombra-2);
}

html #jgt-filtros .btn.btn-dark,
html #jgt-filtros .btn.btn-dark:hover {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-lima);
}

html #jgt-productos [data-tallas] .btn {
  border: 1px solid var(--liwen-linea-suave) !important;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-1);
}

html #jgt-productos [data-tallas] .btn.btn-dark {
  border-color: transparent !important;
  background: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* «Añadir al carrito»: la acción, lima sin raya; al pasar el ratón no se vacía (era
   transparente), toma la lima con volumen. «Añadido» (tienda.js marca el botón con
   data-ocupado="1" un momento), en tinta. */
html #jgt-productos [data-anadir],
html #jgt-productos [data-anadir].btn-dark {
  border-color: transparent !important;
  background: var(--liwen-lima) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-lima);
}

html #jgt-productos [data-anadir].btn-dark:hover {
  background: var(--liwen-lima-volumen) !important;
}

/* (Con el ratón encima —y en el iPhone, donde el :hover se queda pegado tras el toque—
   la regla de arriba es más específica y pintaba «Añadido» en papel sobre lima, 1,2:1:
   el estado ocupado se declara también con :hover y con la misma especificidad.) */
html #jgt-productos [data-anadir][data-ocupado="1"],
html #jgt-productos [data-anadir].btn-dark[data-ocupado="1"],
html #jgt-productos [data-anadir].btn-dark[data-ocupado="1"]:hover {
  background: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* «Sin existencias»: tonal (papel hondo) y legible (tinta 600, 7,6:1), no un contorno
   gris al 65 % de opacidad. */
html #jgt-productos .btn-outline-secondary.w-100 {
  border-color: transparent !important;
  background: var(--liwen-papel-hondo) !important;
  color: var(--liwen-tinta600) !important;
  opacity: 1;
}

/* Tarjetas de producto: la capa de reposo común (estilos.mjs ya no le quita la sombra)
   y destacada al pasar el ratón. El precio y los botones, al pie: alineados entre
   tarjetas de distinto texto. */
html #jgt-productos .card {
  border-color: var(--liwen-linea-suave) !important;
  box-shadow: var(--liwen-sombra-1) !important;
}

html #jgt-productos .card:hover {
  box-shadow: var(--liwen-sombra-2) !important;
}

html #jgt-productos .card-body {
  display: flex;
  flex-direction: column;
}

html #jgt-productos .card-body > p.h5 {
  margin-top: auto;
}

/* El aviso de pruebas (era un fondo #FFE8D6 escrito en el HTML): papel hondo y tinta. */
html #jgt-aviso-pruebas {
  border-radius: var(--liwen-radio-sm) !important;
  background: var(--liwen-papel-hondo);
  color: var(--liwen-tinta950);
}

/* La hoja del carrito: papel, flotante (sombra 3) y redondeada por su lado libre; sin el
   azul ni el rojo de Bootstrap. */
html #jgt-panel {
  border-left: 0 !important;
  background: var(--liwen-papel);
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-3);
}

@media (min-width: 576px) {
  html #jgt-panel {
    border-top-left-radius: var(--liwen-radio-lg);
    border-bottom-left-radius: var(--liwen-radio-lg);
  }
}

html #jgt-panel .offcanvas-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--liwen-linea-suave) !important;
}

html #jgt-panel .btn-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--liwen-papel-hondo);
  background-size: 12px;
  opacity: 1;
}

html #jgt-lineas > li {
  border-bottom: 1px solid var(--liwen-linea-suave) !important;
}

html #jgt-lineas .btn-group {
  overflow: hidden;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-papel-hondo);
}

html #jgt-lineas .btn-group > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 0 !important;
  background: transparent;
  color: var(--liwen-tinta950);
  line-height: 1;
}

html #jgt-panel #jgt-volver,
html #jgt-lineas [data-quitar] {
  color: var(--liwen-tinta950) !important;
  font-weight: 600;
  text-decoration: none !important;
}

html #jgt-form .form-control {
  min-height: 48px;
  border: 1px solid var(--liwen-linea-campo) !important;
  border-radius: var(--liwen-radio-sm) !important;
  background: var(--liwen-blanco);
}

/* La casilla de privacidad de la hoja, como la de las fichas (bloque 19b de la paleta):
   la etiqueta en tinta 500 y el enlace en negro y en 600 (3,3:1 frente a ella), con la
   píldora lima al pasar el ratón; sin el azul de Bootstrap. La casilla, con el borde de
   campo (3:1) y marcada en tinta. */
html #jgt-form .form-check-label {
  color: var(--liwen-tinta500);
}

html #jgt-form .form-check-label a {
  border-radius: var(--liwen-radio-xs);
  color: var(--liwen-negro) !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html #jgt-form .form-check-label a:hover {
  background-color: var(--liwen-lima-suave);
}

html #jgt-form .form-check-input {
  border-color: var(--liwen-linea-campo);
}

html #jgt-form .form-check-input:checked {
  border-color: var(--liwen-tinta950);
  background-color: var(--liwen-tinta950);
}

html #jgt-panel .jg-btn-submit {
  min-height: 52px;
  border: 0 !important;
  /* Una píldora, como todos los botones de la web (traía rounded-3, 12 px). */
  border-radius: var(--liwen-radio-pildora) !important;
  background: var(--liwen-tinta950) !important;
  color: var(--liwen-papel) !important;
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* El velo detrás de la hoja: tinta translúcida, sin desenfoque. */
html .offcanvas-backdrop.show {
  opacity: 1;
  background: rgba(21, 20, 26, 0.38);
}

/* ── P4. Tarjetas y bloques de las plantillas menos miradas ───────────────────────── */

/* P4a. servicio/*: «¿Para quién?», «Beneficios», «¿Por qué JG fitness?». Eran blanco
   puro con un borde #2d4236 de 1,5 px, estiradas al alto del vídeo. La capa de reposo
   del sistema (como «Cómo funciona», en la misma página), en columna con su aire. */
html #jg-preguntas .jg-card {
  height: auto !important;
  margin-top: 0 !important;
  border: 1px solid var(--liwen-linea-suave) !important;
  border-radius: var(--liwen-radio-lg) !important;
  background-color: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-1);
}

html #jg-preguntas .col-lg-6.flex-column {
  justify-content: flex-start !important;
  gap: 24px !important;
}

/* P4a (JFP-2242). Sin «Leer más»: el párrafo de cada tarjeta es lo último y su mb-4 del tema
   (1,5 rem, con !important) dejaba 49 px bajo el texto frente a los 25 del relleno, un hueco
   donde estaba el botón. Medido en Chrome a 1280 con los 3 botones fuera del HTML. */
html #jg-preguntas .jg-card > p:last-child {
  margin-bottom: 0 !important;
}

/* P4b. El reproductor de Vimeo: una caja negra estirada al alto de la columna. Ahora,
   la proporción del vídeo (9:16, la de la serie «Servicio /»), a 400 px como mucho,
   con fondo tinta en vez de #000 (va en línea), el radio de la casa y la sombra de
   destacado (es contenido, no interfaz flotante). Arriba, a la altura de la primera
   tarjeta; nunca pegado al lector al bajar. */
html #jg-preguntas .jg-rounded-image:has(> iframe) {
  width: min(100%, 400px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: var(--liwen-radio-lg) !important;
  background-color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-2);
}

html #jg-preguntas .col-lg-6:has(> .jg-rounded-image > iframe) {
  align-items: flex-start;
}

html :is(#jg-tienes-dudas, #jg-casos) .overflow-hidden:has(> iframe) {
  max-width: 400px;
  margin-inline: auto;
  border-radius: var(--liwen-radio-lg) !important;
  background-color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-2);
}

/* P4c. Acerca de: los retratos del equipo, sin el marco negro (CSS) ni el que traen
   dentro del JPG (recorte de 2 px). Foto plana: no lleva sombra. Sus nombres, y las
   etiquetas de franquicias y de «Soporte», en caja de oración: no son del Figma
   (custom.css las pasaba a mayúsculas con !important). */
html #sobre-jg .jg-equipo-thumb {
  border: 0 !important;
  border-radius: var(--liwen-radio-md);
  clip-path: inset(2px round var(--liwen-radio-md));
}

html #sobre-jg .jg-equipo-nombre,
html #jg-formulario-inversor .block-tag,
html #jg-soporte .column-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* P4d. Fotos con el marco oscuro DENTRO del fichero: recorte de 3 px con la forma de la
   caja (la sombra, si la hay, va en el envoltorio y no se pierde). Es la foto de las
   reservas de 13 páginas. */
html .jg-img-wrapper > img.jg-rounded-img {
  clip-path: inset(3px round var(--liwen-radio-xl));
}

/* El método: aquí el recorte dejaba ver una banda sin la sombra del envoltorio. La foto
   crece un 6 % DENTRO de su caja, que la recorta con su radio: el trazo del PNG queda
   fuera y la sombra de la caja se conserva. */
html #jg-metodo .metodo-img {
  overflow: hidden;
}

html #jg-metodo .metodo-img > img {
  transform: scale(1.06);
}

/* El grupo de entrenadores (acerca de) trae el marco en el JPG: foto plana, recortada
   (la sombra que le daba el acabado la cortaría el recorte). Las de fisioterapeutas y
   nutricionistas no lo traen: se quedan como están. */
html #sobre-jg img.rounded-4[src$="/conoce-entrenadores.jpg"] {
  box-shadow: none;
  clip-path: inset(3px round var(--liwen-radio-lg));
}

/* P4e. La cinta lima («centros de entrenamiento personal»): sin las rayas negras que trae
   la imagen, y legible en el móvil (allí la imagen entera medía 15 px de alto y el
   texto, 4,5). */
html div:has(> img[src$="/banda-lima.png"]),
html div:has(> img[src$="/banda-lima-sincentro.png"]) {
  overflow: hidden;
  background: var(--liwen-lima);
}

html :is(img[src$="/banda-lima.png"], img[src$="/banda-lima-sincentro.png"]) {
  display: block;
  clip-path: inset(3px 0 3px 3px);
}

@media (max-width: 767.98px) {
  html :is(img[src$="/banda-lima.png"], img[src$="/banda-lima-sincentro.png"]) {
    width: auto;
    max-width: none;
    height: 40px;
  }
}

/* P4f. «Cómo funciona la sesión»: el círculo del icono, un círculo también en el móvil
   (era un óvalo de 45 × 36), en la tinta de la casa. */
html #jg-funciona .jg-icon-circle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background-color: var(--liwen-tinta950);
}

/* ── P5. Secciones: papel liso o lámina, nada en medio ─────────────────────────────── */

/* P5a. Las neutras, en el papel de la página (eran blanco puro o #f4f4f0 a sangre). */
html body section:is(#jg-tienes-dudas, #jg-aptitudes, #jg-perfiles, #jg-formulario-cv),
html body:not(.page-template-franquicias) section#jg-funciona {
  background-color: transparent !important;
}

/* P5b. Las lilas a sangre pasan a LÁMINA (como el bloque lila del inicio): el mismo
   degradado, radio xl, 24 px de aire a los lados a 768 o más y halo lila. El método y
   el buscador del blog ya eran «lámina» en la paleta, pero se pintaban a sangre; las
   bandas de papel hondo se quedan a sangre (decidido el 17/10). */
html section#jg-metodo,
html #jg-busqueda-blog,
html body.page-template-franquicias section#jg-funciona,
html .jg-faq-footer,
html section#jg-que-ofrecemos {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--liwen-lila300) 0%, var(--liwen-lila) 100%) !important;
}

@media (min-width: 768px) {
  html section#jg-metodo,
  html #jg-busqueda-blog,
  html body.page-template-franquicias section#jg-funciona,
  html .jg-faq-footer,
  html section#jg-que-ofrecemos {
    margin-inline: 24px;
    border-radius: var(--liwen-radio-xl);
    box-shadow: inset 0 0 0 1px var(--liwen-lila-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-halo-lila);
  }
}

/* P5c. Trabaja, «¿Qué ofrecemos?»: el blanco sobre el lila daba 2,4:1. Tinta, como en el
   resto de láminas lila (el párrafo en tinta 800, 5,8:1; la 600 no llega); la flecha
   lima (1,6:1 sobre el lila), en tinta. */
html section#jg-que-ofrecemos :is(h2, h3) {
  color: var(--liwen-tinta950) !important;
}

html section#jg-que-ofrecemos p {
  color: var(--liwen-tinta800) !important;
  opacity: 1;
}

html section#jg-que-ofrecemos .jg-icon img {
  filter: brightness(0);
}

/* P5d. Trabaja, el formulario del currículum: los campos de la casa (los del tema eran
   cuadrados, sin borde y de 1,2:1), en una caja de reposo como las demás cajas de
   formulario, y «Enviar» en tinta. */
html #jg-formulario-cv .custom-input {
  min-height: 48px;
  border: 1px solid var(--liwen-linea-campo) !important;
  border-radius: var(--liwen-radio-sm) !important;
  background-color: var(--liwen-blanco) !important;
}

html #jg-formulario-cv .custom-input:focus {
  border-color: var(--liwen-cta-cabecera) !important;
  background-color: var(--liwen-blanco) !important;
}

html #jg-formulario-cv textarea.custom-input {
  min-height: 120px;
}

html #jg-formulario-cv input[type="file"].custom-input {
  padding: 6px;
}

html #jg-formulario-cv input[type="file"].custom-input::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-papel-hondo);
  color: var(--liwen-tinta950);
  font-weight: 600;
}

html #jg-formulario-cv .form-container {
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-lg) !important;
  background-color: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-1);
}

html #jg-formulario-cv .btn-enviar {
  border-color: transparent !important;
  background-color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-boton-tinta);
}

/* Trabaja: el vídeo iba sobre una banda #eee a sangre (en línea), ni papel ni lámina. */
html #jg-slide-comentarios div:has(> .container > .row > .jg-video-franquicias) {
  background-color: transparent !important;
}

/* Trabaja, testimonios: el nombre y el cargo iban en blanco sobre el papel (1,03:1). */
html .comentarios-trabajo .jg-user-name.text-white {
  color: var(--liwen-tinta950) !important;
}

html .comentarios-trabajo .jg-user-role.text-white {
  color: var(--liwen-tinta500) !important;
}

/* El artículo destacado: su cuerpo era blanco puro dentro de la tarjeta de papel claro. */
html #jg-articulo-destacado .jg-featured-card .jg-card-body {
  background-color: transparent !important;
}

/* Las láminas que eran bandas pegaban con su vecino: el buscador del blog con la banda
   del destacado y el cierre de la FAQ con el pie. Entre los bordes visibles de dos
   bloques, el aire S del ritmo de la paleta (bloque 20). */
@media (min-width: 768px) {
  html #jg-articulo-destacado + #jg-busqueda-blog {
    margin-top: var(--liwen-espacio-seccion);
  }

  html .jg-faq-footer {
    margin-bottom: var(--liwen-espacio-seccion);
  }
}

/* Los dos botones del cierre de la FAQ, sobre su lámina lila: el primario lima con
   brillo y su sombra; el blanco, el velo de papel con la sombra teñida de lila. Al pasar
   el ratón, un píxel arriba (el tema los agrandaba un 3 %). */
html .jg-faq-footer .jg-btn-action {
  transition: transform var(--liwen-mov-rapido) var(--liwen-mov-curva), background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jg-faq-footer .jg-btn-action:hover {
  transform: translateY(-1px);
}

html .jg-faq-footer .jg-btn-lime {
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-lima);
}

html .jg-faq-footer .jg-btn-white {
  background-color: var(--liwen-papel-velo);
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-lila);
}

html .jg-faq-footer .jg-btn-white:hover {
  background-color: var(--liwen-papel-claro);
}

/* ── P6. Héroes: servicio/* en el móvil ──────────────────────────────────────────────
   La foto es una banda de 2000 × 480 con las personas a la derecha. Se probó reencuadrarla
   al 74 % para verlas en el móvil, y el titular, las migas y la entradilla caían encima de
   caras, manos y cuerpos (revisión del 18/10/2026): se queda centrada, como en el Figma.
   En el móvil el texto ocupa todo el ancho y el velo de escritorio (de izquierda a
   derecha, transparente al 72 %) deja la mitad derecha sin cubrir: medido sobre el píxel
   real de la foto, la entradilla de nutrición o pilates bajaba a 2:1. Aquí el velo es
   vertical y cubre todo el texto: ≥ 4,5:1 en el 98 % de los píxeles detrás del texto, en
   las siete páginas (lo vigila jfp2134-web-plantillas). */
@media (max-width: 767.98px) {
  html body.single-servicio .cabecera-entrenmiento-personal::before {
    background: linear-gradient(180deg, rgba(21, 20, 26, 0.58) 0%, rgba(21, 20, 26, 0.5) 55%, rgba(21, 20, 26, 0.34) 100%);
  }
}

/* ── P6b. «¿Por qué JG fitness?» del inicio, por debajo de 1200 px ─────────────────────
   Las tarjetas iban a 4 px (mb-1 del tema) y se leían como un bloque partido: el mismo
   hueco que las demás pilas de tarjetas. (A 1200 o más manda el Figma: 7,5 px.) */
@media (max-width: 1199.98px) {
  html #jg-porque .jg-porque-lista {
    margin-bottom: 12px !important;
  }
}

/* ── P7. Lectura: posts y legales ─────────────────────────────────────────────────────
   Una columna de lectura (unos 70 caracteres por línea), titulares con aire y sin
   huérfanas. */
@media (min-width: 992px) {
  html #jg-articulo-content .row > .col-lg-11 {
    width: min(100%, 760px);
  }
}

html #jg-articulo-content :is(.entry-content, .legal) :is(h2, h3) {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  line-height: 1.12;
  text-wrap: balance;
}

/* El artículo destacado del blog: papel claro y destacado, no blanco puro. */
html #jg-articulo-destacado .jg-featured-card {
  border-color: var(--liwen-linea-suave) !important;
  background: var(--liwen-papel-claro) !important;
  box-shadow: var(--liwen-sombra-2);
}

/* ══ Franquicias (JFP-2247): «¿Por qué JG fitness?» alineada y en claro, y el botón de
   WhatsApp en el sitio del formulario ═══════════════════════════════════════════════ */

/* F1. «¿Por qué JG fitness?» en tono claro (solo franquicias: es section#jg-porque con la
   clase jg-que-ofrecemos; la de la home lleva mt-5 y sigue en tinta). Sin la lámina:
   a sangre, como el resto de bandas claras de la página. */
html section#jg-porque.jg-que-ofrecemos {
  background: var(--liwen-fondo-por-que) !important;
  color: var(--liwen-negro);
}

@media (min-width: 768px) {
  html section#jg-porque.jg-que-ofrecemos {
    margin-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

html section#jg-porque.jg-que-ofrecemos :is(.jg-porque-titulo h2, h2) {
  color: var(--liwen-negro);
}

html section#jg-porque.jg-que-ofrecemos p.jg-servicios-pret {
  color: var(--liwen-negro);
}

html section#jg-porque.jg-que-ofrecemos .jg-porque-lista {
  border-color: var(--liwen-linea-suave) !important;
  background-color: var(--liwen-blanco) !important;
  box-shadow: var(--liwen-sombra-1);
}

html section#jg-porque.jg-que-ofrecemos .jg-porque-lista :is(.jg-porque-titulo, h3) {
  color: var(--liwen-negro);
}

html section#jg-porque.jg-que-ofrecemos .jg-porque-lista .jg-porque-lista-texto p {
  color: var(--liwen-titulo);
}

html section#jg-porque.jg-que-ofrecemos .jg-porque-lista .jg-porque-lista-texto p :is(b, strong) {
  color: var(--liwen-negro);
}

/* El filete de cada título (pulido P1a) iba en lima, que sobre blanco no se ve (1,1:1). */
html section#jg-porque.jg-que-ofrecemos .jg-porque-lista :is(.jg-porque-titulo, h3)::before {
  background: var(--liwen-lila700);
}

/* F2. Los tres bloques alineados con el párrafo y con la foto. A 1200 o más la columna de
   texto es un flex en columna: el párrafo a su alto y las tres tarjetas repartiéndose el
   resto (con su contenido centrado), sin el min-height de 152 ni el max-width y el −20.5
   del Figma de la home. */
@media (min-width: 1200px) {
  html section#jg-porque.jg-que-ofrecemos .row > .col-lg-6:last-child {
    display: flex;
    flex-direction: column;
  }

  html section#jg-porque.jg-que-ofrecemos .jg-porque-lista {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    max-width: none;
    margin-left: 0;
    padding: 28.3px 38.4px;
  }

  html section#jg-porque.jg-que-ofrecemos .jg-porque-lista:last-child {
    margin-bottom: 0 !important;
  }

  html section#jg-porque.jg-que-ofrecemos .jg-porque-lista .jg-porque-titulo {
    margin-bottom: 9.7px;
  }

  html section#jg-porque.jg-que-ofrecemos .jg-porque-lista .jg-porque-lista-texto p {
    max-width: none;
  }
}

/* F3. El botón de WhatsApp de la sección de contacto: el mismo CTA blanco, destacado y
   sin la raya negra que el de «Casos de franquiciados» (pulido P2f). Desde JFP-2291 son DOS
   botones, el primero (junto a las cifras, .jgf-franquicia-boton) y este, con el mismo diseño. */
html #jg-formulario-inversor a#jg-franquicia-whatsapp,
html a.jgf-franquicia-boton {
  padding: 10px 40px;
  border: 1px solid transparent;
  border-radius: 25px;
  background-color: var(--liwen-blanco);
  box-shadow: var(--liwen-sombra-2);
  color: var(--liwen-negro);
  font-size: 20.6px;
  font-weight: 400;
}

/* ══ Cajas, fotos y buscador (JFP-2134, tercera vuelta, 18/10/2026) ═══════════════════
   Ver scripts/web-hoja-liwen-cajas.mjs. */

/* ── C1. Franquicias: el proceso de apertura crece con su texto ─────────────────────── */
html #jg-proceso .row.g-3 {
  --bs-gutter-y: 12px;
}

html #jg-proceso .row.g-3 > .col-lg-6 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html #jg-proceso .jg-step-card {
  height: auto;
  margin-bottom: 0;
}

html #jg-proceso .jg-image-card {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  html #jg-proceso .row.g-3 > .col-lg-6 > .jg-step-card {
    flex: 1 1 auto;
  }

  html #jg-proceso .row.g-3 > .col-lg-6 > .jg-image-card {
    position: relative;
    flex: 2 1 260px;
    height: auto;
    min-height: 260px;
  }

  html #jg-proceso .row.g-3 > .col-lg-6 > .jg-image-card img {
    position: absolute;
    inset: 0;
  }
}

/* ── C1b. Los otros textos que se salían de su caja (barrido de las plantillas en 390,
   820, 1024, 1280 y 1440) ─────────────────────────────────────────────────────────────
   · Servicios, en escritorio: «Entrenamiento», a 78 px, no cabe en su columna (col-lg-5)
     y se mete 14-17 px en el hueco de la foto. Se ajusta al ancho de la ventana. */
@media (min-width: 992px) {
  html #jg-sevicios-header .texto-cabecera h1 {
    font-size: min(var(--liwen-texto-h1), 5.6vw);
  }
}

/* · Ficha de centro: «Escribir un whatsapp al centro» iba con white-space: nowrap en
     escritorio (para que no se partiera en la píldora) y, donde no cabe, se salía de la
     tarjeta: 39 px en la tableta apaisada (1024) y 3 px en 1280. Ahora parte línea solo
     si no cabe (en el móvil se queda como estaba); en 1200-1399 va a 13 px con menos relleno y cabe en una, y en 992-1199
     (la tarjeta mide 214 px) ocupa el ancho de la tarjeta en dos líneas centradas. */
@media (min-width: 992px) {
  html :is(.single-centro .json-centro-card, .json-centro-card) .boton-card {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  /* El icono, a su medida (con el texto en dos líneas, el flex lo encogía). */
  html :is(.single-centro .json-centro-card, .json-centro-card) .boton-card > span:first-child {
    flex: none;
    width: 1em;
  }

  html :is(.single-centro .json-centro-card, .json-centro-card) .boton-card > span:first-child img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  html :is(.single-centro .json-centro-card, .json-centro-card) .boton-card {
    padding-inline: 12px !important;
    font-size: 13px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  html :is(.single-centro .json-centro-card, .json-centro-card) .boton-card {
    justify-content: center;
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    margin-inline: -12px;
    padding-inline: 12px !important;
    border-radius: var(--liwen-radio-lg) !important;
    font-size: 13px;
    text-align: center;
  }
}

/* ── C2. Las fotos del contenido no se ven a medias ─────────────────────────────────────
   Mientras llegan (data-liwen-cargando, lo pone y lo quita liwen.js), la caja lleva el
   papel hondo y la foto se aparta fuera de ella: ni franja ni hueco a medias. */
html img[data-liwen-cargando] {
  background-color: var(--liwen-papel-hondo);
  object-position: -300vw 0;
}

/* ── C3. El buscador (/resultados-de-busqueda/, scripts/web-buscador.mjs) ─────────── */
html .jgb-resultados .jgb-estado {
  margin: 0 0 4px;
  color: var(--liwen-tinta800);
  font-size: 1.05rem;
  line-height: 1.5;
}

html .jgb-resultados .jgb-estado:empty {
  margin: 0;
}

html .jgb-resultados .card-img-container.jgb-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  background: var(--liwen-papel-hondo);
}

html .jgb-resultados .jgb-sin-foto-centro {
  background: var(--liwen-lima-suave);
}

html .jgb-resultados .jgb-sin-foto-servicio,
html .jgb-resultados .jgb-sin-foto-provincia {
  background: var(--liwen-lila100);
}

html .jgb-resultados .jgb-sin-foto-texto {
  color: var(--liwen-tinta950);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html .jgb-resultados .card-title-custom {
  margin-bottom: 8px;
}

html .jgb-resultados .card-title-custom .jgb-enlace {
  color: inherit;
  text-decoration: none;
}

html .jgb-resultados .card-title-custom .jgb-enlace:hover,
html .jgb-resultados .card-title-custom .jgb-enlace:focus-visible {
  color: var(--liwen-tinta800);
}

html .jgb-resultados .jgb-extracto {
  margin: 0 0 24px;
  color: var(--liwen-tinta600);
  font-size: 0.95rem;
  line-height: 1.55;
}

html .jgb-resultados .jgb-vacio {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 40px 32px;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-lg);
  background: var(--liwen-papel-claro);
  box-shadow: var(--liwen-sombra-1);
  text-align: center;
}

html .jgb-resultados .jgb-vacio-titulo {
  margin-bottom: 12px;
  color: var(--liwen-tinta950);
  font-size: 1.75rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

html .jgb-resultados .jgb-vacio-texto {
  max-width: 560px;
  margin: 0 auto 24px;
  color: var(--liwen-tinta800);
  line-height: 1.55;
}

html .jgb-resultados .jgb-sugerencias-titulo {
  margin-bottom: 12px;
  color: var(--liwen-tinta800);
  font-weight: 600;
}

html .jgb-resultados .jgb-sugerencias {
  justify-content: center;
}

html .jgb-resultados .jgb-sugerencias .jg-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-blanco);
  color: var(--liwen-tinta950);
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: var(--liwen-sombra-1);
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jgb-resultados .jgb-sugerencias .jg-pill:hover,
html .jgb-resultados .jgb-sugerencias .jg-pill:focus-visible {
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
}

html .jgb-resultados .jgb-mas {
  margin-top: 8px;
}

/* Sin color-mix (navegadores anteriores a 2023) el lila claro de la escala no existe:
   el lila plano. */
@supports not (color: color-mix(in oklab, #000 50%, #fff)) {
  html .jgb-resultados .jgb-sin-foto-servicio,
  html .jgb-resultados .jgb-sin-foto-provincia {
    background: var(--liwen-lila);
  }
}

@media (max-width: 575.98px) {
  html .jgb-resultados .jgb-vacio {
    padding: 32px 20px;
  }

  html .jgb-resultados .jgb-vacio-titulo {
    font-size: 1.4rem;
  }
}


/* ── Buscador de centros por calle, barrio o ciudad (JFP-2239) ───────────────────────── */
html .jgf-buscar-centros {
  max-width: 560px;
  margin: 0 auto 20px;
  text-align: center;
}

/* En móvil el campo deja el mismo aire que los selectores de debajo. Esos van en una fila con
   `p-4` (24 px respecto al borde del contenido de la columna) y el formulario cuelga directo de
   la columna: sin esto el campo llegaba hasta el borde de la pantalla (0 px en la portada, 12 en
   /centros/) mientras los selectores estaban a 24 y 36. Solo por debajo de 768 px (los selectores
   se apilan y el campo ya no tiene el 560 centrado de tableta y escritorio); a partir de ahí no
   cambia nada. */
@media (max-width: 767.98px) {
  html .jgf-buscar-centros {
    max-width: min(560px, calc(100% - 48px));
  }
}

html .jgf-buscar-centros-campo {
  position: relative;
}

html .jgf-buscar-centros .form-control {
  min-height: 52px;
  padding: 12px 64px 12px 22px;
  border: 1px solid var(--liwen-linea-campo);
  border-radius: var(--liwen-radio-pildora);
  background-color: var(--liwen-papel-claro);
  color: var(--liwen-tinta950);
  font-size: 16px;
  box-shadow: none;
}

html .jgf-buscar-centros .form-control::placeholder {
  color: var(--liwen-tinta500);
  opacity: 1;
}

html .jgf-buscar-centros .form-control:focus-visible,
html .jgf-buscar-centros-boton:focus-visible,
html .jgf-buscar-centros-todos:focus-visible {
  outline: 2px solid var(--liwen-tinta950);
  outline-offset: 2px;
}

html .jgf-buscar-centros-boton {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
  transform: translateY(-50%);
  transition: box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jgf-buscar-centros-boton:hover {
  box-shadow: var(--liwen-sombra-lima);
}

html .jgf-buscar-centros-estado {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--liwen-tinta950);
  font-size: 15px;
  line-height: 1.4;
}

html .jgf-buscar-centros-estado:empty {
  min-height: 0;
  margin-top: 0;
}

html .jgf-buscar-centros-todos {
  min-height: 44px;
  margin-left: 4px;
  padding: 8px 18px;
  border: 1px solid var(--liwen-tinta950);
  border-radius: var(--liwen-radio-pildora);
  background: transparent;
  color: var(--liwen-tinta950);
  font-size: 14px;
  font-weight: 600;
}

html .jgf-buscar-centros-todos:hover {
  background: var(--liwen-tinta950);
  color: var(--liwen-papel);
}

html .jgf-buscar-centros-o {
  margin: 14px 0 0;
  color: var(--liwen-tinta600);
  font-size: 14px;
}

/* Al buscar, la lista sube hasta aquí sin quedar bajo la barra fija del menú. */
html :is(#listado-tarjetas, #listado-tarjetas-region) {
  scroll-margin-top: 96px;
}


/* ── Tableta (JFP-2253) ──────────────────────────────────────────────────────────────── */

/* 1 y 2. Tableta vertical (768-991): el buscador a todo el ancho de su columna, el mapa
   encima y las tarjetas en dos columnas sin scroll propio. */
@media (min-width: 768px) and (max-width: 991.98px) {
  html #jg-centros-cercanos {
    flex: 0 0 auto;
    width: 100%;
    max-width: 720px;
  }

  html :is(#contenedor-resultados-centros, #contenedor-resultados-centros-region) > :last-child {
    order: -1;
  }

  html :is(#listado-tarjetas, #listado-tarjetas-region) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* El listado de escritorio guarda 15 px a la derecha para su barra de scroll. Sin barra, se queda
       en la mitad del gutter de Bootstrap y las tarjetas acaban donde acaba el mapa de encima. */
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  }

  html :is(#listado-tarjetas, #listado-tarjetas-region) .json-centro-card .row > [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  html :is(#listado-tarjetas, #listado-tarjetas-region) .json-centro-card .card-body {
    padding-left: 0 !important;
  }
}

/* 3. Las fotos de la portada reservan su caja antes de llegar (por encima de 1200 ya lo
   hace la hoja con la proporción del Figma). La misma proporción que tienen las fotos, así
   que no cambia lo que se ve. */
@media (max-width: 1199.98px) {
  html #jg-centros .jg-centros-box {
    container-type: inline-size;
  }

  html #jg-centros .jg-centros-box > img {
    /* En bloque: una foto rota con su alt se pinta en línea, como texto, en Chrome, y la caja se colapsaba. */
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 449;
    object-fit: cover;
    /* La caja no depende de que la foto llegue (ver la cabecera). Un navegador sin cqw descarta esta línea. */
    height: calc(100cqw * 449 / 600);
  }

  html .jg-servicios .jg-servicios-box img.locofy_stat-backgrounds-icon {
    height: auto;
    aspect-ratio: 305 / 276;
    object-fit: cover;
  }
}

/* 2 bis. El botón que despliega la lista plegada (public/web/jgf-centros-plegable.js): el último
   hijo de la lista, a ancho completo y centrado, con la misma píldora que el «Ver todos» del
   buscador y 44 px de alto. Solo existe en tableta vertical; el script lo pone y lo quita. */
html :is(#listado-tarjetas, #listado-tarjetas-region) > .jgf-centros-plegable-boton {
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 44px;
  margin: 4px 0 8px;
  padding: 8px 28px;
  border: 1px solid var(--liwen-tinta950);
  border-radius: var(--liwen-radio-pildora);
  background: transparent;
  color: var(--liwen-tinta950);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html :is(#listado-tarjetas, #listado-tarjetas-region) > .jgf-centros-plegable-boton:hover {
  background: var(--liwen-tinta950);
  color: var(--liwen-papel);
}

html :is(#listado-tarjetas, #listado-tarjetas-region) > .jgf-centros-plegable-boton:focus-visible {
  outline: 2px solid var(--liwen-tinta950);
  outline-offset: 2px;
}

/* 5. En la portada, el mapa y las tarjetas se salían del panel lima 12 px por cada lado: de 768 a
   1199 la columna que los envuelve pierde su relleno (px-md-0) y la fila g-4 lleva -12 px de
   margen. Con 48 px de aire a los lados el resultado queda dentro, a la altura de los selectores
   de encima (a 820, mapa y selectores miden 648 y 646) y con la proporción que ya tiene en
   escritorio. Solo la portada: /centros/ no tiene panel lima. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html #jg-centros > .container #jg-centros-region {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* 4. Los enlaces del menú se pulsan con el dedo: 44 px (la barra de 992 a 1199 y el menú
   plegado de la tableta). */
@media (max-width: 1199.98px) {
  html :is(#jg-header, #jg-entrenamiento-personal-header, #jg-sevicios-header, #jg-blog-header, #jg-contacto) .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ── Ofertas de empleo de «Trabaja con nosotros» (JFP-2250) ─────────────────────────── */
html .jgf-ofertas {
  padding: clamp(48px, 6vw, 88px) 0 0;
}

html :is(.jgf-ofertas, .jgf-oferta) .jgf-ofertas-antetitulo {
  margin: 0 0 8px;
  color: var(--liwen-tinta600);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html :is(.jgf-ofertas-titulo, .jgf-oferta-titulo) {
  margin: 0 0 12px;
  color: var(--liwen-tinta950);
  font-weight: 700;
  line-height: 1.1;
}

html .jgf-ofertas-titulo {
  font-size: clamp(32px, 4vw, 48px);
}

html .jgf-oferta-titulo {
  font-size: clamp(28px, 3.4vw, 40px);
}

html .jgf-ofertas-intro {
  max-width: 640px;
  margin: 0;
  color: var(--liwen-tinta600);
  font-size: 17px;
  line-height: 1.5;
}

html .jgf-ofertas-estado {
  margin: 16px 0 0;
  color: var(--liwen-tinta950);
  font-size: 15px;
  line-height: 1.4;
}

html .jgf-ofertas-estado:empty {
  margin-top: 0;
}

html .jgf-ofertas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

html .jgf-ofertas-item {
  margin: 0;
}

html .jgf-ofertas-enlace {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-md);
  background: var(--liwen-papel-claro);
  box-shadow: var(--liwen-sombra-1);
  color: var(--liwen-tinta950);
  text-decoration: none;
  transition: box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva), border-color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jgf-ofertas-enlace:hover {
  border-color: var(--liwen-linea-media);
  box-shadow: var(--liwen-sombra-2);
  color: var(--liwen-tinta950);
}

html :is(.jgf-ofertas-enlace, .jgf-oferta-compartir-boton):focus-visible {
  outline: 2px solid var(--liwen-tinta950);
  outline-offset: 2px;
}

html .jgf-ofertas-centro {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

html .jgf-ofertas-lugar {
  color: var(--liwen-tinta600);
  font-size: 15px;
}

html .jgf-ofertas-ver {
  margin-top: auto;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 700;
}

/* La página de una oferta: su tarjeta, entre la cabecera y las aptitudes. */
html .jgf-oferta {
  padding: clamp(40px, 5vw, 72px) 0;
}

html .jgf-oferta-tarjeta {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-lg);
  background: var(--liwen-papel-claro);
  box-shadow: var(--liwen-sombra-2);
}

html .jgf-oferta-lugar {
  margin: 0;
  color: var(--liwen-tinta600);
  font-size: 15px;
  line-height: 1.5;
}

html .jgf-oferta-ciudad {
  display: block;
  color: var(--liwen-tinta950);
  font-size: 18px;
  font-weight: 600;
}

html .jgf-oferta-direccion {
  display: block;
}

html .jgf-oferta-estado {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 18px 0 0;
  padding: 6px 16px;
  border-radius: var(--liwen-radio-md);
  background: var(--liwen-papel-hondo);
  color: var(--liwen-tinta950);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

html .jgf-oferta-abierta .jgf-oferta-estado {
  background: var(--liwen-lima);
}

html .jgf-oferta-no-disponible .jgf-oferta-estado {
  background: var(--liwen-papel-hondo);
}

html .jgf-oferta-texto {
  margin: 20px 0 0;
  color: var(--liwen-tinta800);
  font-size: 17px;
  line-height: 1.6;
}

html .jgf-oferta-acciones {
  margin-top: 24px;
}

/* El botón principal de la tarjeta: la píldora lima de la casa (la de «Enviar candidatura»
   de la cabecera), con estilos propios porque .jg-btn fuera de su sección no pinta nada. */
html .jgf-oferta-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: box-shadow var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jgf-oferta-boton:hover {
  background: var(--liwen-lima);
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-lima);
}

html .jgf-oferta-boton:focus-visible {
  outline: 2px solid var(--liwen-tinta950);
  outline-offset: 2px;
}

html .jgf-oferta-compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--liwen-linea-suave);
}

html .jgf-oferta-compartir-texto {
  margin-right: 4px;
  color: var(--liwen-tinta600);
  font-size: 15px;
  font-weight: 600;
}

html .jgf-oferta-compartir-boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--liwen-tinta950);
  border-radius: var(--liwen-radio-pildora);
  background: transparent;
  color: var(--liwen-tinta950);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), color var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html .jgf-oferta-compartir-boton:hover {
  background: var(--liwen-tinta950);
  color: var(--liwen-papel);
}

html .jgf-oferta-cerrada {
  margin-top: 20px;
}

html .jgf-oferta-cerrada-titulo {
  margin: 0 0 8px;
  color: var(--liwen-tinta950);
  font-size: 22px;
  font-weight: 700;
}

html .jgf-oferta-cerrada > p {
  color: var(--liwen-tinta800);
  font-size: 17px;
  line-height: 1.5;
}

html .jgf-oferta-cerrada > .jgf-oferta-boton {
  margin-top: 24px;
}

/* El salto a las vacantes y al formulario no queda bajo la barra fija del menú. */
html :is(#jgf-ofertas, #jg-formulario-cv) {
  scroll-margin-top: 96px;
}


/* ══ Cierre de la web (JFP-2291, minuta 22/10/2026 §5) ═══════════════════════════════════ */

/* C1. «Dónde encontrarnos»: crema como el bloque de arriba, sin el oliva. */
html section#jg-centros > .container {
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
    var(--liwen-crema) !important;
  box-shadow: inset 0 0 0 1px var(--liwen-crema-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-2);
}

/* La fila de resultados llevaba la lima en línea (style="background-color:var(--jg-green-lime)"). */
html #contenedor-resultados-centros {
  background: transparent !important;
}

/* C2. El carrusel de ciudades. */
html #jg-centros .jgf-ciudades {
  position: relative;
}

html #jg-centros .jgf-ciudades-pista {
  display: flex;
  gap: 18px;
  margin: -6px 0 0;
  padding: 6px 4px 22px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html #jg-centros .jgf-ciudades-pista::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html #jg-centros .jgf-ciudades-pista:focus-visible {
  outline: 2px solid var(--liwen-tinta950);
  outline-offset: 4px;
  border-radius: var(--liwen-radio-md);
}

html #jg-centros .jgf-ciudad {
  flex: 0 0 calc((100% - 3 * 18px) / 4);
  min-width: 232px;
  scroll-snap-align: start;
}

html #jg-centros .jgf-ciudad .jg-centros-box {
  height: 100%;
}

/* Una ciudad sin foto: una tarjeta de marca (lila claro y la chincheta), con la misma proporción que las fotos. */
html #jg-centros .jgf-ciudad-marca {
  display: block;
  width: 100%;
  aspect-ratio: 279 / 209;
  border-radius: var(--liwen-radio-md) var(--liwen-radio-md) 0 0;
  background: var(--liwen-lila200) url("/jgf-chincheta.svg") center / 26% no-repeat;
}

html #jg-centros .jgf-ciudades-mandos:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: 12px;
}

html #jg-centros .jgf-ciudades-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--liwen-linea-suave);
  border-radius: var(--liwen-radio-pildora);
  background: var(--liwen-papel-claro);
  color: var(--liwen-tinta950);
  line-height: 1;
  box-shadow: var(--liwen-sombra-1);
  cursor: pointer;
  transition: background-color var(--liwen-mov-rapido) var(--liwen-mov-curva), opacity var(--liwen-mov-rapido) var(--liwen-mov-curva);
}

html #jg-centros .jgf-ciudades-flecha:hover:not(:disabled) {
  background: var(--liwen-lima);
}

html #jg-centros .jgf-ciudades-flecha:disabled {
  opacity: 0.4;
  cursor: default;
}

/* A partir de 1400 px, las medidas del Figma de siempre: tarjetas de 278,9 con 18,2 de separación (4 a la vista y la quinta asomando). */
@media (min-width: 1400px) {
  html #jg-centros .jgf-ciudades-pista {
    gap: 18.2px;
  }

  html #jg-centros .jgf-ciudad {
    flex: 0 0 278.9px;
  }
}

@media (max-width: 1199.98px) {
  html #jg-centros .jgf-ciudad {
    flex-basis: calc((100% - 2 * 18px) / 3);
  }
}

@media (max-width: 991.98px) {
  html #jg-centros .jgf-ciudad {
    flex-basis: calc((100% - 18px) / 2);
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  html #jg-centros .jgf-ciudad {
    flex-basis: 78%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html #jg-centros .jgf-ciudades-pista {
    scroll-behavior: smooth;
  }
}

/* C3. «Ver servicio»: ya no es un texto largo en 9 px, sino dos palabras en un tamaño que se lee. */
html .jg-servicios:not(.single-centro-servicios) .jg-button,
html .jg-servicios .jg-button {
  min-height: 44px;
  padding: 8px 22px;
  font-size: 17px;
  line-height: 1.25;
  white-space: nowrap;
}

html .jg-servicios .jg-button :is(.locofy_ver-servicio-de, span) {
  font-size: inherit;
  line-height: inherit;
}

/* C4. Instagram: todas las casillas iguales y la foto recortada al centro. Desde el 23/10/2026 (JFP-2291) en
   3:4, la proporción de la rejilla de Instagram: las portadas de los reels son de 9:16 y el cuadrado les cortaba
   el 44 % del alto (los subtítulos de abajo, p. ej. «y el entrenamiento» del reel de embarazo); en 3:4, lo mismo
   que enseña la propia cuenta. Lo que Antonio señaló en el iPhone («un vídeo muestra mal su imagen previa») NO era
   el encuadre: la portada del reel DecXYkOogZf es un fotograma de transición, y ninguna proporción lo cambia (la
   arregla una portada propia, scripts/web-instagram.mjs). Al título del «Hybrid Workout» no lo cortaba el
   cuadrado: lo tapaba el play centrado (abajo, en la esquina). */
html body #sb_instagram #sbi_images .sbi_item {
  aspect-ratio: 3 / 4;
  align-self: start;
}

/* Tres columnas a todos los anchos, como la rejilla de la propia app (revisión del 23/10). El plugin deja una sola
   hasta 480 px (sbi_mob_col_1: nueve casillas 3:4 de 366 × 488, casi 5.000 px, seis pantallas del iPhone) y dos de
   481 a 800 (sbi_tab_col_2: la 9.ª, sola). Con tres, la casilla nunca pasa de los 640 px de la miniatura. */
@media (max-width: 800px) {
  html body #sb_instagram.sbi_mob_col_1 #sbi_images,
  html body #sb_instagram.sbi_tab_col_2 #sbi_images,
  html body #sb_instagram.sbi_col_3 #sbi_images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

html body #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html body #sb_instagram #sbi_images .sbi_item .sbi_photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

html body #sb_instagram #sbi_images .sbi_item .sbi_photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  scale: 1;
  transform: none;
}

/* El play de un reel, en la esquina de arriba a la derecha y pequeño, como el icono de álbum (sbi-styles: 24 px a
   12 px del borde) y como en la rejilla de Instagram. Centrado y a 48 px tapaba el título de la portada (en el
   Hybrid Workout se leía «WOR▶OUT»). La sombra que le pone el plugin se queda. */
html body #sb_instagram #sbi_images .sbi_type_video .sbi_playbtn {
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  margin: 0;
  font-size: 22px;
}

/* En el móvil la casilla mide unos 117 px: los dos iconos, más pequeños y más cerca de la esquina. */
@media (max-width: 575.98px) {
  html body #sb_instagram #sbi_images .sbi_type_video .sbi_playbtn,
  html body #sb_instagram #sbi_images .sbi_type_carousel .fa-clone {
    top: 8px;
    right: 8px;
    font-size: 16px;
  }
}

/* C5. Resultados del buscador: la foto enfocada hacia arriba y, en un cartel, entera. */
html .jgb-resultados .card-img-container {
  aspect-ratio: 768 / 564;
  overflow: hidden;
}

html .jgb-resultados .card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

/* El marco de un cartel entero, en papel hondo (era tinta: «evita poner negro de fondo en las capas»). */
html .jgb-resultados .card-img-container:has(img.jgb-foto-contener) {
  background: var(--liwen-papel-hondo);
}

html .jgb-resultados .card-img-container img.jgb-foto-contener {
  padding: 0.75rem 0;
  object-fit: contain;
  object-position: center;
}

/* C6. «Prensa, empresas y colaboraciones»: la foto, a la altura de la tarjeta lila. */
html #jg-contacto-marca .jgf-foto-marca {
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center 30%;
}

/* C7. Un vídeo dentro del texto de un post: el ancho de la columna y la proporción 16:9 (el del origen mide 560 × 315 fijos,
   y a 412 px la página se desplazaba de lado: 572 px de layout). */
html p > iframe[src*="youtube"],
html p > iframe[src*="vimeo"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--liwen-radio-md);
}

/* C8. Eventos (la II Gala). La página del origen pinta su primer bloque en negro con el texto en blanco
   (#jg-entrenamiento-personal.color_evento_2 .jg-box-v), y #jg-entrenamiento-personal es también el id del
   bloque crema de la portada. Hasta el 23/10/2026 aquí se le devolvía el negro (en tinta); Antonio ese día:
   «evita poner negro de fondo en las capas, tiene que ser elegante». Se queda con la lámina crema de la
   portada (bloque 5b de la paleta, que ya le gana al negro del tema) y el texto pasa a tinta. El botón
   «Compra tu entrada» era rojo puro con texto blanco (4:1, por debajo de AA a 18 px): pasa a la lima de la
   acción con tinta, como el del bloque crema de la portada. El cartel (public/web/liwen/gala-cartel.webp) traía
   dentro de la imagen dos marcos BLANCOS desplazados, pensados para el fondo negro: sobre la crema eran líneas
   fantasma, aquí y en la tarjeta del buscador. Desde la revisión del 23/10 es el póster solo, sin los marcos, con
   las esquinas redondeadas que ya traía su alfa. */
html #jg-entrenamiento-personal.evento-main.color_evento_2 .jg-box-v {
  box-shadow: inset 0 0 0 1px var(--liwen-crema-borde), var(--liwen-sombra-brillo), var(--liwen-sombra-2);
}

html #jg-entrenamiento-personal.evento-main.color_evento_2 .right-box :is(h2, .descripcion, .descripcion b) {
  color: var(--liwen-tinta950);
}

html #jg-entrenamiento-personal.evento-main.color_evento_2 .right-box a.btn {
  border-color: transparent !important;
  background-color: var(--liwen-lima) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-lima);
}

/* El cartel, como una capa: su sombra y el radio de sus esquinas en %, para seguir a cualquier tamaño las que
   trae el alfa (unos 95 px sobre 938 × 1224); un radio fijo dejaría un hueco entre la sombra y la esquina. */
html #jg-entrenamiento-personal.evento-main.color_evento_2 img[src$="/gala-cartel.webp"] {
  border-radius: 10% / 7.75%;
  box-shadow: var(--liwen-sombra-2);
}

/* La miga del evento: papel claro con la línea media, no blanco con el borde negro del tema (custom.css). */
html #jg-entrenamiento-personal.evento-main.color_evento_2 .right-box .miga span {
  border-color: var(--liwen-linea-media);
  background-color: var(--liwen-papel-claro);
  color: var(--liwen-tinta950);
}

html #jg-descripcion-evento.evento-main .jg-box-v {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
  background: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950);
  box-shadow: var(--liwen-sombra-2);
}

html #jg-descripcion-evento.evento-main .jg-box-v p {
  color: var(--liwen-tinta950);
}

html #apuntante-evento {
  margin-top: 64px !important;
}

/* «Compra tu entrada» en la banda final: la misma acción que arriba, sin la raya negra del tema (bg-white y
   border-dark de Bootstrap, con !important). Sobre la lima, una píldora de papel claro con la sombra teñida de
   lima: lima sobre la crema arriba y papel sobre la lima abajo, las dos sin contorno. */
html #apuntante-evento a.btn,
html #apuntante-evento a.btn:hover {
  border-color: transparent !important;
}

html #apuntante-evento a.btn {
  background-color: var(--liwen-papel-claro) !important;
  color: var(--liwen-tinta950) !important;
  box-shadow: var(--liwen-sombra-brillo), var(--liwen-sombra-sobre-lima);
}

/* C9. Una foto que no está en el bucket: la misma tarjeta de marca que las ciudades sin foto (lila claro y la
   chincheta). En una tarjeta del blog ocupa el alto de las fotos (220 px del tema); en la principal de un
   post, su forma (el aspect-ratio lo pone el HTML con las medidas de la foto que faltaba). */
html .jgf-imagen-marca {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--liwen-radio-md);
  background: var(--liwen-lila200) url("/jgf-chincheta.svg") center / 18% no-repeat;
}

html .card-img-container > .jgf-imagen-marca {
  height: 220px;
  aspect-ratio: auto;
  border-radius: var(--liwen-radio-md) var(--liwen-radio-md) 0 0;
}

/* C10. Los obligatorios (JFP-2291, Antonio 23/10/2026): el asterisco, en el lila legible (lila 700) y en negrita,
   pegado al rótulo; la nota «* Campo obligatorio» encima de «Enviar», pequeña y en tinta (en /contacto/ el tema
   pone sus párrafos a 21 px con un id: la regla lo lleva también para que la nota mida lo mismo en todas, y desde la
   revisión del 23/10 la casilla de privacidad, que también es un <p>, mide lo que los rótulos). Sobre la lima
   (contacto de la ficha) y sobre las láminas lila (/contacto y prensa) el asterisco va en tinta: sobre la lima
   nunca va lila (paleta, bloque 8) y sobre el lila de marca el lila 700 se queda en 3,6:1. */
html .jgf-obligatorio {
  margin-left: 0.1em;
  color: var(--liwen-lila700);
  font-weight: 700;
}

html :is(#jg-contacto-centro .jg-form-container, section#jg-contacto .rounded-5) .jgf-obligatorio {
  color: var(--liwen-tinta950);
}

html .jgf-nota-obligatorio,
html #jg-contacto p.jgf-nota-obligatorio {
  margin: 0 0 1rem;
  color: var(--liwen-tinta800);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

/* /contacto/ (centro y prensa), revisión del 23/10: el tema pone sus <p> a 21 px con un id (#jg-contacto p,
   custom.css) y la casilla de privacidad es un <p>: «He leído y acepto la política de privacidad.*» medía 21 px
   junto a rótulos de 14 (un 51 % más). Al tamaño de los rótulos de su formulario, como la nota; la etiqueta y su
   asterisco lo heredan. */
html #jg-contacto p.jgf-privacidad {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Y «Enviar» traía del tema 40 px de margen encima (#jg-contacto .custom-btn-submit): con la nota, 56 px de hueco
   frente a los 24 de Trabaja. Los 16 de la nota y 8 del botón dan esos 24. El selector cuelga de la nota: no toca
   otro botón del tema. */
html #jg-contacto .jgf-nota-obligatorio + div > .custom-btn-submit {
  margin-top: 0.5rem;
}

/* C11. El vídeo de la portada (revisión del 23/10; Antonio: «evita poner negro de fondo en las capas»). El iframe de
   Vimeo (background=1) no trae póster: mientras arranca —segundos en 4G, o siempre si el iPhone no lo reproduce
   solo— la cabecera era el #000 de custom.css. Ahora se ve un fotograma del propio vídeo (su miniatura de Vimeo,
   public/web/liwen/portada-video.webp, encuadrada como el vídeo: a «cover» y al centro) sobre el lila de marca. Y sin
   el velo negro del 35 % del tema: tapaba un titular que ya no se enseña (opacity 0 en el HTML) y apagaba los colores
   de marca del vídeo (la lima salía oliva). */
html header#jg-header > .cabecera {
  background: url("/liwen/portada-video.webp") center / cover no-repeat, var(--liwen-lila);
}

html header#jg-header > .cabecera > .cabecera-overlay {
  background: transparent;
}

/* ── 21. Sin color-mix (navegadores anteriores a 2023): superficies con el token ────
   Una propiedad que lee una variable con color-mix() queda inválida y se pinta SIN
   fondo; aquí cada superficie vuelve al lila o al papel planos (nada en hex). */
@supports not (color: color-mix(in oklab, #000 50%, #fff)) {
  /* La tarjeta de una ciudad sin foto del carrusel (JFP-2291): el lila plano en lugar de su tono claro. */
  html #jg-centros .jgf-ciudad-marca {
    background: var(--liwen-lila) url("/jgf-chincheta.svg") center / 26% no-repeat;
  }

  /* La foto del blog que no está en el bucket (JFP-2291): lo mismo. */
  html .jgf-imagen-marca {
    background: var(--liwen-lila) url("/jgf-chincheta.svg") center / 18% no-repeat;
  }

  html section#jg-contacto .row > .col-md-6:has(.wpcf7-form) > .rounded-5,
  html section#jg-metodo,
  html #jg-busqueda-blog,
  html #sobre-jg .fundador-container .jg-fundador-card,
  html body.page-template-franquicias section#jg-funciona,
  html .jg-faq-footer,
  html section#jg-que-ofrecemos {
    background: var(--liwen-lila) !important;
  }

  /* «Añadir al carrito» al pasar el ratón (pulido): la lima plana. */
  html #jgt-productos [data-anadir].btn-dark:hover {
    background: var(--liwen-lima) !important;
  }

  html #jgt-productos [data-anadir].btn-dark[data-ocupado="1"]:hover {
    background: var(--liwen-tinta950) !important;
  }

  :is(section#jg-centros-region .json-centro-card, .single-centro .json-centro-card),
  html .faq-accordion .accordion-item:has(.accordion-collapse.show),
  html .faq-accordion .accordion-item:has(.accordion-collapse.collapsing),
  #jg-centro-collapse .jg-collapse-item:has(.collapse.show) {
    background-color: var(--liwen-papel-claro) !important;
  }

  .faq-accordion .accordion-button.collapsed::after {
    background-color: var(--liwen-papel-hondo);
  }

  /* «¿Por qué?» e Instagram leen el lila 300 en su degradado: sin color-mix, la declaración
     entera se descarta; vuelven al lila de marca plano (JFP-2291: ya no son tinta ni foto). */
  html section#jg-porque,
  html body #jg-rrss {
    background: var(--liwen-lila) !important;
  }

  html body #sb_instagram .sbi_photo:has(img.sbi_img_error) {
    background: var(--liwen-lila) !important;
  }

  /* (Centros del inicio y las dos cajas de formulario ya no leen color-mix desde JFP-2291: la
     crema y la lima planas no necesitan respaldo.) */

  html #sobre-jg .custom-purple-text,
  html #jg-modelo .jg-card strong,
  html #jg-tienes-dudas h2,
  html #jg-funciona .jg-step-num,
  html #sobre-jg .jg-equipo-nombre {
    color: var(--liwen-tinta600) !important;
  }

  /* El asterisco de los obligatorios (cierre, C10) es lila 700: sin color-mix, tinta. */
  html .jgf-obligatorio {
    color: var(--liwen-tinta950);
  }

  html section#jg-contacto .row > .col-md-6:has(.wpcf7-form) > .rounded-5 :is(.form-control, .form-select) {
    border-color: var(--liwen-tinta600) !important;
  }
}

/* ══ Adaptación móvil (JFP-2135) ═════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* ── Titulares de cabecera ──────────────────────────────────────────────────────
     custom.css los pone a 40 px y el rediseño, con el 85 % del Figma, a 34 px de
     línea: «Preguntas frecuentes / sobre JG fitness» montaba una línea sobre la otra
     y llegaba al borde de la pantalla. «Conoce JG fitness» (acerca de) y el nombre
     del fundador traen en custom.css su propio !important con más peso: se repiten
     aquí con el mismo selector. */
  .cabecera h1,
  .cabecera-servicios h1,
  .cabecera-servicios.jg-conoce h1,
  #sobre-jg .fundador-container .jg-fundador-card h2,
  .cabecera-entrenmiento-personal h1,
  .cabecera-centros h1,
  #jg-contacto h1 {
    font-size: var(--liwen-movil-h1) !important;
    line-height: var(--liwen-movil-h1-interlineado) !important;
    overflow-wrap: break-word;
  }

  /* ── Títulos de sección ─────────────────────────────────────────────────────────
     En el tema iban de 40 a 56 px («¿Por qué JG fitness?» 48, «Categorías de
     preguntas» 56, el nombre del centro en la galería de la ficha 56).
     «¿Tienes dudas sobre cómo funcionamos…?» de las páginas de servicio (la presencial
     la enlaza el pie de todas) iba a 64 px con 55 de línea: ocho líneas montadas hasta
     el borde. «Envíanos tu currículum» (h2.h1), a 56. Los h2 de la política de
     privacidad y los h1/h2/h3 del cuerpo de los posts, a 38: más grandes que el H1
     móvil (34), la jerarquía al revés; custom.css los fija con «#jg-articulo-content
     .wp-block-heading {…!important}», y por eso se repiten aquí con el id delante. */
  .jg-box-v h2,
  .jg-porque-titulo h2,
  .jg-servicios-titulo,
  h2.jg-galeria,
  .metodo-titulo,
  #jg-faq-all h2,
  .jg-fundador-content h2,
  h2.jg-title,
  #propuesta-jg h2,
  .jg-section-title,
  #jg-formulario-inversor h2,
  .jg-formulario-box h2,
  #jg-modelo h2,
  #sobre-jg h2,
  #jg-tienes-dudas h2,
  h2.h1,
  .legal h2,
  .entry-content h1,
  .entry-content h2,
  #jg-articulo-content .legal h2,
  #jg-articulo-content .entry-content h1,
  #jg-articulo-content .entry-content h2 {
    font-size: var(--liwen-movil-h2) !important;
    line-height: var(--liwen-movil-h2-interlineado) !important;
    overflow-wrap: break-word;
  }

  .metodo-titulo strong {
    font-size: inherit !important;
  }

  /* ── Subtítulos ─────────────────────────────────────────────────────────────────
     Las categorías de preguntas frecuentes iban a 50 px; las tarjetas de
     franquicias, a 30-33. */
  #jg-faq-all h3,
  .value-card h3,
  .jg-step-card h3,
  .sbi_feedtheme_header_text h3,
  .legal h3,
  .entry-content h3,
  #jg-articulo-content .legal h3,
  #jg-articulo-content .entry-content h3 {
    font-size: var(--liwen-movil-h3) !important;
    line-height: var(--liwen-movil-h3-interlineado) !important;
  }

  /* ── Cuerpo de los posts del blog ───────────────────────────────────────────────
     Doce posts se salían del ancho (el body los recortaba con overflow-x y en el
     Pixel 7 Chrome ensanchaba el viewport hasta 972 px): las fotos con pie
     (figure.wp-caption con width: 960px en línea), los titulares en mayúsculas con
     palabras largas («ELECTROESTIMULACIÓN») y las URL largas de los enlaces. Las
     FOTOS no se arreglan aquí: también desbordaban a 820 y a 1280, así que su regla
     rige a todo ancho (web-hoja-liwen-paleta.mjs, bloque 20b). Aquí quedan los textos. */
  .entry-content a,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content strong {
    overflow-wrap: anywhere;
  }

  /* ── Ficha del centro: contactar con una mano ───────────────────────────────────
     Los dos botones de la cabecera («Contacta por WhatsApp» y «Contacta con el
     correo», que baja al formulario) en una sola línea y con 44 px de alto, uno
     encima del otro y centrados: con el relleno lateral de 3rem del tema, el de
     WhatsApp se partía en dos líneas en un iPhone. */
  .cabecera-centros .contacto-single-centro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    margin-right: 0;
    white-space: nowrap;
    font-size: 16px;
    border-radius: 22px;
  }

  .cabecera-centros .contacto-single-centro img {
    height: 22px;
  }

  /* El teléfono de la tarjeta, «Escribir un whatsapp al centro» y «Llamar al
     centro» / «WhatsApp» junto al formulario: 22-24 px de alto, menos que un dedo.
     44 px es el mínimo de Apple para un objetivo táctil. */
  .single-centro a[href^="tel:"],
  .single-centro a[href^="https://wa.me/"]:not(.jg-wa-flotante),
  .single-centro a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── Pie: hueco para el botón flotante de WhatsApp ──────────────────────────────
     El botón (52 px a 14 del borde, JFP-1409) quedaba encima de los legales al final
     de la página. Con este relleno, lo último del pie termina por encima de él. */
  .custom-footer {
    padding-bottom: calc(52px + 28px + env(safe-area-inset-bottom, 0px));
  }
}