/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/*
 * View transition
 * */
@view-transition{
	navigation:auto;
}
::view-transition-group(root){
	animation-duration:1s;
}
/* ==========================================================================
   JF CSS Framework — SmartTEAM Edition (Reducido)
   Solo lo que se usa: tokens, reset mínimo, layout, botones, highlight,
   hero, product-card, link y utilities esenciales.
   Las animaciones y componentes no usados se manejan dentro de Bricks.
   ========================================================================== */

@layer jf-reset, jf-base, jf-layout, jf-components, jf-pages, jf-utilities, jf-overrides;

/* ========================================================================== */
/* TYPED CUSTOM PROPERTIES                                                     */
/* ========================================================================== */

@property --jf-glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --jf-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ========================================================================== */
/* RESET                                                                       */
/* ========================================================================== */

@layer jf-reset {
  :where(.jf-scope) *,
  :where(.jf-scope) *::before,
  :where(.jf-scope) *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  :where(.jf-scope) img,
  :where(.jf-scope) video,
  :where(.jf-scope) iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }
  :where(.jf-scope) button,
  :where(.jf-scope) input,
  :where(.jf-scope) select,
  :where(.jf-scope) textarea {
    font: inherit;
    color: inherit;
  }
  :where(.jf-scope) a {
    color: inherit;
    text-decoration: none;
  }
  :where(.jf-scope) ul[class],
  :where(.jf-scope) ol[class] {
    list-style: none;
  }
  :where(.jf-scope) :focus-visible {
    outline: 3px solid color-mix(in oklab, var(--jf-primary) 65%, transparent);
    outline-offset: 2px;
  }
  :where(.jf-scope) button,
  :where(.jf-scope) [role="button"] {
    cursor: pointer;
  }
  :where(.jf-scope) :disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

/* ========================================================================== */
/* TOKENS + THEME SYSTEM                                                       */
/* ========================================================================== */

