/*
 * Instabooster — home area: 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"] (add :where(:has(.ibm-<template>)) for page-specific rules), like live.css.
 */
@layer ib {
  /* Live home scrolls with the browser's standard scrollbar (15 px on Windows; html has
     scrollbar-gutter: stable). The storefront's global `* { scrollbar-width: thin }` made it
     10 px, shifting every centred block by 2.5 px. */
  html[data-brand="ib"]:where(:has(.ibl-home)),
  html[data-brand="ib"]:where(:has(.ibl-home)) body {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  /* ── Cookie consent (every IB page): assets/css/consent.css, verbatim, for the IB consent view
     (src/components/brands/ib/overlays/consent.tsx). live.css only has the banner rules the
     crawl saw and skips them on landings; this is the full sheet (panel included). ── */
  html[data-brand="ib"] #ib-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    padding: 0 20px 20px;
    pointer-events: none;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  }
  html[data-brand="ib"] #ib-consent-banner.ib-cb-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  html[data-brand="ib"] #ib-consent-banner.ib-cb-hide {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease-in, opacity 0.25s ease;
  }
  html[data-brand="ib"] .ib-cb-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    border-radius: 18px;
    background: rgba(15, 10, 25, 0.92);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  html[data-brand="ib"] .ib-cb-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
  }
  html[data-brand="ib"] .ib-cb-icon {
    flex-shrink: 0;
    color: #ff4d94;
    margin-top: 2px;
  }
  html[data-brand="ib"] .ib-cb-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
  }
  html[data-brand="ib"] .ib-cb-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  html[data-brand="ib"] .ib-cb-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: all 0.25s ease;
  }
  html[data-brand="ib"] .ib-cb-btn-accept {
    background: linear-gradient(135deg, #e61c72, #ff4d94);
    color: #fff;
    box-shadow: 0 4px 16px rgba(230, 28, 114, 0.3);
  }
  html[data-brand="ib"] .ib-cb-btn-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(230, 28, 114, 0.45);
  }
  html[data-brand="ib"] .ib-cb-btn-reject {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  html[data-brand="ib"] .ib-cb-btn-reject:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  html[data-brand="ib"] .ib-cb-btn-settings {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 14px;
  }
  html[data-brand="ib"] .ib-cb-btn-settings:hover {
    color: #ff4d94;
  }
  html[data-brand="ib"] #ib-consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
    padding: 20px;
  }
  html[data-brand="ib"] #ib-consent-overlay.ib-co-show {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
  }
  html[data-brand="ib"] #ib-consent-overlay.ib-co-hide {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    pointer-events: none;
  }
  html[data-brand="ib"] .ib-cp-modal {
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: rgba(18, 12, 30, 0.95);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transform: translateY(30px) scale(0.96);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
  html[data-brand="ib"] .ib-co-show .ib-cp-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  html[data-brand="ib"] .ib-co-hide .ib-cp-modal {
    transform: translateY(20px) scale(0.97);
    opacity: 0;
  }
  html[data-brand="ib"] .ib-cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  html[data-brand="ib"] .ib-cp-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
  }
  html[data-brand="ib"] .ib-cp-close {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s;
  }
  html[data-brand="ib"] .ib-cp-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  html[data-brand="ib"] .ib-cp-body {
    padding: 20px 28px;
    overflow-y: auto;
    flex: 1;
  }
  html[data-brand="ib"] .ib-cp-intro {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 20px;
  }
  html[data-brand="ib"] .ib-cp-category {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  html[data-brand="ib"] .ib-cp-category:last-of-type {
    border-bottom: none;
  }
  html[data-brand="ib"] .ib-cp-cat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  html[data-brand="ib"] .ib-cp-cat-info {
    flex: 1;
  }
  html[data-brand="ib"] .ib-cp-cat-info h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }
  html[data-brand="ib"] .ib-cp-cat-info p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
  }
  html[data-brand="ib"] .ib-cp-toggle {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
  }
  html[data-brand="ib"] .ib-cp-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  html[data-brand="ib"] .ib-cp-slider {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
  }
  html[data-brand="ib"] .ib-cp-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    top: 3px;
    left: 3px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
  }
  html[data-brand="ib"] .ib-cp-toggle input:checked + .ib-cp-slider {
    background: linear-gradient(135deg, #e61c72, #ff4d94);
  }
  html[data-brand="ib"] .ib-cp-toggle input:checked + .ib-cp-slider::after {
    transform: translateX(20px);
    background: #fff;
  }
  html[data-brand="ib"] .ib-cp-toggle-locked .ib-cp-slider {
    opacity: 0.5;
    cursor: not-allowed;
  }
  html[data-brand="ib"] .ib-cp-required {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
  }
  html[data-brand="ib"] .ib-cp-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  html[data-brand="ib"] .ib-cp-service {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  html[data-brand="ib"] .ib-cp-legal {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  html[data-brand="ib"] .ib-cp-legal p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.3);
  }
  html[data-brand="ib"] .ib-cp-legal a {
    color: #ff4d94;
    text-decoration: none;
  }
  html[data-brand="ib"] .ib-cp-legal a:hover {
    text-decoration: underline;
  }
  html[data-brand="ib"] .ib-cp-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 28px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  @media (max-width: 640px) {
    html[data-brand="ib"] .ib-cb-inner {
      flex-direction: column;
      align-items: stretch;
      padding: 16px 18px;
      border-radius: 16px;
    }
    html[data-brand="ib"] .ib-cb-actions {
      justify-content: stretch;
    }
    html[data-brand="ib"] .ib-cb-btn {
      flex: 1;
      text-align: center;
      padding: 12px 12px;
    }
    html[data-brand="ib"] .ib-cb-btn-settings {
      display: none;
    }
    html[data-brand="ib"] .ib-cp-modal {
      max-height: 92vh;
      border-radius: 20px;
    }
    html[data-brand="ib"] .ib-cp-header,
    html[data-brand="ib"] .ib-cp-body,
    html[data-brand="ib"] .ib-cp-footer {
      padding-left: 20px;
      padding-right: 20px;
    }
    html[data-brand="ib"] .ib-cp-footer {
      flex-direction: column;
    }
    html[data-brand="ib"] .ib-cp-footer .ib-cb-btn {
      width: 100%;
      text-align: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-brand="ib"] #ib-consent-banner,
    html[data-brand="ib"] .ib-cp-modal,
    html[data-brand="ib"] #ib-consent-overlay,
    html[data-brand="ib"] .ib-cp-slider::after {
      transition-duration: 0.01ms !important;
    }
  }

  /* The banner is server-rendered already "shown": slide it in like live's double-rAF
     transition. Returning visitors (inline script flags html[data-consent-stored]) never see it. */
  html[data-brand="ib"] #ib-consent-banner.ib-cb-show {
    animation: ib-cb-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html[data-brand="ib"][data-consent-stored] #ib-consent-banner {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-brand="ib"] #ib-consent-banner.ib-cb-show {
      animation: none;
    }
  }

  /* ── «Compras recientes» toast (shared src/features/onsite/fomo-toast.tsx, off unless the store
     enables it) in the look of live assets/js/fomo-widget.min.js: white card, #f4e3ec hairline,
     radius 16, pink-tinted shadow, Source Sans Pro; desktop bottom corner 20 px, mobile TOP under
     the navbar. Content stays the platform's (package + time, never a buyer name: owner rule). ── */
  html[data-brand="ib"] [data-testid="fomo-toast"] {
    z-index: 9990;
    bottom: 20px;
    width: auto;
    max-width: 340px;
    min-width: 270px;
    gap: 12px;
    padding: 13px 34px 13px 14px;
    background: #fff;
    border: 1px solid #f4e3ec;
    border-radius: 16px;
    box-shadow:
      0 12px 34px -12px rgba(198, 24, 98, 0.28),
      0 3px 10px rgba(20, 16, 45, 0.05);
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif;
    color: #1a202c;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    transition:
      opacity 0.4s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html[data-brand="ib"] [data-testid="fomo-toast"][class~="left-4"] {
    left: 20px;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"][class~="right-4"] {
    right: 20px;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"][data-visible="0"] {
    transform: translateY(22px) scale(0.98);
  }
  html[data-brand="ib"] [data-testid="fomo-toast"][data-visible="1"] {
    transform: translateY(0) scale(1);
  }
  /* network logo tile + green «verified» badge */
  html[data-brand="ib"] [data-testid="fomo-toast"] > span:first-child {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f1d9e5;
    box-shadow: 0 2px 6px rgba(198, 24, 98, 0.12);
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > span:first-child::after {
    content: "✓";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #fff;
    font: 700 9px/13px Arial, sans-serif;
    text-align: center;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(1) {
    font-size: 13.5px;
    line-height: 1.4;
    color: #2d3748;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(2) {
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 700;
    color: #e61c72;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #a0aec0;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(3)::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
    animation: ib-fomo-pulse 2s ease-in-out infinite;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > button {
    top: 8px;
    right: 9px;
    width: 22px;
    height: 22px;
    background: transparent;
    color: #cbd5e0;
  }
  html[data-brand="ib"] [data-testid="fomo-toast"] > button:hover {
    background: #fdf2f7;
    color: #e61c72;
  }
  @media (max-width: 767px) {
    html[data-brand="ib"] [data-testid="fomo-toast"] {
      top: calc(env(safe-area-inset-top, 0px) + 72px);
      bottom: auto;
      max-width: calc(100vw - 24px);
      min-width: 0;
      padding: 11px 32px 11px 12px;
      gap: 10px;
    }
    html[data-brand="ib"] [data-testid="fomo-toast"][class~="left-4"] {
      left: 12px;
    }
    html[data-brand="ib"] [data-testid="fomo-toast"][class~="right-4"] {
      right: 12px;
    }
    html[data-brand="ib"] [data-testid="fomo-toast"][data-visible="0"] {
      transform: translateY(-14px) scale(0.98);
    }
    html[data-brand="ib"] [data-testid="fomo-toast"] > span:first-child {
      width: 38px;
      height: 38px;
      border-radius: 11px;
    }
    html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(-n + 2) {
      font-size: 12.5px;
    }
    html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(3) {
      font-size: 10.5px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-brand="ib"] [data-testid="fomo-toast"],
    html[data-brand="ib"] [data-testid="fomo-toast"][data-visible] {
      transform: none;
      transition: opacity 0.2s ease;
    }
    html[data-brand="ib"] [data-testid="fomo-toast"] > span:nth-child(2) > span:nth-child(3)::before {
      animation: none;
    }
  }
  @media print {
    html[data-brand="ib"] [data-testid="fomo-toast"] {
      display: none;
    }
  }
}

/* homepage.css `@keyframes float` (hero blobs): live.css references it as ib-float but the
   generator kept only an unrelated -webkit-keyframes "float" of another sheet. Keyframes are
   global (not layered); the ib- prefix keeps them away from mf/sk. */
@keyframes ib-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, -40px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

@keyframes ib-cb-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes ib-fomo-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.05);
  }
}

