/* =============================================================================
   FBM-FIXES.CSS  —  Site-wide corrective stylesheet
   Loaded LAST on every page so its rules win the cascade.

   Fixes:
   1. "Bold annotation" bug — accented letters (á é í ó ú ñ ¿) rendered in a
      mismatched / faux-bold style. Root cause: the Felidae web font only ships
      basic-Latin glyphs, several @font-face blocks named the family with a full
      CSS stack (invalid), and duplicate 500/700 weights forced the browser to
      synthesise bold. We re-register Felidae correctly at a single weight and
      disable font synthesis everywhere the brand font is used.
   2. Stops the per-glyph fallback (Cormorant Garamond) from looking heavier than
      Felidae by pinning it to weight 400 and turning off synthetic bold.
   ============================================================================= */

/* ---- 1. Correct, single-token Felidae face (overrides the broken ones) ---- */
@font-face {
    font-family: 'Felidae';
    src: url('https://static.tildacdn.net/tild3835-6433-4762-a662-316636633466/Felidae.woff') format('woff');
    font-weight: 400;          /* the woff has ONE master — never advertise a range */
    font-style: normal;
    font-display: swap;
}

/* ---- 2. Kill faux-bold / faux-italic on every element that uses the brand
         serif stack. font-synthesis:none means: if a real bold master is
         missing, DON'T fake it — just render the regular glyph. This is what
         removes the "bold accented characters" artifact site-wide. ---- */
[class*="t-name"],
.t-btn, .t-descr,
.t450__list_item, .t450__right_descr, .t450__right_langs_lang a,
.t1118__title,
.tagline-section,
.design-changing-font,
.doctor-card h3,
.t396 .tn-atom,
[style*="Felidae"] {
    font-synthesis: none !important;
    -webkit-font-synthesis: none !important;
}

/* ---- 3. The gradient section titles (e.g. "(Testimonios)") were set to
         font-weight:700. Felidae has no 700 master, so that triggered synthetic
         bold + Cormorant fallback for accents. Render them at the real weight. */
#rec885266728 .tn-elem[data-elem-id="1741326031577"] .tn-atom,
#rec885309841 .tn-elem[data-elem-id="1741326031577"] .tn-atom,
#rec885370534 .tn-elem[data-elem-id="1741326031577"] .tn-atom,
#rec886248664 .tn-elem[data-elem-id="1741326031577"] .tn-atom,
#rec896468749 .tn-elem[data-elem-id="1741326031577"] .tn-atom {
    font-weight: 400 !important;
    font-synthesis: none !important;
    -webkit-font-synthesis: none !important;
}

/* ---- 4. FAQ accordion titles: ensure regular weight + matching fallback ---- */
#rec885553288 .t1118__title,
.t1118__title.t-name {
    font-weight: 400 !important;
    font-synthesis: none !important;
    -webkit-font-synthesis: none !important;
}

/* ---- 5. Repair the broken `.design-changing-font{font-family:30px}` rule.
         It was meant to set a font SIZE, not family. Keep the brand serif and a
         sane size; never let it inherit the invalid value. ---- */
.design-changing-font {
    font-family: 'Felidae', 'Cormorant Garamond', Georgia, serif !important;
}

/* ---- 6. Make Cormorant Garamond (the accent fallback) sit at the same visual
         weight as Felidae regular, so mixed words read uniformly. ---- */
:root {
    --fbm-serif: 'Felidae', 'Cormorant Garamond', Georgia, serif;
}

/* ============================================================================
   7. "Liquid BBL" treatment-filter button (new) — sits next to "Packs"
   The empty `myButton6` slot (data-elem-id "1741329777777") is now used for
   Liquid BBL. The autogenerated Tilda CSS placed the two slots so they
   visually overlapped on desktop; the rules below re-center the pair as a
   symmetric group at every breakpoint and ensure the new <a class="tn-atom">
   inside myButton6 inherits the exact same pill style as the other filter
   buttons (border, radius, hover gradient swap).
   ============================================================================= */

/* --- Pill style for the Liquid BBL anchor (matches sibling buttons) --- */
#rec886366039 .tn-elem[data-elem-id="1741329777777"] a.tn-atom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #000;
    font-size: 16px;
    font-family: TildaSans, Arial, sans-serif;
    line-height: 1.55;
    font-weight: 500;
    text-transform: lowercase;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid #bb9d41;
    background-color: transparent;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
@media (hover: hover) {
    #rec886366039 .tn-elem[data-elem-id="1741329777777"] a.tn-atom:hover {
        background-color: #eedc81;
        background-image: none;
        color: #000;
    }
}