@layer jf-base {
  :root {
    /* ====== BRAND COLORS ====== */
    --jf-color-black:        #000;
    --jf-color-dark:         #1B2034;
    --jf-color-text:         #121212;
    --jf-color-white:        #FFFFFF;
    --jf-color-muted:        #9E9E9E;
    --jf-color-yellow:       #FFDA44;
    --jf-color-yellow-alt:   #FBDA1E;
    --jf-color-green:        #59BB6A;
    --jf-color-blue:         #35BFE9;
    --jf-color-blue-btn:     #34C2EC;
    --jf-color-red:          #D80027;
    --jf-color-pink:         #EF506D;
    --jf-color-amber:        #FDBB2A; 
    --jf-color-purple:       #9284B2;
    --jf-color-purple-btn:   #796AAF;
    --jf-color-input-border: #EDEDED;
    --jf-color-input-bg:     #FAFAFA;

    /* ====== SEMANTIC TOKENS ====== */
    --jf-primary:         var(--jf-color-blue-btn);
    --jf-secondary:       var(--jf-color-purple-btn);
    --jf-tertiary:        var(--jf-color-amber);
    --jf-success:         var(--jf-color-green);
    --jf-error:           var(--jf-color-pink);
    --jf-bg:              var(--jf-color-white);
    --jf-surface:         var(--jf-color-white);
    --jf-surface-2:       var(--jf-color-input-bg);
    --jf-surface-3:       #F0F0F0;
    --jf-text:            var(--jf-color-black);
    --jf-text-muted:      var(--jf-color-muted);
    --jf-text-subtle:     #BDBDBD;
    --jf-text-on-primary: var(--jf-color-white);
    --jf-border:          var(--jf-color-input-border);

    /* ====== FONT FAMILIES ====== */
    --jf-font-heading: 'Livvic', sans-serif;
    --jf-font-body:    'LexendDeca', sans-serif;
    --jf-font-nav:     'Lexend', sans-serif;

    /* ====== FONT WEIGHTS ====== */
    --jf-weight-light:    300;
    --jf-weight-regular:  400;
    --jf-weight-medium:   500;
    --jf-weight-semibold: 600;
    --jf-weight-bold:     700;
    --jf-weight-black:    900;

    /* ====== FONT SIZES ====== */
    --jf-fs-hero:      clamp(3.4rem, 2.52rem + 2.2vw, 4.6rem);
    --jf-fs-h2:       clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --jf-fs-h3:       clamp(1.625rem, 1.3rem + 1.625vw, 2.25rem);
    --jf-fs-subtitle: clamp(1.125rem, 0.95rem + 0.875vw, 1.5rem);
    --jf-fs-body-lg:  clamp(1.0625rem, 0.95rem + 0.5625vw, 1.3125rem);
    --jf-fs-body-md:  clamp(1.125rem, 0.95rem + 0.875vw, 1.5625rem);
    --jf-fs-body:     1rem;
    --jf-fs-nav:      1rem;
    --jf-fs-sm:       0.875rem;
    --jf-fs-xs:       0.75rem;

    /* ====== FONT SIZE SCALE ====== */
    --jf-text-xs:  1.6rem;
    --jf-text-s:   1.8rem;
    --jf-text-m:   2rem;
    --jf-text-l:   2.5rem;
    --jf-text-xl:  2rem;
    --jf-text-2xl: clamp(1.75rem,  1.4rem + 1.8vw,   2.75rem);
    --jf-text-3xl:  clamp(3.4rem, 2.52rem + 2.2vw, 4.6rem);
    --jf-text-4xl:  clamp(3.4rem, 2.52rem + 2.2vw, 4.6rem);

    /* ====== LINE HEIGHTS ====== */
    --jf-lh-tight:   1.0;
    --jf-lh-snug:    1.1;
    --jf-lh-heading: 1.2;
    --jf-lh-body:    1.31;
    --jf-lh-normal:  1.5;
    --jf-lh-relaxed: 1.75;
    --jf-lh-loose:   2;

    /* ====== BORDER RADIUS ====== */
    --jf-radius-xs:   0.25rem;
    --jf-radius-s:    0.5rem;
    --jf-radius-m:    0.75rem;
    --jf-radius-l:    1rem;
    --jf-radius-xl:   1.25rem;
    --jf-radius-2xl:  1.5rem;
    --jf-radius-full: 999rem;
    --jf-radius-pill: 100px;

    /* ====== SHADOWS ====== */
    --jf-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.06);
    --jf-shadow-s:  0 2px 4px hsl(0 0% 0% / 0.08);
    --jf-shadow-m:  0 6px 24px hsl(0 0% 0% / 0.12);
    --jf-shadow-l:  0 14px 50px hsl(0 0% 0% / 0.18);
    --jf-shadow-xl: 0 24px 80px hsl(0 0% 0% / 0.25);

    /* ====== SPACING ====== */
    --jf-space-3xs: clamp(0.25rem, 0.2rem  + 0.2vw, 0.375rem);
    --jf-space-2xs: clamp(0.5rem,  0.4rem  + 0.3vw, 0.75rem);
    --jf-space-xs:  clamp(0.75rem, 0.6rem  + 0.5vw, 1rem);
    --jf-space-s:   clamp(1rem,    0.8rem  + 0.8vw, 1.5rem);
    --jf-space-m:   clamp(1.25rem, 1rem    + 1vw,   2rem);
    --jf-space-l:   clamp(1.75rem, 1.3rem  + 1.8vw, 3rem);
    --jf-space-xl:  clamp(2.25rem, 1.7rem  + 2.6vw, 4rem);
    --jf-space-2xl: clamp(3rem,    2.2rem  + 3.5vw, 6rem);
    --jf-space-3xl: clamp(4rem,    3rem    + 5vw,   9rem);

    /* ====== BUTTONS ====== */
    --jf-btn-height:         40px;
    --jf-btn-padding:        10px 16px;
    --jf-btn-gap:            8px;
    --jf-btn-border-width:   1.5px;
    --jf-btn-radius:         var(--jf-radius-m);
    --jf-btn-purple-bg:      var(--jf-color-purple-btn);
    --jf-btn-purple-height:  clamp(54px, 3.5rem + 1vw, 70px);
    --jf-btn-purple-padding: 22px 73px;

    /* ====== LAYOUT ====== */
    --jf-max-xs:  480px;
    --jf-max-s:   640px;
    --jf-max-m:   768px;
    --jf-max-l:   1024px;
    --jf-max-xl:  1280px;
    --jf-max-2xl: 1536px;
    --jf-max:     1200px;
    --jf-container-pad: var(--jf-space-s);

    /* ====== Z-INDEX ====== */
    --jf-z-base:    1;
    --jf-z-sticky:  200;
    --jf-z-fixed:   300;
    --jf-z-modal:   1000;
    --jf-z-tooltip: 1200;

    /* ====== MOTION ====== */
    --jf-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --jf-ease-out:     cubic-bezier(0, 0, 0.2, 1);     
    --jf-ease-bounce:  cubic-bezier(0.2, 0.8, 0.2, 1);
    --jf-ease:         var(--jf-ease-bounce);
    --jf-dur-1: 150ms;
    --jf-dur-2: 250ms;
    --jf-dur-3: 400ms;
    --jf-dur-4: 600ms;                                 
    --jf-transition-base:   transform var(--jf-dur-2) var(--jf-ease),
                            box-shadow var(--jf-dur-2) var(--jf-ease),
                            border-color var(--jf-dur-2) var(--jf-ease);
    --jf-transition-colors: background var(--jf-dur-2) var(--jf-ease),
                            color var(--jf-dur-2) var(--jf-ease),
                            border-color var(--jf-dur-2) var(--jf-ease);
  }

  /* ====== SCOPE DEFAULTS ====== */
  :where(.jf-scope) {
    font-family:            var(--jf-font-body);
   
    color:                  var(--jf-text);
    font-size:              var(--jf-text-xl);
    line-height:            var(--jf-lh-normal);
    text-rendering:         optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ====== TYPOGRAPHY DEFAULTS ====== */
  :where(.jf-scope) :where(h1, h2, h3, h4, h5, h6) {
    color:          var(--jf-text);
    text-wrap:      balance;
    }
  :where(.jf-scope) h1 { font-size: var(--jf-fs-hero); }
  :where(.jf-scope) h2 { font-size: var(--jf-fs-h2); }
  :where(.jf-scope) h3 { font-size: var(--jf-fs-h3); }
  :where(.jf-scope) h4 { font-size: var(--jf-text-l); }
  :where(.jf-scope) h5 { font-size: var(--jf-text-m); }
  :where(.jf-scope) h6 { font-size: var(--jf-text-s); }

  :where(.jf-scope) :where(p, li) {
    font-size:   var(--jf-text-xl);
    line-height: var(--jf-lh-normal);  
    text-wrap:   pretty;
    margin:      0;
    color:       var(--jf-text);
  }
  :where(.jf-scope) strong,
  :where(.jf-scope) b {
    font-weight: var(--jf-weight-semibold);
  }
}

