/* Jala Blocks — estilos compartidos por varios bloques (port de app/themeV2.css y los *.module.css de jalasoft.com):
 * variables, textos, botones, tarjetas, carruseles, fichas, formularios de HubSpot, migas, paginación y plantillas.
 * Lo de un solo bloque está en blocks/<slug>/style.css, que se carga después de este archivo.
 * Puntos de corte del sitio anterior: móvil ≤768, tableta ≥769, escritorio ≥1171, grande ≥1441. Ancho máximo 1440. */

:root {
  --jb-red: #EF293D; --jb-red-700: #CA212F; --jb-red-100: #FBEEF0; --jb-red-2: #9B0000;
  --jb-n0: #FFFFFF; --jb-n100: #F7F8F9; --jb-n200: #F1F2F4; --jb-n300: #DCDFE4; --jb-n400: #B3B9C4; --jb-n500: #8993A5;
  --jb-n600: #758195; --jb-n700: #44546F; --jb-n800: #38455D; --jb-n900: #232933; --jb-n1000: #131619;
  --jb-blue-dark: #11354D; --jb-blue-dark2: #0A2A40; --jb-cyan-500: #3792C3; --jb-cyan-600: #319AD5; --jb-cyan-700: #1D658C; --jb-magenta-700: #AE476E;
  --jb-grad-button: linear-gradient(90deg, #EF293D 0%, #D8316E 100%);
  --jb-shadow: 0 2px 6px 2px rgba(19, 22, 25, .16);
  --jb-card-shadow: 0 8.57px 25.71px 8.57px rgba(138, 151, 178, .15), 0 8.57px 17.14px 1px rgba(138, 151, 178, .25);
  --jb-font: Manrope, system-ui, sans-serif;
  --jb-max: 1440px;
}

/* ------------------------------------------------------------------ Base */
/* Production sets no text color on sections or TextV3, so texts without their own color inherit the page black. */
.jb-section { position: relative; box-sizing: border-box; width: 100%; z-index: 0; background: var(--jb-bg, transparent);
  padding: var(--jb-pad-m, 40px 24px); margin: var(--jb-margin-m, 0 auto); font-family: var(--jb-font); color: #000; }
@media (min-width: 769px) { .jb-section { padding: var(--jb-pad, 40px 80px); margin: var(--jb-margin, 0 auto); } }
.jb-section.has-border { border-bottom: 1px solid var(--jb-n400); }
.jb-section.is-flex { display: flex; flex-direction: var(--jb-dir, column); gap: var(--jb-gap, 0); align-items: var(--jb-items, stretch); justify-content: var(--jb-justify, flex-start); }
.jb-section > * { max-width: var(--jb-max); margin-left: auto; margin-right: auto; }
.jb-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; max-width: none; }
.jb-bg .jb-media, .jb-bg img, .jb-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
@media (max-width: 768px) { .jb-bg.is-desktop-only { display: none; } } /* ContainerV4 without bgImage.mobileConfig.image: no photo on mobile */
.jb-media { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--jb-ratio-m, var(--jb-ratio, auto)); }
@media (min-width: 769px) { .jb-media { aspect-ratio: var(--jb-ratio, auto); } }
.jb-media > img, .jb-media > picture > img, .jb-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--jb-fit, cover); }
.jb-img { max-width: 100%; height: auto; display: block; }
.jb-icon { flex-shrink: 0; }
/* IconLayoutWrapper: icon with a background, in a 12px rounded box filled with it or bordered in the stroke color */
.jb-icon-bg { display: flex; align-items: center; width: fit-content; height: fit-content; padding: var(--jb-icon-pad, 12px); border-radius: 48px; }
.jb-icon-bg.is-filled { background: var(--jb-icon-bg); }
.jb-icon-bg.is-bordered { border: 1px solid var(--jb-icon-border); }
.jb-icon-bg__box { display: flex; width: var(--jb-icon-size, 24px); height: var(--jb-icon-size, 24px); justify-content: center; align-items: center; }
.jb-align-center { text-align: center; align-items: center; }
.jb-align-left { text-align: left; align-items: flex-start; }
.jb-align-right { text-align: right; align-items: flex-end; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ------------------------------------------------------------------ Textos (TextV3) */
.jb-t { margin: 0; color: var(--jb-color, inherit); text-align: var(--jb-align-m, var(--jb-align, inherit)); font-weight: var(--jb-fw-m, var(--jb-fw, inherit));
  font-size: var(--jb-fs-m, var(--jb-size-m, inherit)); line-height: var(--jb-lh-m, var(--jb-lh-base-m, inherit)); word-break: break-word; }
@media (min-width: 769px) { .jb-t { text-align: var(--jb-align, inherit); font-weight: var(--jb-fw, inherit); font-size: var(--jb-fs, var(--jb-size-t, var(--jb-size-m, inherit))); line-height: var(--jb-lh, var(--jb-lh-base-t, var(--jb-lh-base-m, inherit))); } }
@media (min-width: 1171px) { .jb-t { font-size: var(--jb-fs, var(--jb-size-d, var(--jb-size-t, var(--jb-size-m, inherit)))); line-height: var(--jb-lh, var(--jb-lh-base-d, var(--jb-lh-base-t, var(--jb-lh-base-m, inherit)))); } }
.jb-t--display-large { --jb-size-m: 2.438rem; --jb-lh-base-m: 3rem; --jb-size-t: 3.063rem; --jb-lh-base-t: 3.938rem; }
.jb-t--display-medium { --jb-size-m: 1.938rem; --jb-lh-base-m: 2.938rem; --jb-size-t: 2.438rem; --jb-lh-base-t: 3rem; }
.jb-t--display-small { --jb-size-m: 1.563rem; --jb-lh-base-m: 2.375rem; --jb-size-t: 1.938rem; --jb-lh-base-t: 2.938rem; --jb-size-d: 2.438rem; --jb-lh-base-d: 3rem; }
.jb-t--headline-large { --jb-size-m: 1.25rem; --jb-lh-base-m: 1.875rem; --jb-size-t: 1.563rem; --jb-lh-base-t: 2.375rem; --jb-size-d: 1.938rem; --jb-lh-base-d: 2.938rem; }
.jb-t--headline-medium { --jb-size-m: 1rem; --jb-lh-base-m: 1.5rem; --jb-size-t: 1.25rem; --jb-lh-base-t: 1.875rem; --jb-size-d: 1.563rem; --jb-lh-base-d: 2.375rem; }
.jb-t--headline-small { --jb-size-m: .813rem; --jb-lh-base-m: 1.25rem; --jb-size-t: 1rem; --jb-lh-base-t: 1.5rem; --jb-size-d: 1.25rem; --jb-lh-base-d: 1.875rem; }
.jb-t--body-large { --jb-size-m: 1rem; --jb-lh-base-m: 1.5rem; }
.jb-t--body-medium { --jb-size-m: .813rem; --jb-lh-base-m: 1.25rem; }
.jb-t--body-small { --jb-size-m: .625rem; --jb-lh-base-m: .938rem; }
.jb-t--label-large { --jb-size-m: 1rem; --jb-lh-base-m: 1.125rem; }
.jb-t--label-medium { --jb-size-m: .813rem; --jb-lh-base-m: 1rem; }
.jb-t--label-small { --jb-size-m: .625rem; --jb-lh-base-m: .813rem; }
.jb-t--legal-large { --jb-size-m: .625rem; --jb-lh-base-m: .938rem; }
.jb-t--legal-medium { --jb-size-m: .5rem; --jb-lh-base-m: .813rem; }
/* mobileConfig.classType (TextV3 <type>_Custom): that type's desktop size on mobile only */
@media (max-width: 768px) {
  .jb-tm--headline-small { --jb-size-m: 1.25rem; --jb-lh-base-m: 1.875rem; }
  .jb-tm--body-medium { --jb-size-m: .813rem; --jb-lh-base-m: 1.25rem; }
}
/* tamaño fijo: el de escritorio en todos los anchos */
.jb-t--fixed.jb-t--display-large { --jb-size-m: 3.063rem; --jb-lh-base-m: 3.938rem; }
.jb-t--fixed.jb-t--display-medium { --jb-size-m: 2.438rem; --jb-lh-base-m: 3rem; }
.jb-t--fixed.jb-t--headline-large { --jb-size-m: 1.938rem; --jb-lh-base-m: 2.938rem; --jb-size-t: 1.938rem; --jb-lh-base-t: 2.938rem; }
.jb-t--fixed.jb-t--headline-medium { --jb-size-m: 1.563rem; --jb-lh-base-m: 2.375rem; --jb-size-t: 1.563rem; --jb-lh-base-t: 2.375rem; }
.jb-t--fixed.jb-t--headline-small { --jb-size-m: 1.25rem; --jb-lh-base-m: 1.875rem; --jb-size-t: 1.25rem; --jb-lh-base-t: 1.875rem; }
.jb-t--bar { position: relative; margin-bottom: 26px; }
/* Igual que TextV3 .Border + getBorderInset: 36px fuera del texto, centrada con translate(-50%, -50%). */
.jb-t--bar::before { content: ""; position: absolute; width: 135px; height: 4px; border-radius: 7px; background: var(--jb-bar, var(--jb-red)); transform: translate(-50%, -50%); }
.jb-t--bar-end::before { bottom: -36px; }
.jb-t--bar-start::before { top: -36px; }
.jb-t--bar-left::before { left: 67px; }
.jb-t--bar-center::before { left: 50%; }
.jb-t a { color: var(--jb-cyan-500); text-decoration: none; }
.jb-t a:hover { color: var(--jb-cyan-700); text-decoration: underline; }
.jb-t .jb-list { list-style-position: outside; margin: 0 0 0 20px; padding: 0; } /* TextV3 lists: marginLeft 20px only */
.jb-t .jb-list li { margin-bottom: 8px; }
.jb-hl { color: var(--jb-red); }

/* ------------------------------------------------------------------ Botones (ButtonV3) */
.jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; box-sizing: border-box; border: 1px solid transparent;
  border-radius: 40px; font: 600 1rem/1.125rem var(--jb-font); text-decoration: none; cursor: pointer; transition: .1s; background: transparent; color: inherit; }