/* --- Desktop (>= 1200px): center the Liquid BBL + Packs pair --- */
#rec886366039 .tn-elem[data-elem-id="1741329777777"] {
    top: 85px !important;
    left: calc(50% - 160px) !important;
    width: 150px !important;
    height: 50px !important;
}
#rec886366039 .tn-elem[data-elem-id="1741329666666"] {
    top: 85px !important;
    left: calc(50% + 10px) !important;
    width: 150px !important;
    height: 50px !important;
}
#rec886366039 .t396__artboard,
#rec886366039 .t396__carrier,
#rec886366039 .t396__filter {
    min-height: 160px;
}

/* --- Tablet (<= 1199px) --- */
@media screen and (max-width: 1199px) {
    #rec886366039 .tn-elem[data-elem-id="1741329777777"] {
        top: 150px !important;
        left: calc(50% - 155px) !important;
        width: 140px !important;
        height: 50px !important;
    }
    #rec886366039 .tn-elem[data-elem-id="1741329666666"] {
        top: 150px !important;
        left: calc(50% + 15px) !important;
        width: 140px !important;
        height: 50px !important;
    }
    #rec886366039 .t396__artboard,
    #rec886366039 .t396__carrier,
    #rec886366039 .t396__filter {
        min-height: 230px !important;
    }
}

/* --- Large mobile (<= 959px) --- */
@media screen and (max-width: 959px) {
    #rec886366039 .tn-elem[data-elem-id="1741329777777"] {
        top: 160px !important;
        left: calc(50% - 155px) !important;
        width: 140px !important;
        height: 50px !important;
    }
    #rec886366039 .tn-elem[data-elem-id="1741329666666"] {
        top: 160px !important;
        left: calc(50% + 15px) !important;
        width: 140px !important;
        height: 50px !important;
    }
    #rec886366039 .t396__artboard,
    #rec886366039 .t396__carrier,
    #rec886366039 .t396__filter {
        min-height: 240px !important;
    }
}

/* --- Small mobile (<= 640px) ---
   The row of 5 filter buttons wraps into a 2-column grid, leaving "Piel y
   colágeno" alone in row 3 with the right slot empty (originally Packs sat
   there). Slot Liquid BBL into that empty right slot so it fills the gap,
   and give Packs its own centered row below. This avoids cramming both new
   buttons onto a single tight row where they'd get clipped. --- */
@media screen and (max-width: 640px) {
    /* Liquid BBL fills the empty row-3 right slot, next to "Piel y colágeno" */
    #rec886366039 .tn-elem[data-elem-id="1741329777777"] {
        top: 104px !important;
        left: calc(50% + 10px) !important;
        width: 130px !important;
        height: 35px !important;
    }
    /* Packs centered alone on its own row below */
    #rec886366039 .tn-elem[data-elem-id="1741329666666"] {
        top: 148px !important;
        left: calc(50% - 55px) !important;
        width: 110px !important;
        height: 35px !important;
    }
    #rec886366039 .tn-elem[data-elem-id="1741329777777"] a.tn-atom {
        font-size: 12px;
    }
    /*#rec886366039 .t396__artboard,*/
    /*#rec886366039 .t396__carrier,*/
    /*#rec886366039 .t396__filter {*/
    /*    height: 210px !important;*/
    /*    min-height: 210px !important;*/
    /*}*/
}

/* --- Very small (<= 375px): tighten widths so both fit comfortably and
       Liquid BBL doesn't get cut off at the right edge of the viewport --- */
@media screen and (max-width: 375px) {
    #rec886366039 .tn-elem[data-elem-id="1741329777777"] {
        left: calc(50% + 8px) !important;
        width: 115px !important;
    }
    #rec886366039 .tn-elem[data-elem-id="1741329666666"] {
        left: calc(50% - 50px) !important;
        width: 100px !important;
    }
    #rec886366039 .t396__artboard,
    #rec886366039 .t396__carrier,
    #rec886366039 .t396__filter {
        height: 210px !important;
        min-height: 210px !important;
    }
}


/* ============================================================================
   8. "Precisión médica …" headline — fix missing Ó / É glyphs
   The Felidae web font ships only basic-Latin glyphs. When the CSS rule
   `text-transform: uppercase` is applied, lowercase "ó" / "é" / etc. ask
   for uppercase Á É Í Ó Ú Ñ, which Felidae cannot supply — and because the
   font defines (empty) glyphs for these codepoints, the browser does not
   fall through to the next font in the stack and the characters render
   blank (see screenshot from the user: "PRECISI N MÉDICA").

   Fix: use Cormorant Garamond — already part of the existing fallback stack
   — as the primary serif for this specific headline. It carries the full
   set of accented capitals so all glyphs render correctly, and its visual
   weight is close enough to Felidae that the page identity is preserved.
   ============================================================================= */
#rec885657181 .tn-elem[data-elem-id="1741326011775"] .tn-atom {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-synthesis: none !important;
    -webkit-font-synthesis: none !important;
}