/* ========================================================================== */
/* LAYOUT                                                                      */
/* ========================================================================== */

@layer jf-layout {
  /* ====== SECTION ====== */
  .jf-section          { padding-block: var(--jf-space-xl); }
  .jf-section--hero    { padding-block: var(--jf-space-2xl); }
  .jf-section--compact { padding-block: var(--jf-space-l); }

  /* ====== CONTAINER ====== */
  body .jf-container {
    width: min(100% - (2 * var(--jf-container-pad)), var(--jf-max));
    margin-inline: auto;
  }
  .jf-container--s    { --jf-max: var(--jf-max-s); }
  .jf-container--m    { --jf-max: var(--jf-max-m); }
  .jf-container--l    { --jf-max: var(--jf-max-l); }
  .jf-container--xl   { --jf-max: var(--jf-max-xl); }
  .jf-container--full { --jf-max: 100%; --jf-container-pad: 0; }

  /* ====== CONTAINER QUERIES ====== */
  @supports (container-type: inline-size) {
    .jf-grid,
    .jf-stack,
    .jf-cluster {
      container-type: inline-size;
      container-name: jf;
    }
  }

  /* ====== STACK ====== */
  .jf-stack      { display: grid; gap: var(--jf-space-s); }
  .jf-stack--3xs { gap: var(--jf-space-3xs); }
  .jf-stack--2xs { gap: var(--jf-space-2xs); }
  .jf-stack--xs  { gap: var(--jf-space-xs); }
  .jf-stack--s   { gap: var(--jf-space-s); }
  .jf-stack--m   { gap: var(--jf-space-m); }
  .jf-stack--l   { gap: var(--jf-space-l); }
  .jf-stack--xl  { gap: var(--jf-space-xl); }

  /* ====== CLUSTER ====== */
  .jf-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jf-space-xs);
    align-items: center;
  }
  .jf-cluster--xs      { gap: var(--jf-space-xs); }
  .jf-cluster--s       { gap: var(--jf-space-s); }
  .jf-cluster--m       { gap: var(--jf-space-m); }
  .jf-cluster--start   { justify-content: flex-start; }
  .jf-cluster--center  { justify-content: center; }
  .jf-cluster--end     { justify-content: flex-end; }
  .jf-cluster--between { justify-content: space-between; }

  /* ====== GRID ====== */
  .jf-grid     { display: grid; gap: var(--jf-space-m); }
  .jf-grid--s  { gap: var(--jf-space-s); }
  .jf-grid--m  { gap: var(--jf-space-m); }
  .jf-grid--l  { gap: var(--jf-space-l); }
  .jf-grid--xl { gap: var(--jf-space-xl); }

  .jf-grid-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jf-grid-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jf-grid-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jf-grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

  @container jf (max-width: 768px) {
    .jf-grid-2,
    .jf-grid-3,
    .jf-grid-4 { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .jf-grid-2,
    .jf-grid-3,
    .jf-grid-4 { grid-template-columns: 1fr; }
  }

  /* ====== FLEX ====== */
  .jf-flex          { display: flex; gap: var(--jf-space-s); }
  .jf-flex--row     { flex-direction: row; }
  .jf-flex--col     { flex-direction: column; }
  .jf-flex--wrap    { flex-wrap: wrap; }
  .jf-flex--center  { justify-content: center; }
  .jf-flex--between { justify-content: space-between; }
  .jf-flex--items-center { align-items: center; }
  .jf-flex--items-end    { align-items: flex-end; }
}