.jb-btn--large { padding: 19px 25px; } .jb-btn--medium { padding: 14px 25px; } .jb-btn--small { padding: 8px 25px; }
.jb-btn--link { padding: 0; min-width: 0; } .jb-btn--header { padding: 12px 16px; }
@media (min-width: 1171px) { .jb-btn--header { padding: 8px 16px; } }
.jb-btn:focus-visible { outline: 2px solid var(--jb-n1000); outline-offset: 2px; }
.jb-btn[disabled] { cursor: default; background: var(--jb-n300) !important; border-color: var(--jb-n500) !important; color: var(--jb-n500) !important; box-shadow: none !important; }
.jb-btn--PrimaryRed { background: var(--jb-red); border-color: var(--jb-red); color: var(--jb-n0); }
.jb-btn--PrimaryRed:hover { box-shadow: var(--jb-shadow); } .jb-btn--PrimaryRed:active { background: var(--jb-red-700); }
.jb-btn--PrimaryDark { background: var(--jb-n1000); border-color: var(--jb-n1000); color: var(--jb-n0); }
.jb-btn--PrimaryDark:hover, .jb-btn--PrimaryLight:hover { box-shadow: var(--jb-shadow); }
.jb-btn--PrimaryLight { background: var(--jb-n0); border-color: var(--jb-n1000); color: var(--jb-n1000); }
.jb-btn--PrimaryGradient { background: var(--jb-grad-button); border: .75px solid rgba(167, 30, 44, .16); color: var(--jb-n0); }
.jb-btn--PrimaryGradient:hover { background: #A71E50; box-shadow: var(--jb-shadow); } .jb-btn--PrimaryGradient:active { background: var(--jb-magenta-700); }
.jb-btn--SecondaryRed { border-color: var(--jb-red); color: var(--jb-red); }
.jb-btn--SecondaryRed:hover { background: var(--jb-n200); border-color: var(--jb-red-2); color: var(--jb-red-2); box-shadow: 0 0 0 1px var(--jb-red-2); }
.jb-btn--SecondaryDark { border-color: var(--jb-n1000); color: var(--jb-n1000); } .jb-btn--SecondaryDark:hover { background: var(--jb-n200); }
.jb-btn--SecondaryLight { border-color: var(--jb-n0); color: var(--jb-n0); } .jb-btn--SecondaryLight:hover { background: var(--jb-n900); }
.jb-btn--TercearyRed { color: var(--jb-red); } .jb-btn--TercearyDark { color: var(--jb-n1000); } .jb-btn--TercearyLight { color: var(--jb-n0); }
.jb-btn--TercearyRed:hover, .jb-btn--TercearyDark:hover { background: var(--jb-n200); } .jb-btn--TercearyLight:hover { background: var(--jb-n900); }
.jb-btn--Link { color: var(--jb-cyan-500); min-width: fit-content; justify-content: flex-start; border: 0; padding-left: 0; padding-right: 0; }
.jb-btn--Link:hover { color: var(--jb-cyan-700); text-decoration: underline; }
.jb-btn--LinkFooter { border: 0; border-radius: 0; justify-content: flex-start; min-width: 0; padding: 0; }
.jb-btn--LinkHeader { background: var(--jb-n0); border: 0; border-radius: 0; }
.jb-cta { display: flex; justify-content: center; margin-top: 8px; }

/* ------------------------------------------------------------------ Títulos estándar */
.jb-heading { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.jb-heading.jb-align-center .jb-t { text-align: center; }

.jb-deco { display: none; }
/* Imagen decorativa del contenedor (bgImage2, Parts::open): solo desde 769 px. */
@media (min-width: 769px) {
  .jb-deco { display: block; position: absolute; right: 0; z-index: 1; max-width: none; }
  .jb-deco--top { top: 0; } .jb-deco--bottom { bottom: 0; }
}

/* ------------------------------------------------------------------ Migas de pan */
/* BreadcrumbV3 (+ BaseHero .BreadCrumb dentro del hero). Variables propias: --jb-pad y --jb-bg las hereda del hero. */
.jb-crumbs { box-sizing: border-box; padding: var(--jb-crumb-pad, 16px 24px); background: var(--jb-crumb-bg, transparent); font-size: 1rem; line-height: normal; }
.jb-crumbs ol { display: none; list-style: none; margin: 0; padding: 0; align-items: center; }
.jb-crumbs li { display: flex; align-items: center; white-space: nowrap; color: var(--jb-crumb, var(--jb-n800)); }
.jb-crumbs li:last-child { min-width: 0; flex-shrink: 1; }
.jb-crumbs li + li::before { content: ">"; margin: 0 8px; font-size: 1.563rem; color: var(--jb-crumb-inactive, var(--jb-n500)); }
.jb-crumbs ol a { display: block; color: var(--jb-crumb-inactive, var(--jb-n500)); text-decoration: none; }
.jb-crumbs ol li:first-child a { display: flex; }
.jb-crumb__current { display: block; color: var(--jb-crumb, var(--jb-n800)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-crumbs__back { display: flex; gap: 8px; align-items: center; }
.jb-crumbs__back a { display: flex; color: var(--jb-crumb-arrow, var(--jb-n800)); }
.jb-v--dark .jb-crumbs, .jb-v--red .jb-crumbs, .jb-hero--v4.jb-v--gray .jb-crumbs { --jb-crumb: var(--jb-n100); --jb-crumb-inactive: var(--jb-n400); }
.jb-v--red .jb-crumbs { --jb-crumb-inactive: var(--jb-n300); }
/* La flecha de móvil es oscura solo en Light y Gray. */
.jb-crumbs.jb-v--dark, .jb-crumbs.jb-v--red, .jb-crumbs.jb-v--gradient { --jb-crumb-arrow: var(--jb-n0); }
.jb-hero .jb-crumbs { padding: 16px 24px; }
@media (min-width: 769px) {
  .jb-crumbs { position: relative; padding: var(--jb-crumb-pad, 36px 80px 0); max-width: 50vw; }
  .jb-crumbs.is-full { max-width: 100vw; }
  .jb-crumbs ol { display: flex; } .jb-crumbs .jb-crumbs__back { display: none; }
  .jb-hero .jb-crumbs { padding: 16px 0; }
}

/* ------------------------------------------------------------------ Tarjetas y listas */
.jb-items { width: 100%; max-width: var(--jb-max); margin: 0 auto; }
.jb-items__track { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: stretch; }
.jb-items--flex .jb-items__item { width: 100%; }
@media (min-width: 769px) { .jb-items--flex .jb-items__item { width: var(--jb-card-w, 405px); max-width: 100%; } }
/* Flex Grid (CardsV3 >=1171px: margin 0 auto): the free space of each line is shared around the cards */
@media (min-width: 1171px) { .jb-items--flex:not(.jb-items--slider-d) .jb-items__item { margin: 0 auto; } }
:where(.jb-items[class*="jb-items--cols-"]) .jb-items__track { display: grid; grid-template-columns: 1fr; }
@media (min-width: 769px) { .jb-items--cols-2 .jb-items__track, .jb-items--cols-3 .jb-items__track, .jb-items--cols-4 .jb-items__track { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1171px) { .jb-items--cols-3 .jb-items__track, .jb-items--cols-4 .jb-items__track { grid-template-columns: repeat(3, 1fr); } .jb-items--cols-1 .jb-items__item { width: 66%; margin: 0 auto; } }
@media (min-width: 1441px) { .jb-items--cols-4 .jb-items__track { grid-template-columns: repeat(4, 1fr); } .jb-items--cols-1 .jb-items__item { width: 50%; } }
/* carrusel: scroll-snap (móvil y/o escritorio) */
@media (max-width: 768px) { .jb-items--slider-m .jb-items__track { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: none; padding-bottom: 8px; justify-content: flex-start; }
  .jb-items--slider-m .jb-items__item { flex: 0 0 85%; width: auto; scroll-snap-align: start; }
  /* SliderDots (Slider.module.css, SliderDots.module.css): full viewport width, one slide per view with 8px of side
   * padding and 40px below the slides */
  .jb-items.jb-items--slider-m:not(.jb-items--overflow) { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .jb-items--slider-m:not(.jb-items--overflow) .jb-items__track { gap: 0; padding-bottom: 40px; }
  .jb-items--slider-m:not(.jb-items--overflow) .jb-items__item { flex: 0 0 100%; min-width: 0; padding: 0 8px; box-sizing: border-box; display: flex; justify-content: center; }
  .jb-items--slider-m:not(.jb-items--overflow) .jb-items__item > * { width: 100%; } }
@media (min-width: 769px) { .jb-items--slider-d .jb-items__track { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: none; justify-content: flex-start; }
  .jb-items--slider-d .jb-items__item { flex: 0 0 calc((100% - 16px * (var(--jb-per-view) - 1)) / var(--jb-per-view)); width: auto; scroll-snap-align: start; }
  /* SliderDots: slides of 1/N of the track (N from utils/slider.ts) with 8px of side padding and 48px below; the card
   * keeps its cardConfig.size, centered, and shrinks only when the slide is narrower */
  .jb-items--slider-d:not(.jb-items--overflow) .jb-items__track { gap: 0; padding-bottom: 48px; }
  .jb-items--slider-d:not(.jb-items--overflow) .jb-items__item { flex-basis: calc(100% / var(--jb-per-view-t, 1)); min-width: 0; padding: 0 8px; box-sizing: border-box; display: flex; justify-content: center; }
  .jb-items--slider-d:not(.jb-items--overflow) .jb-items__item > * { width: var(--jb-card-w, 405px); max-width: 100%; margin: 0 auto; } }
/* react-slick: breakpoint 1440 covers 1171-1439 px; from 1440 px the general setting wins */
@media (min-width: 1171px) { .jb-items--slider-d:not(.jb-items--overflow) .jb-items__item { flex-basis: calc(100% / var(--jb-per-view, 1)); } }
@media (min-width: 1440px) { .jb-items--slider-d:not(.jb-items--overflow) .jb-items__item { flex-basis: calc(100% / var(--jb-per-view-g, 1)); } }
.jb-items__track::-webkit-scrollbar { display: none; }
/* As slick-slider: no text selection while dragging the slides with the mouse. */
[data-jb-slider] .jb-items__track { user-select: none; -webkit-user-select: none; }
/* Copies of the slides for the infinite loop (blocks.js): only while the track scrolls and the slides do not fit. */
.jb-items:not(.jb-items--loop) .jb-items__item--clone { display: none !important; }
/* SliderOverflow (SliderOverflow.module.css; only Testimonials uses it): .slick-list overflow visible, so the track spans
 * the viewport and its padding puts the slides at the list's left edge. No dots (getSliderSettings dots false).
 * Under 769px, slick centerMode (utils/slider.ts): one slide of the list width minus 2 x 50px (centerPadding) with
 * 0 8px of padding, centred, the neighbours peeking on both sides. From 769px each slide is its card
 * (cardConfig.size) plus 0 20px; blocks.js sets --jb-ov-start, where slick's getTrackLeft puts the first slide. */
.jb-items.jb-items--overflow .jb-items__track { margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); gap: 0; }
.jb-items.jb-items--overflow .jb-items__item { box-sizing: border-box; min-width: 0; }
@media (max-width: 768px) { .jb-items.jb-items--overflow .jb-items__track { padding: 0 50px; }
  .jb-items.jb-items--overflow .jb-items__item { flex: 0 0 100%; padding: 0 8px; scroll-snap-align: center; }
  .jb-items.jb-items--overflow .jb-items__item > * { width: 100%; } }
@media (min-width: 769px) { .jb-items.jb-items--overflow .jb-items__item { flex: 0 0 auto; width: auto; padding: 0 20px; scroll-margin-left: var(--jb-ov-start, 0px); }
  .jb-items.jb-items--overflow .jb-items__item > * { width: var(--jb-card-w, 580px); } }
.jb-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.jb-dots button { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--jb-n400); background: var(--jb-n300); padding: 0; cursor: pointer; }
.jb-dots button[aria-current="true"] { background: var(--jb-red); border-color: var(--jb-red); }
/* SliderDots: 20px dots, at most 5 visible, chevrons when there are more (SliderDots.module.css, SliderDotsPagination) */
.jb-dots-nav { display: flex; justify-content: space-around; align-items: center; gap: 10px; max-width: 200px; height: 20px; margin: 0 auto; }
.jb-dots-nav[hidden], .jb-dots-nav [hidden] { display: none; }
.jb-dots-nav .jb-dots { margin: 0; padding: 0; list-style: none; gap: 10px; line-height: normal; }
.jb-dots-nav .jb-dots button { width: 20px; height: 20px; vertical-align: baseline; }
.jb-dots__prev, .jb-dots__next { display: flex; padding: 0; border: 0; background: none; cursor: pointer; }
.jb-v--red .jb-dots button[aria-current="true"], .jb-v--gradient .jb-dots button[aria-current="true"] { background: var(--jb-n0); border-color: var(--jb-n0); }
.jb-card { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; border-radius: 24px; overflow: hidden;
  background: var(--jb-card-bg, var(--jb-n0)); padding: var(--jb-card-pad, 16px); text-align: var(--jb-card-align, left); border: 1px solid var(--jb-card-bg, transparent); }
.jb-card--outline { border-color: var(--jb-card-border, var(--jb-n400)); }
.jb-card--shadow { border: 0; box-shadow: var(--jb-card-shadow); }
.jb-card--base-image-card { padding: var(--jb-card-pad, 0 0 16px 0); }
.jb-card--base-image-card .jb-card__content, .jb-card--base-image-card .jb-card__buttons, .jb-card--base-text-card .jb-card__buttons { padding: 0 16px; }
.jb-card--base-text-card { background: var(--jb-card-bg, transparent); }
/* BaseIconCard: icon or 48px image (12px margin) aligned with the card content (alignItems from contentAlign) */
.jb-card--base-icon-card .jb-card__image { display: flex; justify-content: var(--jb-card-align, left); }
.jb-card--base-icon-card .jb-card__image img { width: 48px; height: 48px; margin: 12px; object-fit: contain; }
.jb-card--circle-image-card .jb-card__image img { width: 120px; height: 120px; border-radius: 60px; object-fit: cover; margin: 12px auto; }
.jb-card__content { display: flex; flex-direction: column; gap: 12px; }
.jb-card__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; justify-content: var(--jb-card-align, left); }
.jb-card__cat { color: var(--jb-red); font-weight: 700; font-size: .813rem; margin: 0; }
.jb-card-link { color: inherit; text-decoration: none; display: block; height: 100%; }
.jb-card-link:hover .jb-card { background: var(--jb-n100); box-shadow: var(--jb-card-shadow); }
.jb-card-link:hover .jb-btn--Link { color: var(--jb-cyan-700); text-decoration: underline; }
/* TestimonialsCard: --cardv3-color unset, so the texts inherit black (themeV2.css body { color: unset }) with
 * line-height normal, unless Contentful sets their colour */
.jb-card--testimonials-card { padding: 24px 40px; gap: 28px; justify-content: space-between; color: #000; line-height: normal; }
@media (min-width: 769px) { .jb-testimonial__quote { max-width: 75%; } }
.jb-testimonial__who { display: flex; gap: 20px; align-items: center; }
/* Avatar at the image's width/height (default 44x44), mobileConfig's under 769px; it never shrinks */
.jb-testimonial__who img { width: var(--jb-avatar-w-m, 44px); height: var(--jb-avatar-h-m, 44px); flex-shrink: 0; border-radius: 50%; object-fit: cover; }
@media (min-width: 769px) { .jb-testimonial__who img { width: var(--jb-avatar-w, 44px); height: var(--jb-avatar-h, 44px); } }
.jb-v--dark .jb-heading .jb-t, .jb-v--red .jb-heading .jb-t, .jb-v--gradient .jb-heading .jb-t { color: var(--jb-color, var(--jb-n0)); }

/* ------------------------------------------------------------------ Fichas (chips) y pestañas */
.jb-chips__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 32px; }
.jb-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-width: 150px; justify-content: center; padding: 8px 25px; border-radius: 40px;
  border: 1px solid var(--jb-n300); background: var(--jb-n200); color: var(--jb-n600); font: 600 .813rem/1rem var(--jb-font); cursor: pointer; text-decoration: none; }
.jb-chip[aria-selected="true"] { background: var(--jb-red-100); border-color: var(--jb-red); color: var(--jb-red); }
.jb-chip__check { display: none; } .jb-chip[aria-selected="true"] .jb-chip__check { display: none; }
@media (min-width: 769px) { .jb-chip[aria-selected="true"] .jb-chip__check { display: inline; } }

/* ------------------------------------------------------------------ Formularios de HubSpot */
.jb-hsform { --hs-text: var(--jb-n700); --hs-error: var(--jb-red); --hs-btn-bg: var(--jb-grad-button); --hs-btn-color: var(--jb-n0); --hs-btn-border: rgba(167, 30, 44, .16); font-family: var(--jb-font); line-height: normal; }
/* Hubspot.module.css .Wrapper min-width: keeps the newsletter form column at 240px or more when it shares the row with the text (769-1170px). */
.jb-hsform { min-width: 240px; }
.jb-hsform__loading { display: flex; justify-content: center; }
/* Space kept until HubSpot reports the form ready (assets/js/hubspot.js adds .is-ready on onFormReady; HubSpot empties
   the box before the form has its height), so the form does not push what follows when it appears (CLS): the height of
   the shortest measured form (contact and banner forms: 893px on mobile, 647px from 769px), so it never shrinks on
   load. The newsletter form is short and keeps none. */
.jb-hsform:not(.is-ready) { min-height: 893px; }
@media (min-width: 769px) { .jb-hsform:not(.is-ready) { min-height: 647px; } }
.jb-newsletter .jb-hsform:not(.is-ready) { min-height: 0; }
.jb-hsform__spinner { width: 80px; height: 80px; box-sizing: border-box; border: 10px solid var(--jb-n0); border-top-color: var(--jb-red); border-radius: 50%; animation: jb-spin 1s linear infinite; }
@keyframes jb-spin { to { transform: rotate(360deg); } }
.jb-hsform--hubspot-dark, .jb-hsform--banner-dark { --hs-text: var(--jb-n400); --hs-error: var(--jb-n0); }
.jb-hsform--hubspot-red, .jb-hsform--banner-red { --hs-text: var(--jb-n300); --hs-error: var(--jb-n0); --hs-btn-bg: var(--jb-n0); --hs-btn-color: var(--jb-n1000); --hs-btn-border: rgba(19, 22, 25, .16); }
.jb-hsform--hubspot-gradient { --hs-text: var(--jb-n200); --hs-error: var(--jb-n0); --hs-btn-bg: var(--jb-n0); --hs-btn-color: var(--jb-n1000); }
.jb-hsform--banner-light, .jb-hsform--banner-gray, .jb-hsform--banner-dark { --hs-btn-bg: var(--jb-red); --hs-btn-border: var(--jb-red); }
.jb-hsform--banner-gradient { --hs-text: var(--jb-n0); --hs-error: var(--jb-n0); --hs-btn-bg: var(--jb-n900); --hs-btn-border: var(--jb-n900); }
.jb-hsform .hs-form { position: relative; display: flex; flex-direction: column; gap: 24px; max-width: 764px; }
.jb-hsform .form-columns-1, .jb-hsform .form-columns-2 { max-width: 100%; width: 100%; }
.jb-hsform .form-columns-2 { display: flex; flex-direction: column; gap: 24px; }
.jb-hsform .hs-form-field { position: relative; width: 100% !important; max-width: 764px; }
.jb-hsform .hs-form-field > label { position: absolute; top: 8px; left: 16px; transition: .2s cubic-bezier(.65,.05,.36,1); pointer-events: none; color: var(--jb-n600); font-size: .813rem; line-height: 1rem; z-index: 1; }
.jb-hsform .hs-input { width: 100% !important; box-sizing: border-box; height: 58px; padding: 28px 16px 6px; border-radius: 8px; border: 1px solid var(--jb-n400); background: var(--jb-n0); color: var(--jb-n1000); font: 1rem/1.5rem var(--jb-font); }
.jb-hsform textarea.hs-input { height: 140px; }
.jb-hsform input[type=checkbox].hs-input { width: 20px !important; height: 20px; padding: 0; margin: 0 8px 0 0; border: none; float: left; cursor: pointer; accent-color: var(--jb-red); }
.jb-hsform .hs-input:not(:focus):not(:disabled):hover { border-color: var(--jb-n700); }
.jb-hsform .hs-input:focus { outline: 2px solid var(--jb-n1000); }
.jb-hsform .hs-input:disabled { background: var(--jb-n300); color: var(--jb-n500); outline: 1px solid var(--jb-n400); }
.jb-hsform select.is-placeholder { color: var(--jb-n600); }
.jb-hsform .inputs-list { list-style: none; width: 100%; margin: 0; padding: 0; }
/* Hubspot.module.css error rules: list 6px below the field (!important as production), left-aligned 1rem/1.125rem messages, rollup and consent errors in the variant error color. */
.jb-hsform .hs-error-msgs { margin: 0 !important; padding: 0 !important; margin-top: 6px !important; }
.jb-hsform .hs-error-msg { margin: 0; text-align: left; color: var(--hs-error); font-size: 1rem; line-height: 1.125rem; }
.jb-hsform .hs_error_rollup .hs-error-msgs label { color: var(--hs-error); }
.jb-hsform .legal-consent-container .hs-error-msgs label { color: var(--hs-error); text-align: left; }
.jb-hsform .legal-consent-container { color: var(--hs-text); } .jb-hsform .hs-richtext { color: var(--hs-text); font-size: .813rem; line-height: 1.25rem; }
.jb-hsform .legal-consent-container p, .jb-hsform .legal-consent-container span { font-size: .813rem; line-height: 1.25rem; text-align: left; }
/* Hubspot.module.css .hs-dependent-field: as a flex column it keeps the 8px bottom margin of each consent row inside it (28px rows, as production). */
.jb-hsform .hs-dependent-field { display: flex; flex-direction: column; gap: 24px; }
.jb-hsform a { color: #319AD5; }
.jb-hsform .hs-button { border-radius: 40px; min-width: 150px; padding: 16px 25px; font: 600 1rem/1.125rem var(--jb-font); background: var(--hs-btn-bg); color: var(--hs-btn-color); border: 1px solid var(--hs-btn-border); cursor: pointer; }
.jb-hsform .form-columns-1:has(.hs_ip_address) { display: none; }
@media (min-width: 769px) { .jb-hsform .form-columns-2 { flex-direction: row; } .jb-hsform .form-columns-1, .jb-hsform .form-columns-2 { width: auto; } }

/* ------------------------------------------------------------------ Blog */
.jb-blogbar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.jb-blogbar__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.jb-blogbar__search { display: flex; align-items: center; border: 1px solid var(--jb-n400); border-radius: 24px; padding: 0 8px 0 16px; }
.jb-blogbar__search input { border: 0; height: 44px; flex: 1; font: 1rem var(--jb-font); background: none; }
.jb-blogbar__search button { background: none; border: 0; cursor: pointer; padding: 8px; }
@media (min-width: 769px) { .jb-blogbar { flex-direction: row; justify-content: space-between; align-items: center; } .jb-blogbar__search { min-width: 280px; } }
.jb-blogbar--full { box-sizing: border-box; width: 100%; margin: 0; padding: 24px; border-bottom: 1px solid #e2e8f0;
  flex-direction: row; justify-content: space-between; align-items: center; } /* flexMobile: row, gap 16 */
.jb-blogbar--full .jb-blogbar__chips { flex: 0 1 auto; min-width: 0; }
.jb-blogbar--full .jb-chip { box-sizing: border-box; border: 0; } /* Chip: Button small border-box; --Neutral-Neutral-300 is undefined, so no border */
.jb-blogbar--full .jb-chip[aria-current="page"] { border: 1px solid var(--jb-red); background: var(--jb-red-100); color: var(--jb-red); } /* Chip_Active */
@media (min-width: 769px) { .jb-blogbar--full { padding: 24px 80px; gap: 16px; } .jb-blogbar--full .jb-blogbar__chips { flex-wrap: wrap; overflow: visible; } }
/* BlogSearch: borderless "Search" text (55/70 px × 58); on focus or with a value it opens to 240 px with a border (BlogSearch.module.css) */
.jb-blogbar--full .jb-blogbar__search { flex-shrink: 0; gap: 16px; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.jb-blogbar--full .jb-blogbar__search input { box-sizing: border-box; flex: none; width: 55px; height: 58px; padding: 0; border: 0; outline: none;
  color: var(--jb-n800); font: 600 1rem var(--jb-font); }
.jb-blogbar--full .jb-blogbar__search input::placeholder { color: var(--jb-n800); opacity: 1; }
.jb-blogbar--full .jb-blogbar__search input:focus, .jb-blogbar--full .jb-blogbar__search input:not(:placeholder-shown) { width: 240px; padding: 6px 16px;
  border: 1px solid #B6C0D2; border-radius: 8px; font-weight: 400; }
.jb-blogbar--full .jb-blogbar__search input:focus::placeholder { color: #667799; }
.jb-blogbar--full .jb-blogbar__search button { display: flex; padding: 0; color: var(--jb-n700); }
.jb-blogbar--full .jb-blogbar__search svg { stroke-width: 1.71429; } /* SearchBlog: stroke neutral700, 1.71429 */
@media (min-width: 769px) { .jb-blogbar--full .jb-blogbar__search { min-width: 0; } .jb-blogbar--full .jb-blogbar__search input { width: 70px; } }
/* CategorySelect (mobile only, instead of the chips): 240 x 58, padding 12px 16px, neutral500 border and text, radius 8 */
.jb-blogbar__select { box-sizing: border-box; width: 240px; height: 58px; padding: 12px 16px; border: 1px solid #667799; border-radius: 8px;
  background: #fff; color: #667799; font: 400 1rem var(--jb-font); }
@media (max-width: 768px) { .jb-blogbar--full .jb-blogbar__chips { display: none; } }
/* BlogSearchClient: on mobile the open search (focused, or with a value) takes the row and hides CategorySelect. */
@media (max-width: 768px) { .jb-blogbar--full:has(.jb-blogbar__search input:focus, .jb-blogbar__search input:not(:placeholder-shown)) .jb-blogbar__select { display: none; } }
@media (min-width: 769px) { .jb-blogbar__select { display: none; } }
/* BlogSectionCard: neutral300 outline, no padding, gap20, texts 0 20px, "Read more" 0 0 20px 20px (not on mobile) */
.jb-card--blog-section { padding: 0; gap: 20px; --jb-card-border: var(--jb-n300); }
.jb-card--blog-section .jb-card__content { padding: 0 20px; }
.jb-card--blog-section .jb-card__buttons { padding: 0 0 20px 20px; }
@media (max-width: 768px) { .jb-card--blog-section .jb-card__buttons { display: none; } }
.jb-pagination ul { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 48px 0 0; }
.jb-pagination a, .jb-pagination span { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 20px; color: var(--jb-n900); text-decoration: none; }
.jb-pagination [aria-current] { background: var(--jb-red); color: var(--jb-n0); }
.jb-pagination--full .is-disabled { cursor: not-allowed; color: gray; opacity: .5; pointer-events: none; } /* Pagination .Disabled */
/* Production's Pagination (Pagination.module.css), as the author page renders it */
.jb-pagination--full { padding-top: 24px; font: 16px/28px var(--jb-font); color: #000; } /* .Item a uses the undefined --theme-colors-gray8: it inherits black */
.jb-pagination--full ul { gap: 0; margin: 0; }
.jb-pagination--full li { display: flex; width: 32px; height: 32px; margin: 0 4px; box-sizing: border-box; border: 1px solid rgb(241, 241, 241); border-radius: 10px; background: var(--jb-n0); }
.jb-pagination--full a, .jb-pagination--full span { width: 100%; height: 100%; min-width: 0; border-radius: 0; color: inherit; font: 600 13px/28px var(--jb-font); }
.jb-pagination--full li:has([aria-current]) { border: 0; background: var(--jb-red); color: var(--jb-n0); }
.jb-pagination--full [aria-current] { background: none; }
.jb-pagination--full .jb-pagination__step { border: none; }
.jb-pagination--full .jb-pagination__gap { align-items: center; justify-content: center; } /* Pagination "..." item */
@media (min-width: 769px) { .jb-pagination--full li:hover { background: var(--jb-red); color: var(--jb-n0); } }
@media (max-width: 768px) { .jb-pagination--full li.jb-pagination__step { display: none; } } /* Pagination .Prev / .Next: from 769px only */
.jb-avatar { border-radius: 50%; object-fit: cover; }

/* ------------------------------------------------------------------ Plantillas */
.jb-main { margin: 0; }
.jb-single { font-family: var(--jb-font); }
/* Blog layout .Content (Layout.module.css): no padding of its own, a flex column with gap 32 on mobile; each child
   carries its own gutter: the article ContainerV4 default 40px 24px and RelatedContent 0 24px (measured). */
.jb-single__grid { display: grid; gap: 32px; max-width: var(--jb-max); margin: 0 auto; box-sizing: border-box; }
.jb-single .jb-article { padding: 40px 24px; }
.jb-single .jb-related { padding: 0 24px; }
/* FAQ inside a blog post: on mobile it goes full bleed over the article's 24px side padding, as in production. */
.jb-article__body > .jb-faq { width: calc(100% + 48px); max-width: none; margin: 0 -24px; }
/* From 769px .Content is a grid 1fr 360px, gap 48, padding 24px 80px 0 0 under the full-width breadcrumb; the
   article (ContainerV4) carries its own 0 0 72px 80px padding and RelatedContent none. */
@media (min-width: 769px) {
  .jb-single__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding: 24px 80px 0 0; }
  .jb-single .jb-article { padding: 0 0 72px 80px; }
  .jb-single .jb-related { padding: 0; }
  /* FAQ inside a blog post: production renders it across the whole first column of the blog layout, not inside the
     article's 0 0 72px 80px padding, so it reaches back over the 80px left padding. */
  .jb-article__body > .jb-faq { width: calc(100% + 80px); max-width: none; margin: 0 0 0 -80px; }
}