/*
 * Instabooster — chrome area (body, header, breadcrumb strip, footer): hand-written additions/
 * fixes on top of live.css (generated, do not edit). Plain CSS served as is (no build step).
 * Keep every rule inside @layer ib and scoped to html[data-brand="ib"], like live.css.
 */
@layer ib {
  /* The store layout's <body> carries Tailwind utilities (flex column, min-h-dvh, bg/text
     tokens) that out-rank layer "ib"; live <body> is a plain block (margins between the last
     section and the footer collapse like on the PHP site). */
  html[data-brand="ib"] body {
    display: block !important;
    min-height: 0 !important;
    background-color: #fff !important;
    color: #212121 !important;
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) body {
    background-color: #f5f7fb !important;
    color: #495057 !important;
  }
  /* Live Bootstrap class names that are ALSO Tailwind utilities (generated because the word
     appears somewhere in the app sources): neutralise what Bootstrap does not set itself.
     Re-check with scratchpad ib-build/tools/collisions.cjs after big changes. */
  html[data-brand="ib"] .collapse {
    visibility: inherit;
  }
  /* <main id="contenido"> (layout) is not in the live DOM: neutral block, no focus outline. */
  html[data-brand="ib"] main#contenido {
    display: block;
  }

  /* ───────────── BREADCRUMBS (owner redesign 2026-10-30; markup: chrome/breadcrumbs.tsx) ─────────────
     Slim inline trail, no band/pills/shadows. Desktop: the <section> keeps its live job of spacer
     under the fixed 80 px header; on a pink hero the trail overlays the hero top (white 75 %,
     current crumb solid white), elsewhere it sits in its own 44 px row (grey-500 links, ink
     current crumb). Phones: one line, middle crumbs collapse to "…". */
  html[data-brand="ib"] section.header-top.ib-crumbs {
    display: block !important;
    position: relative;
    z-index: 3;
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
    height: 42.25px;
    --crumb: #6b7280;
    --crumb-hover: #e61c72;
    --crumb-current: #14181f;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs > .container {
    height: 100%;
    display: flex;
    align-items: center;
  }
  /* same 24px gutter as the mobile header and the heroes */
  @media (max-width: 767.98px) {
    html[data-brand="ib"] section.header-top.ib-crumbs > .container {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }
  html[data-brand="ib"] section.header-top.ib-crumbs nav {
    min-width: 0;
    width: 100%;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--crumb);
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li {
    display: flex !important;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li:first-child,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li:last-child {
    flex-shrink: 0;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li:last-child {
    flex-shrink: 1;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li + li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 10px 0 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li span {
    display: inline-block !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 0 1px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--crumb) !important;
    text-decoration: none !important;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat !important;
    transition: color 0.2s ease, background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a::before,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a::after,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li span::before,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li span::after {
    content: none !important;
    display: none !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a:hover,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a:focus-visible {
    color: var(--crumb-hover) !important;
    background-size: 100% 1px !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li.active a,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li.active span {
    color: var(--crumb-current) !important;
    font-weight: 600 !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu .fe-home {
    font-size: 13px;
    margin-right: 3px;
    vertical-align: -1px;
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a {
      transition: none !important;
    }
  }
  /* Pink heroes (.ib-hero, /servicios, contact thanks) right under the trail: overlay their top. */
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    ) {
    height: 0;
    --crumb: rgba(255, 255, 255, 0.75);
    --crumb-hover: #fff;
    --crumb-current: #fff;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    > .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: 20px;
  }
  @media (min-width: 992px) {
    /* the live strip was also the spacer under the fixed 80 px header */
    html[data-brand="ib"] section.header-top.ib-crumbs {
      margin-top: 80px;
    }
    html[data-brand="ib"]
      section.header-top.ib-crumbs:is(
        :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
        :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
        :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
      )
      > .container {
      top: 12px;
    }
  }
  /* Pink hero under the trail: give its top 14/26 px more room (a transparent top border
     extends the hero's own gradient, no seam). */
  html[data-brand="ib"]
    section.header-top.ib-crumbs
    + :is(.ib-hero, .services-hero, .contact-hero),
  html[data-brand="ib"]
    section.header-top.ib-crumbs
    + *
    > :is(.ib-hero, .services-hero, .contact-hero):first-child,
  html[data-brand="ib"]
    section.header-top.ib-crumbs
    + *
    > *
    > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero) {
    /* = the live strip's 42.25 px below the header: content below stays where live has it */
    border-top: 42.25px solid transparent !important;
  }
  @media (max-width: 991.98px) {
    /* phones/tablets: the content offset under the fixed 79 px header starts higher */
    html[data-brand="ib"] section.header-top.ib-crumbs {
      margin-top: 18px;
    }
    html[data-brand="ib"]
      section.header-top.ib-crumbs
      + :is(.ib-hero, .services-hero, .contact-hero),
    html[data-brand="ib"]
      section.header-top.ib-crumbs
      + *
      > :is(.ib-hero, .services-hero, .contact-hero):first-child,
    html[data-brand="ib"]
      section.header-top.ib-crumbs
      + *
      > *
      > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero) {
      /* phones: the trail fits in the hero's own top padding (no shift vs live) */
      border-top-width: 0 !important;
    }
    /* pink hero: the trail overlays the hero, which already starts under the header */
    html[data-brand="ib"]
      section.header-top.ib-crumbs:is(
        :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
        :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
        :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
      ) {
      margin-top: 0;
    }
    html[data-brand="ib"]
      section.header-top.ib-crumbs:is(
        :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
        :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
        :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
      )
      > .container {
      top: 18px;
    }
  }
  @media (max-width: 767.98px) {
    html[data-brand="ib"] section.header-top.ib-crumbs {
      height: 30px;
    }
    /* one middle "…" only */
    html[data-brand="ib"]
      section.header-top.ib-crumbs
      .mini-menu
      li:not(:first-child):not(:last-child)
      ~ li:not(:last-child) {
      display: none !important;
    }
    /* middle crumbs → "…" (their text stays in the HTML) */
    html[data-brand="ib"]
      section.header-top.ib-crumbs
      .mini-menu
      li:not(:first-child):not(:last-child)
      :is(a, span) {
      font-size: 0 !important;
      width: auto;
    }
    html[data-brand="ib"]
      section.header-top.ib-crumbs
      .mini-menu
      li:not(:first-child):not(:last-child)
      :is(a, span)::after {
      content: "…" !important;
      display: inline !important;
      font-size: 13px;
    }
  }
}

/* ───────────── FOOTER: small screens (owner request 2026-10-30) ─────────────
   Same content box and gutters as the header and the home hero at every width
   (24 px phones, 32 px from 768 px, 1190 px max), fluid type (logo and column titles no
   longer oversized on small laptops), 4 columns from 1024 px, 2×2 from 768 px, and on phones
   a full-width brand block plus a two-column link grid instead of one long column.
   Links, text and order unchanged. Live rules are !important, hence the !important here. */
/* Live's footer sheet declares its rules in a sub-layer (ib.instabooster-footer); for
   !important declarations a sub-layer beats its parent, so the overrides live in the same one. */
@layer ib.instabooster-footer {
  html[data-brand="ib"] body footer.instabooster-premium-footer {
    --ib-ft-gutter: 24px;
    padding: clamp(2.5rem, 5vw, 5rem) 0 2rem !important;
  }
  @media (min-width: 768px) {
    html[data-brand="ib"] body footer.instabooster-premium-footer {
      --ib-ft-gutter: 32px;
    }
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-container,
  html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-bottom {
    box-sizing: border-box !important;
    width: var(--ib-box) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-container {
    grid-template-columns: 1.15fr 1fr 1fr 1fr !important;
    gap: clamp(1.5rem, 2.6vw, 2.5rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer img.footer-logo {
    width: clamp(150px, 8vw + 90px, 220px) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-brand {
    gap: clamp(1.25rem, 2vw, 2rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer h3.footer-title {
    font-size: clamp(1rem, 0.75rem + 0.55vw, 1.25rem) !important;
    margin-bottom: clamp(1rem, 1.6vw, 1.5rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-hours h3.footer-title {
    font-size: clamp(0.9rem, 0.8rem + 0.2vw, 1rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer p.footer-tagline {
    font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer ul.footer-links {
    gap: clamp(0.7rem, 1.1vw, 1rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer ul.footer-links a:where(.ibr *),
  html[data-brand="ib"] body footer.instabooster-premium-footer ul.footer-hours__list li:where(.ibr *) {
    font-size: clamp(0.875rem, 0.8rem + 0.15vw, 0.95rem) !important;
  }
  html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-bottom {
    margin-top: clamp(2.5rem, 4.5vw, 4rem) !important;
  }
  /* 768–1023: 2 × 2 */
  @media (max-width: 1023.98px) {
    html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-container {
      grid-template-columns: 1fr 1fr !important;
      gap: 2.5rem 2rem !important;
    }
  }
  /* phones: brand on its own row, then a two-column link grid */
  @media (max-width: 767.98px) {
    html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-container {
      grid-template-columns: 1fr 1fr !important;
      gap: 2rem 1.25rem !important;
    }
    html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-brand,
    html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-section:nth-of-type(2) {
      grid-column: 1 / -1 !important;
    }
    html[data-brand="ib"] body footer.instabooster-premium-footer div.footer-section:nth-of-type(2) ul.footer-links {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 0.75rem 1.25rem !important;
    }
    html[data-brand="ib"] body footer.instabooster-premium-footer ul.footer-links a:where(.ibr *) {
      font-size: 0.875rem !important;
      line-height: 1.35 !important;
    }
    html[data-brand="ib"] body footer.instabooster-premium-footer a.ib-footer-packs-link {
      flex-wrap: wrap !important;
      gap: 6px !important;
    }
    html[data-brand="ib"] body footer.instabooster-premium-footer a.ib-footer-packs-link b.ib-footer-packs-badge {
      margin-left: 0 !important;
    }
  }
}

/* ───────────── PINK HEROES (.ib-hero: hubs, packs, blog, tools, legal, contact, faq…) ─────────────
   Owner request 2026-10-30: the hero copy uses the header's content box and gutters at every
   width (24 px phones, 32 px from 768 px, 1176 px max = the inner header .container), and the
   title scales with width AND height, reaching the live size only on large screens. */
@layer ib {
  /* --ib-box = the header's content width (Bootstrap .container minus its 15 px paddings, IB
     max 1206): hero/footer copy starts where the logo starts. Never closer than 24 px to the
     edge on phones. */
  html[data-brand="ib"] {
    --ib-box: calc(100% - 48px);
  }
  @media (min-width: 576px) {
    html[data-brand="ib"] {
      --ib-box: min(100% - 48px, 510px);
    }
  }
  @media (min-width: 768px) {
    html[data-brand="ib"] {
      --ib-box: min(100% - 64px, 690px);
    }
  }
  @media (min-width: 992px) {
    html[data-brand="ib"] {
      --ib-box: min(100% - 64px, 930px);
    }
  }
  @media (min-width: 1200px) {
    html[data-brand="ib"] {
      --ib-box: min(100% - 64px, 1176px);
    }
  }
  /* large screens (owner 2026-11-01): header, heroes and footer use more of the width */
  @media (min-width: 1500px) {
    html[data-brand="ib"] {
      --ib-box: min(100% - 128px, 1360px);
    }
  }
  html[data-brand="ib"] .ib-hero .ib-hero__inner {
    box-sizing: border-box;
    width: var(--ib-box);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  html[data-brand="ib"] .ib-hero .ib-hero__title {
    font-size: clamp(2rem, min(0.9rem + 3.3vw, 7.6vh), 3.6rem);
  }
  html[data-brand="ib"] .ib-hero.ib-hero--packs .ib-hero__title {
    font-size: clamp(2rem, min(0.8rem + 2.6vw, 6.4vh), 3rem);
  }
  html[data-brand="ib"] .est26 .ib-hero .ib-hero__title,
  html[data-brand="ib"] .ib-hero.est26 .ib-hero__title {
    font-size: clamp(2rem, min(0.8rem + 2.7vw, 6.6vh), 3.1rem);
  }
  html[data-brand="ib"] .ib-hero .ib-hero__lead {
    font-size: clamp(1rem, min(0.8rem + 0.6vw, 2.3vh), 1.2rem);
  }
}

/* ───────────── COMPACT INNER HEROES (owner decision 2026-11-05, mockup "A · Compacto") ─────────────
   Every .ib-hero (hubs, packs, pack, legal, contact, about, tools, estudio, prensa, afiliados,
   free likes, faq, blog): from 992 px a 44 px trail band, 36/44 px hero padding, 18 px eyebrow →
   title and 16 px title → lead, copy and card centred; scaled down below. The card is a fixed
   320 px that never shrinks and never wraps inside a line (value nowrap; the value row wraps its
   small text below as a whole; notes break only at their "·" fragments, .ib-nw); its checklist
   (.ib-hero__facts) is a white row under the lead instead, also on phones where the card is
   hidden. `.ib-hero.ib-hero` outranks the live per-page variants (--pack, --compact, --ec…). */
@layer ib {
  html[data-brand="ib"] .ib-nw {
    white-space: nowrap;
  }
  /* spacing — phones: the trail sits inside the hero's top padding (44 px band + 16 px air, so an
     eyebrow with a network logo never touches the trail) */
  html[data-brand="ib"] .ib-hero.ib-hero:not(.ib-hero--network) {
    padding-top: 60px;
  }
  html[data-brand="ib"] .ib-hero.ib-hero {
    padding-bottom: 36px;
  }
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__eyebrow {
    margin-bottom: 14px;
  }
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__title {
    margin-bottom: 16px;
  }
  @media (min-width: 640px) {
    html[data-brand="ib"] .ib-hero.ib-hero {
      padding-bottom: 40px;
    }
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__eyebrow {
      margin-bottom: 16px;
    }
  }
  @media (min-width: 992px) {
    html[data-brand="ib"] .ib-hero.ib-hero,
    html[data-brand="ib"] .ib-hero.ib-hero:not(.ib-hero--network) {
      padding-top: 36px;
      padding-bottom: 44px;
    }
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__eyebrow {
      margin-bottom: 18px;
    }
    /* the trail band over the hero top: 44 px (was the live strip's 42.25 px) */
    html[data-brand="ib"] section.header-top.ib-crumbs + .ib-hero,
    html[data-brand="ib"] section.header-top.ib-crumbs + * > .ib-hero:first-child,
    html[data-brand="ib"] section.header-top.ib-crumbs + * > * > .ib-hero:first-child:not(.tl-hero) {
      border-top-width: 44px !important;
    }
  }
  /* layout. The checklist is the last child of .ib-hero__inner (after the card, where the
     live page has it inside the card: same text order for SEO parity) and is placed under the
     lead: below 1024 px the column flow does it (the hidden card takes no gap), from 1024 px a
     grid keeps copy + checklist as one block, centred on the card. */
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner {
    row-gap: 0;
  }
  @media (min-width: 1024px) {
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 48px;
      align-content: center;
    }
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__main {
      grid-column: 1;
      grid-row: 1;
      align-self: end;
    }
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner > .ib-hero__facts {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
    }
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__aside {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      padding-bottom: 0;
    }
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__card {
      flex: 0 0 auto;
      width: 320px;
      min-width: 320px;
      max-width: none;
    }
  }
  /* card: no wrapping inside a line */
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__card-value {
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
  }
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__card-value strong,
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__card-value small:not(:has(> .ib-nw)) {
    white-space: nowrap;
    word-break: normal;
  }
  /* notes: no lone last word (and dates stay whole, .ib-nw) */
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__card-note {
    text-wrap: pretty;
  }
  /* contact: the address is the value and must fit the 320 px card on one line */
  html[data-brand="ib"] .ibm-contact .ib-hero.ib-hero .ib-hero__card-value--text strong {
    font-size: 1.25rem;
  }
  /* a small text that breaks at its "·" fragments keeps readable line spacing */
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__card-value small:has(> .ib-nw) {
    line-height: 1.25;
  }
  /* the checklist: a white row under the lead */
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner > .ib-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
  }
  @media (min-width: 992px) {
    html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner > .ib-hero__facts {
      margin-top: 20px;
    }
  }
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner > .ib-hero__facts li {
    gap: 8px;
  }
  html[data-brand="ib"] .ib-hero.ib-hero .ib-hero__inner > .ib-hero__facts .ib-hero__check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: #fff;
    color: #e61c72;
    box-shadow: none;
  }
}

/* ───────────── MOBILE HEADER (owner request 2026-10-30) ─────────────
   Same 24 px gutter as the hero/footer, and the burger as a plain icon button like the
   search / cart icons (38 px, no border, ink colour, pink focus ring) on home and inner pages. */
@layer ib {
  @media (max-width: 991.98px) {
    html[data-brand="ib"] #headerNav > .container {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
    html[data-brand="ib"] #headerNav .navbar-toggler.ib-mobile-toggler {
      display: inline-grid !important;
      place-items: center;
      width: 38px !important;
      height: 38px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #374151 !important;
      cursor: pointer;
      transition: color 0.3s, background-color 0.3s;
      -webkit-tap-highlight-color: transparent;
    }
    html[data-brand="ib"] #headerNav .navbar-toggler.ib-mobile-toggler:hover {
      color: #c2185b !important;
      background: rgba(233, 30, 99, 0.06) !important;
    }
    html[data-brand="ib"] #headerNav .ib-mobile-toggler .ib-hamburger {
      display: flex !important;
      flex-direction: column;
      justify-content: space-between;
      width: 20px !important;
      height: 14px !important;
      padding: 0 !important;
      margin: 0 !important;
      background: none !important;
    }
    html[data-brand="ib"] #headerNav .ib-mobile-toggler .ib-line {
      display: block !important;
      width: 20px !important;
      height: 2px !important;
      margin: 0 !important;
      border-radius: 2px !important;
      background: currentColor !important;
    }
  }
  html[data-brand="ib"] #headerNav .navbar-toggler.ib-mobile-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  html[data-brand="ib"] #headerNav .navbar-toggler.ib-mobile-toggler:focus-visible,
  html[data-brand="ib"] #headerNav .ib-hact__btn:focus-visible {
    outline: 2px solid #e61c72 !important;
    outline-offset: 2px !important;
  }

  /* ───────────── ACCOUNT BUTTON (owner request 2026-10-31; markup: chrome/account-button.tsx) ───────────── */
  html[data-brand="ib"] .ib-acc { position: relative; display: inline-flex; align-items: center; }
  html[data-brand="ib"] .ib-acc--pending .ib-acc__ph { display: block; width: 40px; height: 40px; }
  html[data-brand="ib"] .ib-acc__link { display: inline-flex !important; align-items: center; width: auto !important; gap: 8px; padding: 0 10px !important; text-decoration: none !important; font-family: Montserrat, sans-serif; font-size: .9rem; font-weight: 600; white-space: nowrap; }
  html[data-brand="ib"] .ib-acc__avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(230, 28, 114, .35); }
  html[data-brand="ib"] .ib-acc__avatar--initials { background: linear-gradient(135deg, #e61c72, #ff4d94); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
  html[data-brand="ib"] .ib-acc__chev { opacity: .6; transition: transform .2s; }
  html[data-brand="ib"] .ib-acc__me[aria-expanded="true"] .ib-acc__chev { transform: rotate(180deg); }
  html[data-brand="ib"] .ib-acc__scrim { display: none; }
  html[data-brand="ib"] .ib-acc__menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 10020; width: 250px; padding: 8px; border: 1px solid #eef0f3; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(17, 24, 39, .14); font-family: Montserrat, sans-serif; animation: ibAccIn .16s ease-out both; }
  @keyframes ibAccIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  html[data-brand="ib"] .ib-acc__who { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid #f1f2f4; }
  html[data-brand="ib"] .ib-acc__who strong { display: block; max-width: 170px; overflow: hidden; color: #111827; font-size: .9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  html[data-brand="ib"] .ib-acc__who span { color: #6b7280; font-size: .75rem; }
  html[data-brand="ib"] .ib-acc__item { display: flex; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: #374151 !important; font: inherit; font-size: .88rem; font-weight: 600; text-align: left; text-decoration: none !important; cursor: pointer; }
  html[data-brand="ib"] .ib-acc__item:hover, html[data-brand="ib"] .ib-acc__item:focus-visible { background: #fdf2f8; color: #c2185b !important; outline: none; }
  html[data-brand="ib"] .ib-acc__out { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #f1f2f4; }
  html[data-brand="ib"] .ib-acc__out .ib-acc__item { color: #6b7280 !important; }
  /* home over the hero (transparent header): white until scrolled, like the other actions */
  html[data-brand="ib"]:where(:has(.ibl-home)) .ib-header-fixed-mobile:not(.scrolled) .ib-hact .ib-acc__link { color: #fff; }
  @media (max-width: 991.98px) {
    html[data-brand="ib"] .ib-acc__label, html[data-brand="ib"] .ib-acc__chev { display: none; }
    html[data-brand="ib"] .ib-acc__link { justify-content: center; width: 38px !important; height: 38px; padding: 0 !important; }
    html[data-brand="ib"] .ib-acc--pending .ib-acc__ph { width: 38px; height: 38px; }
    html[data-brand="ib"] .ib-acc__avatar { width: 28px; height: 28px; }
    /* phones: the menu is a bottom sheet */
    html[data-brand="ib"] .ib-acc__scrim { display: block; position: fixed; inset: 0; z-index: 2147483000; border: 0; background: rgba(16, 17, 20, .4); }
    html[data-brand="ib"] .ib-acc__menu { position: fixed; z-index: 2147483001; top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; animation: ibAccUp .2s ease-out both; }
    html[data-brand="ib"] .ib-acc__item { padding: 14px 12px; font-size: .95rem; }
  }
  @keyframes ibAccUp { from { transform: translateY(100%); } to { transform: none; } }

  /* ───────────── BALANCED DESKTOP HEADER (owner 2026-10-31): logo · centred nav · actions ───────────── */
  @media (min-width: 992px) {
    html[data-brand="ib"] #headerNav .navbar { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
    html[data-brand="ib"] #headerNav .ib-brand { justify-self: start; }
    html[data-brand="ib"] #headerNav .ib-desktop-nav { justify-self: center; margin: 0 !important; flex-grow: 0 !important; }
    html[data-brand="ib"] #headerNav .ib-nav-menu { margin: 0 !important; }
    html[data-brand="ib"] #headerNav .ib-hact--desk { justify-self: end; display: flex; align-items: center; gap: 4px; }
  }
  @media (max-width: 991.98px) {
    html[data-brand="ib"] #headerNav .ib-hact--desk { display: none !important; }
  }

  /* ───────────── MEGA MENU on short / small screens (owner 2026-10-31: «se corta») ───────────── */
  @media (min-width: 992px) {
    html[data-brand="ib"] #headerNav .ib-mega-dropdown { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    html[data-brand="ib"] #headerNav .ib-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  @media (min-width: 992px) and (max-height: 860px) {
    html[data-brand="ib"] #headerNav .ib-mega-dropdown { padding: 16px 18px !important; }
    html[data-brand="ib"] #headerNav .ib-services-grid { gap: 10px !important; }
    html[data-brand="ib"] #headerNav .ib-platform-card { padding: 10px 12px !important; }
    html[data-brand="ib"] #headerNav .ib-services-list { gap: 0 !important; margin-top: 6px !important; }
    html[data-brand="ib"] #headerNav .ib-service-link { padding: .3rem .5rem !important; font-size: .8rem !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight { margin-top: 10px !important; padding: 12px 14px !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-head p { display: none; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-head h5 { margin-bottom: 8px !important; font-size: .95rem !important; }
    html[data-brand="ib"] #headerNav .ib-mega-footer { margin-top: 10px !important; padding-top: 10px !important; }
    html[data-brand="ib"] #headerNav .ib-mega-footer .ib-footer-text p { display: none; }
  }
  /* narrow laptops: the panel never wider than the window */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    html[data-brand="ib"] #headerNav .ib-mega-dropdown { width: min(900px, calc(100vw - 32px)) !important; }
  }

  /* large screens: header + breadcrumb strip share the widened content box */
  @media (min-width: 1500px) {
    html[data-brand="ib"] #headerNav > .container,
    html[data-brand="ib"] section.header-top.ib-crumbs > .container {
      box-sizing: border-box; width: var(--ib-box) !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;
    }
  }

  /* avatar polish (owner 2026-11-01: «se ve rara»): solid disc, thin ring, readable initials */
  html[data-brand="ib"] .ib-acc__avatar { box-shadow: 0 0 0 1px rgba(17, 24, 39, .08); }
  html[data-brand="ib"] .ib-acc__avatar--initials { background: linear-gradient(135deg, #e61c72, #ff4d94) !important; color: #fff !important; font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800; line-height: 1; letter-spacing: 0; }
  html[data-brand="ib"] .ib-acc__who .ib-acc__avatar { width: 38px; height: 38px; font-size: .82rem; }
  /* home, transparent header over the pink hero: a white disc with pink initials */
  html[data-brand="ib"]:where(:has(.ibl-home)) .ib-header-fixed-mobile:not(.scrolled) .ib-hact .ib-acc__avatar--initials { background: #fff !important; color: #e61c72 !important; box-shadow: none; }
  html[data-brand="ib"]:where(:has(.ibl-home)) .ib-header-fixed-mobile:not(.scrolled) .ib-hact img.ib-acc__avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

  /* ───────────── MEGA MENU (owner 2026-11-04: «efectos raros, poco cuidado») ─────────────
     One calm system: subtle grey panel, flat white cards, no lifts or blue tints from live.css.
     Hover = the card border warms to pink, the row tints and its arrow slides in. */
  @media (min-width: 992px) {
    html[data-brand="ib"] #headerNav .ib-mega-dropdown { padding: 20px !important; background: #f4f5f7 !important; border: 1px solid #e9ebef; border-radius: 20px !important; box-shadow: 0 30px 80px rgba(17, 24, 39, .18), 0 2px 8px rgba(17, 24, 39, .06) !important; }
    html[data-brand="ib"] #headerNav .ib-services-grid { gap: 12px !important; }

    /* cards */
    html[data-brand="ib"] #headerNav .ib-platform-card { padding: 0 !important; overflow: hidden; background: #fff !important; border: 1px solid #e9ebef !important; border-radius: 14px !important; box-shadow: none !important; transform: none !important; transition: border-color .2s ease, box-shadow .2s ease !important; }
    html[data-brand="ib"] #headerNav .ib-platform-card:hover { border-color: #f4c3d8 !important; box-shadow: 0 6px 20px rgba(17, 24, 39, .06) !important; }

    /* card head (network link): neutralise the live hover (blue tint, lift, shadow, outline) */
    html[data-brand="ib"] #headerNav .ib-service-slug,
    html[data-brand="ib"] #headerNav .ib-service-slug:hover,
    html[data-brand="ib"] #headerNav .ib-service-slug:active { display: block; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; transform: none !important; color: inherit; text-decoration: none !important; }
    html[data-brand="ib"] #headerNav .ib-service-slug:focus { outline: none; }
    html[data-brand="ib"] #headerNav .ib-service-slug:focus-visible .ib-platform-header { box-shadow: inset 0 0 0 2px #e61c72; }
    html[data-brand="ib"] #headerNav .ib-platform-header { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 14px 16px 12px !important; border-bottom: 1px solid #f1f2f5 !important; background: #fff !important; }
    html[data-brand="ib"] #headerNav .ib-platform-icon { width: 30px !important; height: 30px !important; padding: 0; border-radius: 8px !important; background: none !important; box-shadow: none !important; }
    html[data-brand="ib"] #headerNav .ib-platform-name { font-size: .95rem !important; font-weight: 700 !important; color: #111827 !important; letter-spacing: -.005em; transition: color .15s; }
    html[data-brand="ib"] #headerNav .ib-service-slug:hover .ib-platform-name { color: #e61c72 !important; }
    html[data-brand="ib"] #headerNav .ib-popular-badge { padding: 3px 8px !important; border-radius: 999px !important; background: #fdeaf3 !important; color: #c2185b !important; font-size: .64rem !important; font-weight: 700 !important; letter-spacing: .02em; line-height: 1.2; }

    /* service rows */
    html[data-brand="ib"] #headerNav .ib-services-list { display: flex; flex-direction: column; gap: 1px !important; margin: 0 !important; padding: 8px !important; }
    html[data-brand="ib"] #headerNav .ib-service-link { position: relative; padding: .45rem .6rem !important; border-radius: 8px !important; background: transparent !important; color: #4b5563 !important; font-size: .82rem !important; font-weight: 500; transition: background-color .15s, color .15s !important; }
    html[data-brand="ib"] #headerNav .ib-service-link:hover,
    html[data-brand="ib"] #headerNav .ib-service-link:focus-visible { background: #fdf1f6 !important; color: #c2185b !important; outline: none; }
    html[data-brand="ib"] #headerNav .ib-service-link .ib-arrow { opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; color: #e61c72; font-style: normal; }
    html[data-brand="ib"] #headerNav .ib-service-link:hover .ib-arrow,
    html[data-brand="ib"] #headerNav .ib-service-link:focus-visible .ib-arrow { opacity: 1; transform: none; }

    /* autopilot block: a white card like the others, pink only in the accents */
    html[data-brand="ib"] #headerNav .ib-mega-highlight { margin-top: 12px !important; padding: 16px 18px !important; background: #fff !important; border: 1px solid #e9ebef !important; border-radius: 14px !important; box-shadow: none !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-head { margin: 0 0 12px !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-head h5 { font-size: 1rem !important; color: #111827 !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-grid { gap: 10px !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-grid > a { padding: 12px 14px !important; background: #f8f9fb !important; border: 1px solid #eef0f3 !important; border-radius: 12px !important; box-shadow: none !important; transform: none !important; transition: border-color .2s, background-color .2s !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-grid > a:hover { background: #fff !important; border-color: #f4c3d8 !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-icon { width: 36px !important; height: 36px !important; box-shadow: none !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight-pill { background: #fdeaf3 !important; color: #c2185b !important; }

    /* footer: part of the grey panel, no separate strip */
    html[data-brand="ib"] #headerNav .ib-mega-footer { margin: 14px 0 0 !important; padding: 14px 2px 0 !important; border-top: 1px solid #e6e8ec !important; background: none !important; }
    html[data-brand="ib"] #headerNav .ib-footer-text h5 { font-size: .95rem !important; color: #111827 !important; }
    html[data-brand="ib"] #headerNav .ib-footer-buttons { display: flex; gap: 8px; }
    html[data-brand="ib"] #headerNav .ib-btn-contact,
    html[data-brand="ib"] #headerNav .ib-btn-all { display: inline-flex; align-items: center; padding: .55rem 1.15rem !important; border-radius: 999px !important; font-size: .82rem !important; font-weight: 600 !important; transition: background-color .15s, border-color .15s, color .15s !important; }
    html[data-brand="ib"] #headerNav .ib-btn-contact { background: #e61c72 !important; color: #fff !important; border: 1px solid #e61c72 !important; }
    html[data-brand="ib"] #headerNav .ib-btn-contact:hover { background: #c2185b !important; border-color: #c2185b !important; }
    html[data-brand="ib"] #headerNav .ib-btn-all { background: #fff !important; border: 1px solid #e2e5ea !important; color: #111827 !important; }
    html[data-brand="ib"] #headerNav .ib-btn-all:hover { border-color: #e61c72 !important; color: #e61c72 !important; }
  }
  @media (min-width: 992px) and (max-height: 860px) {
    html[data-brand="ib"] #headerNav .ib-mega-dropdown { padding: 14px !important; }
    html[data-brand="ib"] #headerNav .ib-platform-card { padding: 0 !important; }
    html[data-brand="ib"] #headerNav .ib-platform-header { padding: 10px 14px 9px !important; }
    html[data-brand="ib"] #headerNav .ib-services-list { padding: 6px !important; }
    html[data-brand="ib"] #headerNav .ib-service-link { padding: .32rem .55rem !important; font-size: .8rem !important; }
    html[data-brand="ib"] #headerNav .ib-mega-highlight { margin-top: 10px !important; padding: 12px 14px !important; }
    html[data-brand="ib"] #headerNav .ib-mega-footer { margin-top: 10px !important; padding-top: 10px !important; }
  }
}

@layer ib {
  /* ───────────── BREADCRUMBS v2 (owner 2026-11-04: «demasiado planos») ─────────────
     The trail becomes a light capsule: white pill, hairline border, soft shadow; home in a small
     pink disc; links get a hover background; the current page is a pink-tinted chip. On the pink
     heroes the same capsule in translucent white. Same 42 px row (nothing below moves). */
  html[data-brand="ib"] section.header-top.ib-crumbs nav {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    padding: 4px;
    border: 1px solid #eceef2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 14px -8px rgba(17, 24, 39, .12);
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li + li::before {
    width: 5px;
    height: 5px;
    margin: 0 4px 0 2px;
    opacity: .4;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li span {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    background: transparent !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a:hover,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a:focus-visible {
    background: #f5f6f8 !important;
    background-size: auto !important;
    outline: none;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li:first-child a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding-left: 4px !important;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu .fe-home {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 50%;
    background: #fdeaf3;
    color: #e61c72;
    font-size: 12px;
    vertical-align: middle;
  }
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li.active a,
  html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li.active span {
    background: #fdeaf3 !important;
    color: #c2185b !important;
    font-weight: 700 !important;
  }
  /* on the pink heroes: the plain white trail of before (owner 2026-11-04: «con fondo se ve raro») */
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    nav {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    .mini-menu
    :is(li a, li span) {
    padding: 0 0 1px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat !important;
    transition: color .2s ease, background-size .25s cubic-bezier(.4, 0, .2, 1) !important;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    .mini-menu
    :is(li a:hover, li a:focus-visible) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat !important;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    .mini-menu
    :is(li.active a, li.active span) {
    background: none !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    .mini-menu li + li::before {
    width: 6px;
    height: 6px;
    margin: 0 10px 0 7px;
    opacity: .55;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    .mini-menu li:first-child a {
    gap: 0;
    padding-left: 0 !important;
  }
  html[data-brand="ib"]
    section.header-top.ib-crumbs:is(
      :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
      :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
      :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
    )
    .fe-home {
    display: inline;
    width: auto;
    height: auto;
    margin-right: 3px;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: 13px;
    vertical-align: -1px;
  }
  @media (max-width: 767.98px) {
    html[data-brand="ib"] section.header-top.ib-crumbs { height: 40px; }
    html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li a,
    html[data-brand="ib"] section.header-top.ib-crumbs .mini-menu li span { padding: 3px 8px !important; }
  }
}

@layer ib {
  /* desktop, white pages: room around the capsule (it touched the header line) */
  @media (min-width: 992px) {
    html[data-brand="ib"] section.header-top.ib-crumbs:not(:has(+ :is(.ib-hero, .services-hero, .contact-hero))):not(:has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child)):not(:has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))) {
      height: 58px;
    }
  }
}

@layer ib {
  /* phones over a pink hero: keep the middle crumbs collapsed to «…» */
  @media (max-width: 767.98px) {
    html[data-brand="ib"]
      section.header-top.ib-crumbs:is(
        :has(+ :is(.ib-hero, .services-hero, .contact-hero)),
        :has(+ * > :is(.ib-hero, .services-hero, .contact-hero):first-child),
        :has(+ * > * > :is(.ib-hero, .services-hero, .contact-hero):first-child:not(.tl-hero))
      )
      .mini-menu
      li:not(:first-child):not(:last-child)
      :is(a, span) {
      font-size: 0 !important;
    }
  }
}