/* ========================================================================== */
/* COMPONENTS                                                                  */
/* ========================================================================== */

@layer jf-components {
  /* ====== HIGHLIGHT CHIP ====== */
  .jf-highlight {
    display:     inline-block;
    padding:     0.05em 0.35em;
    line-height: inherit;
    white-space: nowrap;
	  border-radius:5px;
  }

  .jf-highlight--yellow { background: var(--jf-color-yellow); color: var(--jf-color-black); }
  .jf-highlight--amber  { background: var(--jf-color-amber);  color: var(--jf-color-black); }
  .jf-highlight--blue   { background: var(--jf-color-blue);   color: var(--jf-color-black); }
  .jf-highlight--green  { background: var(--jf-color-green);  color: var(--jf-color-black); }
  .jf-highlight--purple { background: var(--jf-color-purple); color: var(--jf-color-black); }
  .jf-highlight--pink   { background: var(--jf-color-pink);   color: var(--jf-color-black); }
  .jf-highlight--coral  { background: var(--jf-color-pink);   color: var(--jf-color-black); }
  .jf-highlight--teal   { background: #156B6B;                color: var(--jf-color-white); }
  .jf-highlight--navy   { background: var(--jf-color-dark);   color: var(--jf-color-white); } 

  /* ====== DISPLAY / HIGHLIGHT HEADINGS ====== */
  :where(.jf-scope) :where(
    .jf-display-heading,
    .jf-highlight-heading,
    .jf-hero__title,
    .jf-niveles-title,
    .brxe-heading:has(.jf-highlight)
  ) {
    --jf-heading-display-size: var(--jf-text-3xl);
    --jf-heading-display-leading: 0.98;
    --jf-heading-display-gap-x: 0.22em;
    --jf-heading-display-gap-y: 0.14em;
    --jf-heading-mark-pad-x: 0.28em;
    --jf-heading-mark-pad-y: 0.03em;
    --jf-heading-mark-rotate: -1.6deg;
    font-family: var(--jf-font-heading);
    font-size: var(--jf-heading-display-size);
    font-weight: var(--jf-weight-bold);
    line-height: var(--jf-heading-display-leading);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  :where(.jf-scope) .jf-hero__title,
  :where(.jf-scope) .jf-display-heading--hero {
    --jf-heading-display-size: var(--jf-text-4xl);
  }

  :where(.jf-scope) .jf-display-heading--section,
  :where(.jf-scope) .jf-niveles-title {
    --jf-heading-display-size: var(--jf-text-3xl);
  }

  :where(.jf-scope) :where(
    .jf-display-heading,
    .jf-highlight-heading,
    .jf-hero__title,
    .jf-niveles-title,
    .brxe-heading:has(.jf-highlight)
  ) > span {
    display: inline-block;
    margin-inline: calc(var(--jf-heading-display-gap-x) / 2);
    margin-block: calc(var(--jf-heading-display-gap-y) / 2);
    vertical-align: baseline;
  }

  :where(.jf-scope) :where(
    .jf-display-heading,
    .jf-highlight-heading,
    .jf-hero__title,
    .jf-niveles-title,
    .brxe-heading:has(.jf-highlight)
  ) .jf-highlight,
  :where(.jf-scope) .jf-highlight-heading__mark {
    display: inline-block;
    padding: var(--jf-heading-mark-pad-y) var(--jf-heading-mark-pad-x);
    line-height: 1;
    white-space: nowrap;
    transform: rotate(var(--jf-heading-mark-rotate));
    transform-origin: 50% 50%;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  :where(.jf-scope) :where(.jf-hero__title, .jf-niveles-title, .brxe-heading:has(.jf-highlight)) .jf-highlight--blue,
  :where(.jf-scope) .jf-hh-bg-blue {
    --jf-heading-mark-rotate: -3deg;
  }

  :where(.jf-scope) :where(.jf-hero__title, .jf-niveles-title, .brxe-heading:has(.jf-highlight)) .jf-highlight--purple,
  :where(.jf-scope) .jf-hh-bg-purple {
    --jf-heading-mark-rotate: 2.4deg;
  }

  :where(.jf-scope) :where(.jf-hero__title, .jf-niveles-title, .brxe-heading:has(.jf-highlight)) .jf-highlight--amber,
  :where(.jf-scope) .jf-hh-bg-amber {
    --jf-heading-mark-rotate: -1.6deg;
  }

  :where(.jf-scope) :where(.jf-hero__title, .jf-niveles-title, .brxe-heading:has(.jf-highlight)) .jf-highlight--green,
  :where(.jf-scope) .jf-hh-bg-green {
    --jf-heading-mark-rotate: -2.6deg;
  }

  :where(.jf-scope) :where(.jf-hero__title, .jf-niveles-title, .brxe-heading:has(.jf-highlight)) .jf-highlight--pink,
  :where(.jf-scope) .jf-hh-bg-pink {
    --jf-heading-mark-rotate: 2deg;
  }

  :where(.jf-scope) .jf-hh-rot-n4 { --jf-heading-mark-rotate: -4deg; }
  :where(.jf-scope) .jf-hh-rot-n2 { --jf-heading-mark-rotate: -2deg; }
  :where(.jf-scope) .jf-hh-rot-0  { --jf-heading-mark-rotate: 0deg; }
  :where(.jf-scope) .jf-hh-rot-2  { --jf-heading-mark-rotate: 2deg; }
  :where(.jf-scope) .jf-hh-rot-4  { --jf-heading-mark-rotate: 4deg; }

  @media (max-width: 767px) {
    :where(.jf-scope) :where(.jf-hero__title, .jf-display-heading--hero) {
      --jf-heading-display-size: var(--jf-text-3xl);
    }

    :where(.jf-scope) :where(.jf-display-heading, .jf-highlight-heading, .jf-niveles-title) {
      --jf-heading-display-size: var(--jf-text-2xl);
      --jf-heading-display-leading: 1.04;
      --jf-heading-display-gap-x: 0.12em;
      --jf-heading-display-gap-y: 0.08em;
      --jf-heading-mark-pad-x: 0.22em;
    }
  }

  /* ====== WAVE ====== */
  .jf-wave {
    --jf-wave-height: 18rem;
    --jf-wave-height-mobile: 11rem;
    --jf-wave-cover-height: 55%;
    --jf-wave-fill: var(--jf-color-white);
    --jf-wave-offset-y: -1px;
    --jf-wave-scale-x: 1;
    --jf-wave-shadow: 0 -1rem 2.6rem rgb(0 0 0 / 0.06);
    position: absolute;
    left: 50%;
    bottom: var(--jf-wave-offset-y);
    z-index: var(--jf-wave-z, 5);
    width: 100%;
    width: 100dvw !important;
    height: var(--jf-wave-height) !important;
    transform: translateX(-50%) scaleX(var(--jf-wave-scale-x));
    pointer-events: none;
    overflow: visible;
    background: transparent;
  }

  .jf-wave::before {
    content: none;
  }

  .jf-wave::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    z-index: 2;
    width: 100%;
    width: 100dvw;
    height: var(--jf-wave-cover-height);
    transform: translateX(-50%);
    background: var(--jf-wave-fill);
    pointer-events: none;
  }

  .jf-wave > svg,
  .jf-wave__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--jf-wave-fill);
    filter: drop-shadow(var(--jf-wave-shadow));
  }

  .jf-wave__svg :where(path, rect, circle, ellipse, polygon) {
    fill: var(--jf-wave-fill);
  }

  @media (max-width: 767px) {
    .jf-wave {
      height: var(--jf-wave-height-mobile) !important;
    }
  }

  /* ====== BUTTON ====== */
  .jf-btn {
    --_bg: var(--jf-primary);
    --_fg: var(--jf-text-on-primary);
    --_bd: color-mix(in oklab, var(--jf-primary) 70%, black);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--jf-btn-gap);
    height:          var(--jf-btn-height);
    padding:         var(--jf-btn-padding);
    border-radius:   var(--jf-btn-radius);
    border:          var(--jf-btn-border-width) solid var(--_bd);
    background:      var(--_bg);
    color:           var(--_fg);
    font-family:     var(--jf-font-body);
    font-weight:     var(--jf-weight-semibold);
    letter-spacing:  0.01em;
    white-space:     nowrap;
    box-shadow:      var(--jf-shadow-s);
    cursor:          pointer;
    user-select:     none;
    transition:      var(--jf-transition-base);
  }
  .jf-btn:hover    { transform: translateY(-1px); box-shadow: var(--jf-shadow-m); filter: brightness(1.05); }
  .jf-btn:active   { transform: translateY(0px) scale(0.98); }
  .jf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .jf-btn--outline-blue {
    --_bg: transparent;
    --_fg: var(--jf-color-blue-btn);
    --_bd: var(--jf-color-blue-btn);
    border-width: var(--jf-btn-border-width);
  }
  .jf-btn--purple-pill {
    --_bg: var(--jf-btn-purple-bg);
    --_fg: var(--jf-color-white);
    --_bd: transparent;
    height:        var(--jf-btn-purple-height);
    padding:       var(--jf-btn-purple-padding);
    border-radius: var(--jf-radius-pill);
  }
  .jf-btn--sm   { height: auto; padding: 0.5em 0.9em; font-size: var(--jf-text-s); }
  .jf-btn--lg   { height: auto; padding: 1em 1.5em;   font-size: var(--jf-text-l); }
  .jf-btn--full { width: 100%; }

  /* ====== LINK ====== */
  .jf-link {
    color:                     var(--jf-primary);
    text-decoration:           underline;
    text-decoration-thickness: 2px;
    text-underline-offset:     0.2em;
    transition:                opacity var(--jf-dur-1) var(--jf-ease);
  }
  .jf-link:hover { opacity: 0.8; }

  /* ====== NAV FOOTER / LEGAL ====== */
  .jf-nav-footer {
    color:       var(--jf-color-black);
    font-family: var(--jf-font-nav);
    font-size:   var(--jf-fs-nav);
    font-weight: var(--jf-weight-semibold);
    line-height: var(--jf-lh-normal);
  }
  .jf-nav-legal {
    color:                 var(--jf-color-black);
    font-family:           var(--jf-font-nav);
    font-size:             var(--jf-fs-sm);
    font-weight:           var(--jf-weight-light);
    line-height:           var(--jf-lh-normal);
    text-decoration:       underline;
    text-underline-offset: auto;
  }
}