/* ───────────── HOME HERO: small / short screens (owner request 2026-10-30) ─────────────
   Live parity yields below 1440×900: the hero follows the header container + gutters
   (24 px phones, 32 px from 768 px) at EVERY width (live put the copy 24 px from the edge while
   the logo sits in the 1190 px header box), type scales with width AND height (the live sizes are
   reached only at ≥ ~1400 px wide and ~880 px tall), and on 992–1440 wide screens down to
   ~600 px tall rating + H1 + subline + CTAs + stats fit above the fold (smaller rocket,
   tighter gaps). At 1440×900 every value computes to the live one. CSS only. */
@layer ib {
  html[data-brand="ib"]:where(:has(.ibl-home)) {
    --ib-hero-gutter: 24px;
  }
  @media (min-width: 768px) {
    html[data-brand="ib"]:where(:has(.ibl-home)) {
      --ib-hero-gutter: 32px;
    }
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-modern {
    padding: calc(80px + clamp(12px, 2.2vh, 20px)) 0 clamp(24px, 6.6vh, 60px);
  }
  /* same content box as the header's .container (logo x = (vw − 1190)/2 at ≥ 1200 px) */
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-container {
    box-sizing: border-box;
    width: var(--ib-box); /* chrome.css: the header's content width */
    max-width: none;
    padding: 0;
    gap: clamp(32px, 4.2vw, 60px);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-content-modern {
    min-width: 0;
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-rating-pill {
    margin-bottom: clamp(12px, 2.67vh, 24px);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-title-modern {
    font-size: clamp(2rem, min(0.6rem + 4.4vw, 8.2vh), 4.5rem);
    margin-bottom: clamp(12px, 3.1vh, 28px);
    overflow-wrap: break-word;
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-subtitle-modern {
    font-size: clamp(1rem, min(0.75rem + 0.9vw, 2.45vh), 1.375rem);
    margin-bottom: clamp(16px, 4vh, 36px);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-cta-group {
    margin-bottom: clamp(20px, 5.33vh, 48px);
  }
  html[data-brand="ib"]:where(:has(.ibl-home))
    :is(.btn-primary-modern, .btn-secondary-modern) {
    padding: clamp(12px, 2vh, 18px) clamp(22px, 4vh, 36px);
    font-size: clamp(0.9375rem, 1.9vh, 1.0625rem);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini {
    gap: clamp(20px, 4.4vh, 40px);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-value {
    font-size: clamp(1.35rem, min(1rem + 1.4vw, 4vh), 2.25rem);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-label {
    font-size: clamp(0.8125rem, min(0.6rem + 0.6vw, 2vh), 1.125rem);
    white-space: nowrap;
  }
  /* rocket: never taller than the space under the header, never over the text column */
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-visual {
    min-width: 0;
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .phone-mockup.hero-rocket {
    max-width: min(680px, 100%);
  }
  html[data-brand="ib"]:where(:has(.ibl-home)) .phone-mockup.hero-rocket .mockup-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 150px);
    margin-left: auto;
  }
  /* phones / small tablets (live: one column below 1201 px, stacked CTAs ≤ 768 px) */
  @media (max-width: 768px) {
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-modern {
      padding: 112px 0 40px;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-title-modern {
      font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem);
      line-height: 1.15;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-subtitle-modern {
      font-size: clamp(1rem, 0.9rem + 0.6vw, 1.1875rem);
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-cta-group {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    html[data-brand="ib"]:where(:has(.ibl-home))
      :is(.btn-primary-modern, .btn-secondary-modern) {
      width: 100%;
      justify-content: center;
      padding: 15px 24px;
      font-size: 1rem;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 8px;
      justify-content: stretch;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-mini {
      text-align: center;
      min-width: 0;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-value {
      font-size: clamp(1.15rem, 0.8rem + 1.6vw, 1.35rem);
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-label {
      font-size: clamp(0.66rem, 0.55rem + 0.5vw, 0.75rem);
      white-space: nowrap;
    }
  }
}

/* H1: the gradient word is inline-block live, which let the comma after it start a line
   («seguidores / , likes») once the copy wraps. Inline keeps «seguidores,» together. */
@layer ib {
  html[data-brand="ib"]:where(:has(.ibl-home)) .hero-title-modern .gradient-text {
    display: inline;
  }
  @media (max-width: 768px) {
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini {
      gap: 10px;
    }
  }
}
@layer ib {
  @media (max-width: 768px) {
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-value {
      font-size: clamp(1rem, 0.6rem + 1.8vw, 1.35rem);
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-stats-mini .stat-divider {
      display: block;
      width: 1px;
      height: 28px;
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

/* Large screens (owner 2026-11-01: tiny rocket, cramped text): wider text column, bigger rocket. */
@layer ib {
  @media (min-width: 1400px) and (min-height: 700px) {
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-container {
      display: grid !important;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
      align-items: center;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-content-modern {
      max-width: none !important;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-title-modern {
      font-size: clamp(3.5rem, 3.6vw, 4.75rem);
      max-width: none;
      text-wrap: balance;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .hero-subtitle-modern {
      max-width: 34em;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .phone-mockup.hero-rocket {
      max-width: 100%;
    }
    html[data-brand="ib"]:where(:has(.ibl-home)) .phone-mockup.hero-rocket .mockup-image {
      width: 100%;
      max-height: min(calc(100vh - 140px), 720px);
      object-fit: contain;
    }
  }
}

/* WCAG AA text contrast (Lighthouse color-contrast): live.css grey under 4.5:1 on white. */
@layer ib {
  html[data-brand="ib"]:where(:has(.ibl-home)) .hsv__top-label { color: #6b7280; }
}

/* LCP (owner 2026-11-04): the hero title and subtitle are the page's largest text, and an element
   that starts at opacity 0 is not counted as painted, so the header logo became the LCP and the
   score followed the JS load. Same rise (translateY 35px → 0, 0.8 s, same delays) at the end
   opacity of the live fade (1, also for the 0.96 subtitle), no fade. */
@layer ib {
  @keyframes ib-hero-rise {
    0% { opacity: 1; transform: translateY(35px); }
    100% { opacity: 1; transform: translateY(0px); }
  }
  html[data-brand="ib"] .hero-modern .hero-title-modern,
  html[data-brand="ib"] .hero-modern .hero-subtitle-modern {
    animation-name: ib-hero-rise;
  }
}