/* ========================================================================== */
/* UTILITIES                                                                   */
/* ========================================================================== */

@layer jf-utilities {
  /* ====== SPLITTER ====== */
  .jf-splitter-text-xl-in { display: inline-block; }
  .jf-splitter-text-xl    { display: block; }

  /* ====== SPACING ====== */
  .jf-u-gap-xs { gap: var(--jf-space-xs); }
  .jf-u-gap-s  { gap: var(--jf-space-s); }
  .jf-u-gap-m  { gap: var(--jf-space-m); }
  .jf-u-gap-l  { gap: var(--jf-space-l); }
  .jf-u-gap-xl { gap: var(--jf-space-xl); }

  .jf-u-p-s  { padding: var(--jf-space-s); }
  .jf-u-p-m  { padding: var(--jf-space-m); }
  .jf-u-p-l  { padding: var(--jf-space-l); }
  .jf-u-py-s { padding-block: var(--jf-space-s); }
  .jf-u-py-m { padding-block: var(--jf-space-m); }
  .jf-u-py-l { padding-block: var(--jf-space-l); }
  .jf-u-py-xl{ padding-block: var(--jf-space-xl); }
  .jf-u-px-s { padding-inline: var(--jf-space-s); }
  .jf-u-px-m { padding-inline: var(--jf-space-m); }
  .jf-u-px-l { padding-inline: var(--jf-space-l); }

  .jf-u-mt-s { margin-top: var(--jf-space-s); }
  .jf-u-mt-m { margin-top: var(--jf-space-m); }
  .jf-u-mt-l { margin-top: var(--jf-space-l); }
  .jf-u-mb-s { margin-bottom: var(--jf-space-s); }
  .jf-u-mb-m { margin-bottom: var(--jf-space-m); }
  .jf-u-mb-l { margin-bottom: var(--jf-space-l); }
  .jf-u-mx-auto { margin-inline: auto; }

  /* ====== TYPOGRAPHY ====== */
  .jf-u-text-s   { font-size: var(--jf-text-s); }
  .jf-u-text-m   { font-size: var(--jf-text-m); }
  .jf-u-text-l   { font-size: var(--jf-text-l); }
  .jf-u-text-xl  { font-size: var(--jf-text-xl); }
  .jf-u-text-2xl { font-size: var(--jf-text-2xl); }
  .jf-u-text-3xl { font-size: var(--jf-text-3xl); }

  .jf-u-text-left   { text-align: left; }
  .jf-u-text-center { text-align: center; }
  .jf-u-text-right  { text-align: right; }

  .jf-u-font-medium   { font-weight: var(--jf-weight-medium); }
  .jf-u-font-semibold { font-weight: var(--jf-weight-semibold); }
  .jf-u-font-bold     { font-weight: var(--jf-weight-bold); }
  .jf-u-font-black    { font-weight: var(--jf-weight-black); }
  .jf-u-font-heading  { font-family: var(--jf-font-heading); }

  .jf-u-uppercase { text-transform: uppercase; }
  .jf-u-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ====== COLORS ====== */
  .jf-u-text-primary { color: var(--jf-primary); }
  .jf-u-text-muted   { color: var(--jf-text-muted); }
  .jf-u-text-subtle  { color: var(--jf-text-subtle); }
  .jf-u-bg-surface   { background: var(--jf-surface); }
  .jf-u-bg-surface-2 { background: var(--jf-surface-2); }

  /* FIX: apuntan a --jf-color-* correctos */
  .jf-bg-black  { background-color: var(--jf-color-black); }
  .jf-bg-dark   { background-color: var(--jf-color-dark); }
  .jf-bg-white  { background-color: var(--jf-color-white); }
  .jf-bg-yellow { background-color: var(--jf-color-yellow); }
  .jf-bg-green  { background-color: var(--jf-color-green); }
  .jf-bg-blue   { background-color: var(--jf-color-blue); }
  .jf-bg-pink   { background-color: var(--jf-color-pink); }
  .jf-bg-amber  { background-color: var(--jf-color-amber); }
  .jf-bg-purple { background-color: var(--jf-color-purple); }

  .jf-color-black  { color: var(--jf-color-black); }
  .jf-color-dark   { color: var(--jf-color-dark); }
  .jf-color-white  { color: var(--jf-color-white); }
  .jf-color-yellow { color: var(--jf-color-yellow); }
  .jf-color-green  { color: var(--jf-color-green); }
  .jf-color-blue   { color: var(--jf-color-blue); }
  .jf-color-pink   { color: var(--jf-color-pink); }
  .jf-color-amber  { color: var(--jf-color-amber); }
  .jf-color-purple { color: var(--jf-color-purple); }

  /* ====== LAYOUT ====== */
  .jf-u-block       { display: block; }
  .jf-u-flex        { display: flex; }
  .jf-u-inline-flex { display: inline-flex; }
  .jf-u-grid        { display: grid; }
  .jf-u-hidden      { display: none !important; }

  .jf-u-flex-col        { flex-direction: column; }
  .jf-u-flex-wrap       { flex-wrap: wrap; }
  .jf-u-items-center    { align-items: center; }
  .jf-u-items-end       { align-items: flex-end; }
  .jf-u-justify-center  { justify-content: center; }
  .jf-u-justify-between { justify-content: space-between; }
  .jf-u-flex-1          { flex: 1; }
  .jf-u-flex-none       { flex: none; }

  /* ====== SIZING ====== */
  .jf-u-w-full   { width: 100%; }
  .jf-u-w-fit    { width: fit-content; }
  .jf-u-h-full   { height: 100%; }
  .jf-u-max-w-m  { max-width: var(--jf-max-m); }
  .jf-u-max-w-l  { max-width: var(--jf-max-l); }
  .jf-u-max-w-xl { max-width: var(--jf-max-xl); }

  /* ====== POSITION ====== */
  .jf-u-relative { position: relative; }
  .jf-u-absolute { position: absolute; }
  .jf-u-sticky   { position: sticky; }
  .jf-u-inset-0  { inset: 0; }
  .jf-u-top-0    { top: 0; }
  .jf-u-bottom-0 { bottom: 0; }

  /* ====== Z-INDEX ====== */
  .jf-u-z-base    { z-index: var(--jf-z-base); }
  .jf-u-z-sticky  { z-index: var(--jf-z-sticky); }
  .jf-u-z-fixed   { z-index: var(--jf-z-fixed); }

  /* ====== OVERFLOW ====== */
  .jf-u-overflow-hidden  { overflow: hidden; }
  .jf-u-overflow-visible { overflow: visible; }

  /* ====== MISC ====== */
  .jf-u-cursor-pointer      { cursor: pointer; }
  .jf-u-pointer-events-none { pointer-events: none; }
  .jf-u-select-none         { user-select: none; }
  .jf-u-object-contain      { object-fit: contain; }
  .jf-u-object-cover        { object-fit: cover; }

  /* ====== SHADOWS ====== */
  .jf-u-shadow-s { box-shadow: var(--jf-shadow-s); }
  .jf-u-shadow-m { box-shadow: var(--jf-shadow-m); }
  .jf-u-shadow-l { box-shadow: var(--jf-shadow-l); }

  /* ====== ROUNDED ====== */
  .jf-u-rounded-s    { border-radius: var(--jf-radius-s); }
  .jf-u-rounded-m    { border-radius: var(--jf-radius-m); }
  .jf-u-rounded-l    { border-radius: var(--jf-radius-l); }
  .jf-u-rounded-full { border-radius: var(--jf-radius-full); }

  /* ====== RESPONSIVE ====== */
  @media (max-width: 768px) {
    .jf-u-hidden-mobile  { display: none !important; }
    .jf-splitter-text-xl    { display: none; }
    .jf-splitter-text-xl-in { display: none; }
  }
  @media (min-width: 769px) {
    .jf-u-hidden-desktop { display: none !important; }
  }

  /* ====== SCREEN READER ====== */
  .jf-u-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* ====== ANIMATIONS ====== */
  @keyframes jf-skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @keyframes jf-fade-in    { from { opacity: 0; }                             to { opacity: 1; } }
  @keyframes jf-fade-up    { from { opacity: 0; transform: translateY(20px); }  to { opacity: 1; transform: translateY(0); } }
  @keyframes jf-fade-down  { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes jf-fade-left  { from { opacity: 0; transform: translateX(20px); }  to { opacity: 1; transform: translateX(0); } }
  @keyframes jf-fade-right { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes jf-scale-up   { from { opacity: 0; transform: scale(0.9); }      to { opacity: 1; transform: scale(1); } }
  @keyframes jf-slide-up   { from { transform: translateY(100%); }            to { transform: translateY(0); } }
  @keyframes jf-rotate      { from { transform: rotate(0deg); }               to { transform: rotate(360deg); } }
  @keyframes jf-pulse       { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @keyframes jf-bounce      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes jf-glow-pulse  { 0% { --jf-glow: 0; } 100% { --jf-glow: 1; } }
  @keyframes jf-zoom-in {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50%  { opacity: 1; }
    to   { opacity: 1; transform: scale3d(1, 1, 1); }
  }
	@keyframes jf-zoom-in-span {
    0% {
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
}

60% {
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
}
  }

  .jf-anim-fade-in    { animation: jf-fade-in    var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-fade-up    { animation: jf-fade-up    var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-fade-down  { animation: jf-fade-down  var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-fade-left  { animation: jf-fade-left  var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-fade-right { animation: jf-fade-right var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-scale-up   { animation: jf-scale-up   var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-slide-up   { animation: jf-slide-up   var(--jf-dur-3) var(--jf-ease) both; }
  .jf-anim-zoom-in    { animation: jf-zoom-in    var(--jf-dur-4) var(--jf-ease-out) both; } /* FIX: usa tokens ahora definidos */
  .jf-anim-rotate     { animation: jf-rotate 2s linear infinite; }
  .jf-anim-pulse      { animation: jf-pulse  2s ease-in-out infinite; }
  .jf-anim-bounce     { animation: jf-bounce 1s ease-in-out infinite; }
  .jf-anim-glow {
    animation: jf-glow-pulse 1.5s var(--jf-ease) infinite alternate;
    box-shadow:
      0 0 calc(12px + (20px * var(--jf-glow))) color-mix(in oklab, var(--jf-primary) 30%, transparent),
      var(--jf-shadow-m);
  }

  .jf-anim-delay-1 { animation-delay: 100ms; }
  .jf-anim-delay-2 { animation-delay: 200ms; }
  .jf-anim-delay-3 { animation-delay: 300ms; }
  .jf-anim-delay-4 { animation-delay: 400ms; }
  .jf-anim-delay-5 { animation-delay: 500ms; }
  .jf-anim-delay-6 { animation-delay: 700ms; }
  .jf-anim-delay-7 { animation-delay: 900ms; }
}

/* ========================================================================== */
/* OVERRIDES — componentes del sitio                                           */
/* ========================================================================== */

@layer jf-overrides {
  /* Agregar aquí las nuevas clases BEM por sección a medida que se crean */

}

/* ========================================================================== */
/* PRINT                                                                       */
/* ========================================================================== */

@media print {
  .jf-btn { box-shadow: none; border: 1px solid black; }
  .jf-u-hidden-print { display: none !important; }
}