/* B2BOX Pro — Home LIGHT (Stripe-inspired) */
:root {
  --l-bg: #FFFFFF;
  --l-bg-soft: #F6F9FC;
  --l-bg-soft2: #EEF3FB;
  --l-text: #0A2540;
  --l-text-2: #425466;
  --l-text-3: #6B7C93;
  --l-line: rgba(10,37,64,0.08);
  --l-line-2: rgba(10,37,64,0.14);
  --brand: #2F4FFF;
  --brand-deep: #0A1F8F;
  --brand-light: #6F8BFF;
  --brand-soft: rgba(47,79,255,0.08);
  /* B2BOX brand lime — used as a subtle accent on key words and active elements */
  --lime: #abff97;
  --lime-deep: #7ad96a;
  --lime-soft: rgba(171, 255, 151, 0.18);
}

/* Alibaba brand orange — used only when referring to Alibaba by name */
.alibaba-orange { color: #FF6A00; font-weight: 700; }

/* Headline spotlight — when a h2 with .h2-spotlight enters the viewport, it pops in
   with a spring + scale + a soft underline that sweeps under the headline.
   Use sparingly on the most important h2s (Comparativa, China). */
/* h2 spotlight — replayed in loop by initLoopAnimations() (toggling .in-view) */
.h2-spotlight {
  position: relative;
  display: inline-block;
}
.h2-spotlight::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--lime) 50%, var(--brand) 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: grad-pan 8s ease-in-out infinite;
}
.h2-spotlight.in-view {
  animation: h2-spotlight-pop 800ms cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.h2-spotlight.in-view::after {
  animation: h2-spotlight-line 900ms cubic-bezier(.2,.8,.2,1) 400ms forwards,
             grad-pan 8s ease-in-out infinite;
}
@keyframes h2-spotlight-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes h2-spotlight-line {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Animated smiley wink (text emoji) — winks every ~5s as visual punch line */
.emoji-anim {
  display: inline-block;
  position: relative;
  color: var(--brand);
  font-weight: 700;
  margin-left: 4px;
  transform-origin: center;
  animation: ea-bounce 5s ease-in-out infinite;
}
.emoji-anim > span { display: inline-block; }
.emoji-anim .ea-smile {
  animation: ea-smile-blink 5s ease-in-out infinite;
}
.emoji-anim .ea-wink {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ea-wink-blink 5s ease-in-out infinite;
}
@keyframes ea-smile-blink {
  0%, 88%, 100% { opacity: 1; }
  90%, 98% { opacity: 0; }
}
@keyframes ea-wink-blink {
  0%, 88%, 100% { opacity: 0; }
  90%, 98% { opacity: 1; }
}
@keyframes ea-bounce {
  0%, 86%, 100% { transform: scale(1) rotate(0deg); }
  90%           { transform: scale(1.18) rotate(-6deg); }
  94%           { transform: scale(1.05) rotate(0deg); }
}

/* Subtle lime highlight — used on inline keywords, active dots, success markers */
.accent-lime {
  background: linear-gradient(95deg, var(--lime-deep) 0%, var(--lime) 50%, var(--lime-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad-pan 8s ease-in-out infinite;
  font-weight: 700;
}
.dot-lime {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-soft);
  vertical-align: 0.05em;
  margin: 0 4px;
  animation: dot-lime-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-lime-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--lime-soft); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(171, 255, 151, 0.08); transform: scale(1.15); }
}

body.light-home { background: var(--l-bg); color: var(--l-text); }

/* Cross-device consistent emoji rendering — falls back to system color emoji,
   then to plain twemoji-style on platforms that don't have one. */
.emoji,
.country-chip,
.eco-chip .cf,
.country-menu button > span:first-child,
.lhpt-value {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    "Twemoji Mozilla", "EmojiOne Color", "Android Emoji",
    var(--font-body), system-ui, sans-serif;
  font-variant-emoji: emoji;
  font-feature-settings: normal;
}

/* ============== Hero announcement banner — clean rebuild ============== */
.announce {
  position: relative;
  display: inline-block;
  margin-bottom: 28px;
  z-index: 800;
}
.announce-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(47, 79, 255, 0.22);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--l-text-2);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, box-shadow 200ms, transform 200ms;
  white-space: nowrap;
}
.announce-trigger:hover {
  background: #fff;
  border-color: rgba(47, 79, 255, 0.45);
  box-shadow: 0 8px 22px -10px rgba(47, 79, 255, 0.25);
  transform: translateY(-1px);
}
.announce.is-open .announce-trigger {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 12px 28px -10px rgba(47, 79, 255, 0.30);
}
.announce-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(47, 79, 255, 0.15);
  flex-shrink: 0;
}
.announce-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--l-text-2);
}
.announce-text strong { color: var(--l-text); font-weight: 600; }
.announce-and { color: var(--l-text-3); margin: 0 2px; }
.announce-flag {
  width: 16px;
  height: 11px;
  display: inline-block;
  border-radius: 1.5px;
  box-shadow: 0 0 0 0.5px rgba(10, 37, 64, 0.15);
  flex-shrink: 0;
  vertical-align: -2px;
}
.announce-chevron {
  color: var(--brand);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.announce.is-open .announce-chevron { transform: rotate(180deg); }

/* Dropdown panel — sits BELOW trigger, absolute positioned, click outside closes */
.announce-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(47, 79, 255, 0.10);
  border-radius: 16px;
  box-shadow:
    0 30px 80px -24px rgba(10, 37, 64, 0.28),
    0 0 0 1px rgba(47, 79, 255, 0.04);
  padding: 20px 20px 16px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.96);
  transform-origin: top center;
  transition: opacity 240ms cubic-bezier(.2,.8,.2,1),
              transform 280ms cubic-bezier(.34, 1.56, .64, 1);
  z-index: 801;
}
.announce-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(47, 79, 255, 0.10);
  border-top: 1px solid rgba(47, 79, 255, 0.10);
}
.announce.is-open .announce-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.announce-panel-head { margin-bottom: 14px; }
.announce-panel-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-weight: 600;
}
.announce-panel-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--l-text);
  margin: 0;
  line-height: 1.25;
}
.announce-panel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.announce-panel-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.announce-panel-flag {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
.announce-panel-loc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
}
.announce-panel-loc strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--l-text);
  font-weight: 600;
}
.announce-panel-loc span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--l-text-3);
}
.announce-panel-foot {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--l-text-2);
  padding-top: 10px;
  border-top: 1px solid var(--l-line);
  margin: 0;
}

/* Keep legacy classes hidden in case any other pages still reference them */
.announce-wrap, .lh-eyebrow-announce, .ann-expanded, .ann-popover { display: none !important; }

@media (max-width: 720px) {
  .announce-trigger { font-size: 11px; padding: 7px 12px; gap: 8px; }
  .announce-flag { width: 14px; height: 10px; }
}

/* ============== Liquid-glass pill header ============== */
body.light-home .site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}
body.light-home .site-header .container.inner {
  pointer-events: auto;
  position: relative;
  width: calc(100% - 32px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 12px 10px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(10, 37, 64, 0.05);
  box-shadow:
    0 18px 40px -16px rgba(10, 37, 64, 0.14),
    0 6px 16px -10px rgba(10, 37, 64, 0.06);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  transition: background 320ms cubic-bezier(.2,.8,.2,1), border-color 320ms, box-shadow 320ms, transform 320ms;
  isolation: isolate;
}
body.light-home .site-header.scrolled .container.inner {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(10, 37, 64, 0.07);
  box-shadow:
    0 24px 50px -12px rgba(10, 37, 64, 0.18),
    0 8px 20px -10px rgba(10, 37, 64, 0.10);
}
body.light-home .site-header .country-select {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(10, 37, 64, 0.08);
}
body.light-home .site-header .country-select:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(47, 79, 255, 0.25);
}
.country-picker { position: relative; }
@media (max-width: 1024px) {
  body.light-home .site-header .country-select { display: inline-flex; padding: 6px 10px; }
  body.light-home .site-header .country-select .cp-label { display: none; }
  body.light-home .site-header .country-select .cp-caret { display: none; }
}
.country-picker .cp-flag { font-size: 14px; line-height: 1; }
.country-picker .cp-caret { transition: transform 220ms; }
.country-picker[data-open="true"] .cp-caret { transform: rotate(180deg); }
.country-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 14px;
  box-shadow:
    0 24px 48px -16px rgba(10, 37, 64, 0.18),
    0 8px 16px -8px rgba(10, 37, 64, 0.08);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}
.country-menu::-webkit-scrollbar { width: 8px; }
.country-menu::-webkit-scrollbar-thumb { background: rgba(10, 37, 64, 0.15); border-radius: 4px; }
.country-picker[data-open="true"] .country-menu { display: flex; }
.country-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--l-text);
  text-align: left;
  cursor: pointer;
  transition: background 180ms;
}
.country-menu button:hover { background: var(--brand-soft); }
.country-menu button[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 500;
}
.country-menu button em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--l-text-3);
}
.country-menu button[aria-current="true"] em { color: var(--brand); }
.country-menu button > span:first-child { font-size: 16px; line-height: 1; }
body.light-home .site-header .header-cta {
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--brand);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 16px rgba(47, 79, 255, 0.32);
}
body.light-home .site-header .header-cta:hover {
  background: var(--brand-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 24px rgba(47, 79, 255, 0.45);
  transform: translateY(-1px);
}
body.light-home .site-header .menu-trigger {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(10, 37, 64, 0.08);
}
@media (max-width: 720px) {
  body.light-home .site-header .container.inner {
    width: calc(100% - 16px);
    padding: 8px 8px 8px 16px;
  }
}
body.light-home .logo .b2box { color: var(--l-text); }
body.light-home .nav a { color: var(--l-text-2); }
body.light-home .nav a:hover { color: var(--l-text); }
body.light-home .nav a::after { background: var(--brand); }
body.light-home .nav a.active, body.light-home .nav a.is-active { color: var(--l-text); }
body.light-home .country-select { color: var(--l-text-2); border-color: var(--l-line); }
body.light-home .btn-ghost { color: var(--l-text); border-color: var(--l-line-2); }
body.light-home .btn-ghost:hover { background: var(--l-bg-soft); border-color: var(--brand); }

/* ============== HERO — editorial / asymmetric ============== */
.lh-hero { position: relative; padding: 0; overflow: hidden; isolation: isolate; min-height: 100vh; display: flex; align-items: center; }
.lh-hero .inner { position: relative; z-index: 2; padding: 100px 0 80px; width: 100%; }

/* Big background mark — editorial typography behind everything */
.lh-bgmark { position: absolute; left: 0; right: 0; bottom: 4%; z-index: 0; pointer-events: none; display: flex; gap: 32px; align-items: center; justify-content: flex-start; padding: 0 32px; font-family: var(--font-display); font-size: clamp(80px, 14vw, 220px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; color: rgba(10,37,64,0.04); white-space: nowrap; animation: bgmark-slide 22s linear infinite; will-change: transform; }
.lh-bgmark .sep { color: rgba(47,79,255,0.12); }
@keyframes bgmark-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.lh-hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,37,64,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,37,64,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
}

/* Layout: rail | center | rail */
.lh-hero-grid-layout { display: grid; grid-template-columns: 200px 1fr 200px; gap: 40px; align-items: start; position: relative; }
@media (max-width: 1100px) { .lh-hero-grid-layout { grid-template-columns: 1fr; } .lh-rail { display: none; } }

/* Centered hero variant — no rails */
.lh-hero-grid-layout.lh-hero-centered { grid-template-columns: 1fr; place-items: center; }
.lh-hero-grid-layout.lh-hero-centered .lh-rail { display: none; }
.lh-center-aligned { text-align: center; max-width: 1080px; display: flex; flex-direction: column; align-items: center; }
.lh-center-aligned .lh-h1 { text-align: center; }
.lh-center-aligned .lh-rotator { margin-left: auto; margin-right: auto; }
.lh-center-aligned .rot-prefix { justify-content: center; }
.lh-center-aligned .rot-stage { text-align: center; }
.lh-center-aligned .rot-progress { justify-content: center; }
.lh-center-aligned .lh-ctas { justify-content: center; }
.lh-center-aligned .lh-trust { justify-content: center; width: 100%; max-width: 720px; }

.lh-rail { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.rail-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--l-text-3); }
.rail-label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(47,79,255,0.18); animation: pulse-dot 2s ease-out infinite; }
.rail-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--l-line); }
.rm-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; }
.rm-row .rm-k { color: var(--l-text-3); letter-spacing: 0.1em; }
.rm-row .rm-v { color: var(--l-text); font-weight: 500; }
.rail-right { align-items: flex-end; }
.rail-scroll-line { width: 1px; height: 120px; background: var(--l-line-2); position: relative; overflow: hidden; margin-top: 16px; }
.rsl-fill { position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, transparent, var(--brand), transparent); animation: rsl 2.4s ease-in-out infinite; }
@keyframes rsl { 0% { transform: translateY(-100%); } 100% { transform: translateY(280%); } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(47,79,255,0.18); } 50% { box-shadow: 0 0 0 7px rgba(47,79,255,0); } }

.lh-center { text-align: left; max-width: 920px; }

.lh-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border: 1px solid var(--l-line-2); background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: var(--l-text-2); margin-bottom: 36px; }

.lh-h1-old-suppressed { display: none; }
.lh-h1 { font-family: var(--font-display); font-size: clamp(56px, 8.4vw, 124px); font-weight: 800; line-height: 0.96; letter-spacing: -0.045em; color: var(--l-text); margin: 24px 0 0; position: relative; }
.lh-h1 .h1-line-single { display: block; opacity: 0; transform: translateY(28px); animation: h1-rise 900ms cubic-bezier(.2,.8,.2,1) 200ms both; white-space: nowrap; }
@keyframes h1-rise { to { opacity: 1; transform: none; } }
.china-wrap { display: inline-block; position: relative; padding: 0 0.04em 0 0.08em; }
.china-word { display: inline-block; background: linear-gradient(120deg, #2F4FFF 0%, #6F8BFF 50%, #2F4FFF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: china-shimmer 4.5s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes china-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.china-han { position: absolute; right: -0.42em; top: -0.06em; font-family: 'Noto Serif SC', 'STSong', serif; font-size: 0.26em; font-weight: 400; color: var(--brand); opacity: 0; letter-spacing: 0.02em; line-height: 1; writing-mode: vertical-rl; animation: han-reveal 1100ms cubic-bezier(.2,.8,.2,1) 1100ms both; }
@keyframes han-reveal { 0% { opacity: 0; transform: translateY(-8px) scale(0.8); } 60% { opacity: 1; transform: translateY(0) scale(1.05); } 100% { opacity: 0.85; transform: translateY(0) scale(1); } }

.lh-sub { font-size: 21px; line-height: 1.5; color: var(--l-text-2); max-width: 56ch; margin: 36px 0 0; font-weight: 400; }

/* ========== Hero rotator (Apple-style word swap) ========== */
.lh-rotator { margin: 18px 0 0; width: 100%; max-width: 760px; }
.rot-prefix { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.rot-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--l-blue); letter-spacing: 0.12em; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--l-blue) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--l-blue) 6%, transparent); }
.rot-num-sep { opacity: 0.4; margin: 0 2px; }
.rot-num-total { color: var(--l-text-2); }
.rot-static { font-size: 19px; font-weight: 500; color: var(--l-text-2); letter-spacing: -0.01em; }

.rot-stage { position: relative; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; color: var(--l-text); overflow: hidden; height: 1.32em; padding-bottom: 0.1em; }
.rot-list { list-style: none; padding: 0; margin: 0; position: relative; height: 100%; }
.rot-item { position: absolute; inset: 0; opacity: 0; transform: translateY(70%); transition: opacity 520ms cubic-bezier(.22,.9,.32,1), transform 620ms cubic-bezier(.22,.9,.32,1); pointer-events: none; white-space: nowrap; }
.rot-item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rot-item.is-leaving { opacity: 0; transform: translateY(-65%); transition-duration: 480ms; }
.rot-word { display: inline-block; background: linear-gradient(180deg, #0A2540 0%, #0A2540 55%, #2F4FFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.rot-progress { display: flex; gap: 8px; margin-top: 22px; }
.rot-tick { flex: 1; max-width: 60px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--l-text) 10%, transparent); position: relative; overflow: hidden; }
.rot-tick.is-active::after { content: ''; position: absolute; inset: 0; background: var(--l-blue); transform-origin: left; animation: rotTickFill 3.6s linear forwards; }
.rot-tick.is-done { background: var(--l-blue); }
@keyframes rotTickFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 720px) {
  .lh-h1 { font-size: clamp(40px, 11vw, 72px); }
  .lh-h1 .h1-line-single { white-space: normal; }
  .rot-stage { font-size: clamp(28px, 8vw, 44px); }
  .rot-static { font-size: 15px; }
}
.lh-ctas { display: flex; gap: 14px; margin-top: 44px; margin-bottom: 56px; flex-wrap: wrap; justify-content: flex-start; }

.lh-trust { display: flex; gap: 32px; margin-top: 88px; flex-wrap: wrap; align-items: center; padding-top: 32px; border-top: 1px solid var(--l-line); }

/* ========== Hero institutional pillars (replaces old big stats) ========== */
.lh-pillars-trust { width: 100%; max-width: 1180px; margin: 56px auto 0; position: relative; padding: 0 24px; }
.lhpt-line { display: none; }
.lhpt-vsep { display: none; }
@keyframes lhpt-line-in { to { transform: scaleX(1); } }

/* New 4-column layout: each block is a vertical stack — label / dot-on-line / value */
.lhpt-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: stretch;
  padding: 0;
  gap: 0;
  position: relative;
}
/* Single horizontal line — runs through the vertical centre of the row, behind the dots */
.lhpt-row::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 79, 255, 0.18) 6%, rgba(47, 79, 255, 0.32) 50%, rgba(47, 79, 255, 0.18) 94%, transparent);
  transform-origin: center;
  transform: scaleX(0);
  animation: lhpt-line-in 1200ms cubic-bezier(.22,.9,.32,1) 600ms forwards;
  pointer-events: none;
  z-index: 0;
}

/* Fixed-height layout — 3 explicit rows so all 4 blocks align row-by-row */
.lhpt-block {
  position: relative;
  display: grid;
  grid-template-rows: 48px 14px 48px;  /* label | dot | value — identical across blocks */
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 0 12px;
  opacity: 0;
  transform: translateY(12px);
  animation: lhpt-block-in 600ms cubic-bezier(.22,.9,.32,1) forwards;
}
.lhpt-row .lhpt-block:nth-child(1) { animation-delay: 280ms; }
.lhpt-row .lhpt-block:nth-child(2) { animation-delay: 420ms; }
.lhpt-row .lhpt-block:nth-child(3) { animation-delay: 560ms; }
.lhpt-row .lhpt-block:nth-child(4) { animation-delay: 700ms; }
@keyframes lhpt-block-in { to { opacity: 1; transform: none; } }

/* Dot in the middle row of each block — sits on the horizontal line */
.lhpt-block::before {
  content: '';
  grid-row: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(47, 79, 255, 0.12);
  transform: scale(0);
  animation: lhpt-dot-in 500ms cubic-bezier(.6,.2,.2,1.4) forwards, lhpt-dot-pulse 2.4s ease-in-out infinite;
  z-index: 1;
  position: relative;
}
@keyframes lhpt-dot-in { to { transform: scale(1); } }
@keyframes lhpt-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(47, 79, 255, 0.12); }
  50%      { box-shadow: 0 0 0 10px rgba(47, 79, 255, 0.04); }
}
/* Synchronised pulse — same phase for all 4 dots */
.lhpt-row .lhpt-block:nth-child(1)::before { animation-delay: 900ms, 2400ms; }
.lhpt-row .lhpt-block:nth-child(2)::before { animation-delay: 1000ms, 2400ms; }
.lhpt-row .lhpt-block:nth-child(3)::before { animation-delay: 1100ms, 2400ms; }
.lhpt-row .lhpt-block:nth-child(4)::before { animation-delay: 1200ms, 2400ms; }

/* Label — top row, vertically centred in its 48px slot */
.lhpt-label {
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--l-text-3);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Value — bottom row, vertically centred in its 48px slot */
.lhpt-value {
  grid-row: 3;
  align-self: center;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--l-text);
  letter-spacing: -0.012em;
  line-height: 1.3;
  font-family: var(--font-display);
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 1100px) {
  .lhpt-value { font-size: 12px; }
  .lhpt-label { font-size: 9px; }
}
@media (max-width: 820px) {
  .lhpt-value { white-space: normal; }
}
@media (max-width: 1100px) {
  .lhpt-value { font-size: 12px; }
  .lhpt-label { font-size: 9px; }
}
@media (max-width: 820px) {
  .lhpt-value { white-space: normal; }
}
.lhpt-vsep { width: 1px; height: 48px; background: linear-gradient(180deg, transparent, var(--l-line-2) 30%, var(--l-line-2) 70%, transparent); opacity: 0; animation: lhpt-vsep-in 600ms ease-out forwards 950ms; position: relative; overflow: hidden; }
.lhpt-vsep::after { content: ''; position: absolute; top: -10px; left: 0; width: 1px; height: 10px; background: var(--brand); animation: lhpt-vsep-trail 2.4s ease-in-out infinite 1.6s; }
@keyframes lhpt-vsep-in { to { opacity: 1; } }
@keyframes lhpt-vsep-trail { 0%, 60%, 100% { top: -10px; opacity: 0; } 30% { top: 48px; opacity: 0.7; } }

@media (max-width: 720px) {
  .lhpt-row { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .lhpt-vsep { width: 60%; height: 1px; margin: 0 auto; background: var(--l-line); }
  .lhpt-block { padding: 22px 0; }
}

.lh-trust .stat { min-width: 140px; }
.lh-trust .stat .v { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.035em; color: var(--l-text); line-height: 1; }
.lh-trust .stat .v sup { color: var(--brand); font-size: 0.45em; vertical-align: 0.7em; margin-right: 1px; }
.lh-trust .stat .l { font-size: 12px; color: var(--l-text-3); margin-top: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; }
.stat-sep { width: 1px; height: 36px; background: var(--l-line-2); }
@media (max-width: 700px) { .stat-sep { display: none; } }

/* Aurora background — brand-blue waves on white */
.aurora-bg {
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 110% 110% at 100% 0%, #000 5%, transparent 75%);
          mask-image: radial-gradient(ellipse 110% 110% at 100% 0%, #000 5%, transparent 75%);
}
.aurora-layer {
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.95) 8%, transparent 12%, transparent 14%, rgba(255,255,255,0.95) 18%),
    repeating-linear-gradient(100deg, #2F4FFF 10%, #6F8BFF 18%, #B8C9FF 26%, #C8D4FF 32%);
  background-size: 240% 160%, 180% 100%;
  background-position: 0% 50%, 0% 50%;
  filter: blur(16px);
  opacity: 0.45;
  animation: aurora-flow 32s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
}
.aurora-layer-2 { display: none; }
@keyframes aurora-flow {
  0%   { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 100% 50%, 100% 50%; }
}
@keyframes aurora-flow-2 {
  0%   { background-position: 100% 0%, 0% 0%; }
  100% { background-position: 0% 100%, 100% 100%; }
}
/* hard fade to white at bottom so next section transitions */
.lh-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 200px; z-index: 1;
  background: linear-gradient(180deg, transparent 0%, #FFFFFF 100%);
  pointer-events: none;
}

/* ============== Hero static sub + pillars card (replaces rotator) ============== */
/* Hero frame — groups sub + 5 pillars + "Todo en uno" as one breathing block.
   The frame's outline + soft halo appears once the finale lands (after the cards). */
.hero-frame {
  position: relative;
  margin: 32px auto 0;
  width: 100%;
  max-width: 1180px;       /* matches the .container width used elsewhere */
  padding: 32px 40px 36px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: transparent;
  transition: border-color 800ms ease, background 800ms ease, box-shadow 800ms ease;
  animation: hero-frame-in 700ms cubic-bezier(.2,.8,.2,1) 4.8s forwards;
}
@media (max-width: 768px) {
  .hero-frame { padding: 24px 20px 28px; }
}
@keyframes hero-frame-in {
  to {
    border-color: rgba(47, 79, 255, 0.14);
    background: linear-gradient(180deg, rgba(47, 79, 255, 0.02) 0%, transparent 70%);
    box-shadow: 0 28px 80px -32px rgba(47, 79, 255, 0.18);
  }
}

.hero-static-sub {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--l-text);
  margin: 0 auto;
  max-width: 880px;
  text-align: center;
  font-weight: 500;
}

/* Hero pillars video — DEPRECATED, replaced by CSS-animated row */
.hero-pillars-video { display: none !important; }

/* Row of 5 individual pillar cards — strict single line, larger, centered, with connecting line */
.hero-pillars-block {
  position: relative;
  margin: 32px auto 0;
  max-width: 1180px;
  width: 100%;
  padding: 0 12px;
}
.hero-pillars-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin: 28px auto 0;
  padding: 0 8px;
}
/* (Connecting line removed per user feedback — cards stand alone) */

.pillar-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  padding: 18px 12px;
  background: transparent;
  border: none;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: pillar-card-in 600ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d, 0s);
  transition: transform 220ms, background 220ms;
  position: relative;
  z-index: 1;
}
.pillar-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(47, 79, 255, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
}
.pillar-card:hover {
  transform: translateY(-3px);
}
.pillar-card:hover::before {
  opacity: 1;
}
@keyframes pillar-card-in {
  to { opacity: 1; transform: translateY(0); }
}
.pillar-anim {
  width: 96px;
  height: 96px;
  color: var(--brand);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "+" connector between pillar cards — appears progressively, in sync with the
   pillar card it sits before. */
.pillar-plus {
  flex: 0 0 auto;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: rgba(47, 79, 255, 0.45);
  user-select: none;
  padding-top: 60px;          /* sits at the vertical centre of the 96px icon */
  margin: 0 -2px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  animation: pillar-plus-in 320ms cubic-bezier(.34, 1.56, .64, 1) forwards;
  /* Each + lands just after its preceding card finishes animating (cards: --d 0.4 / 0.95 / 1.5 / 2.05) */
}
.hero-pillars-row .pillar-plus:nth-of-type(1) { animation-delay: 0.85s; }
.hero-pillars-row .pillar-plus:nth-of-type(2) { animation-delay: 1.4s;  }
.hero-pillars-row .pillar-plus:nth-of-type(3) { animation-delay: 1.95s; }
.hero-pillars-row .pillar-plus:nth-of-type(4) { animation-delay: 2.5s;  }
@keyframes pillar-plus-in {
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 768px) {
  .pillar-plus { display: none; }
}
/* Subtle ring behind icon — lights up when card lands */
.pillar-anim::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 79, 255, 0.10) 0%, transparent 65%);
  opacity: 0;
  animation: pillar-icon-glow 800ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d, 0s) + 0.3s);
  z-index: -1;
}
@keyframes pillar-icon-glow {
  to { opacity: 1; }
}
.anim-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pillar-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--l-text-3);
  text-align: center;
}
.pillar-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--l-text);
  line-height: 1.2;
  text-align: center;
  margin: 0;
}

/* Per-card motion-icon animations (each card orchestrated, ~600ms internal motion) */
@keyframes stroke-draw { to { stroke-dashoffset: 0; } }
@keyframes scale-bottom { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes scale-pop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.06) rotate(0deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ping-out {
  0%   { opacity: 0.7; transform: scale(1); stroke-width: 1.6; }
  100% { opacity: 0;   transform: scale(1.6); stroke-width: 0.4; }
}

/* 01 PROVIDERS — factory roof draws → lens scans → dot pings */
.pillar-card[data-anim="providers"] .a-pf-roof {
  animation: stroke-draw 500ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.0s);
}
.pillar-card[data-anim="providers"] .a-lens {
  animation: stroke-draw 500ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.25s);
}
.pillar-card[data-anim="providers"] .a-handle {
  animation: stroke-draw 300ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.55s);
}
.pillar-card[data-anim="providers"] .a-pf-dot {
  animation: fade-in 250ms ease forwards;
  animation-delay: calc(var(--d) + 0.7s);
}
.pillar-card[data-anim="providers"] .a-pf-ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: ping-out 900ms ease-out infinite;
  animation-delay: calc(var(--d) + 0.85s);
  stroke: currentColor;
}

/* 02 PRODUCTION — factory builds → gear spins → bars grow */
.pillar-card[data-anim="production"] .a-pp-fact {
  animation: stroke-draw 600ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.0s);
}
.pillar-card[data-anim="production"] .a-pp-gear {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: fade-in 200ms ease forwards, gear-spin 6s linear infinite;
  animation-delay: calc(var(--d) + 0.4s), calc(var(--d) + 0.4s);
}
.pillar-card[data-anim="production"] .a-bar {
  transform-origin: 50% 44px;
  transform: scaleY(0);
  animation: scale-bottom 320ms cubic-bezier(.4,1.5,.6,1) forwards;
}
.pillar-card[data-anim="production"] .a-bar-1 { animation-delay: calc(var(--d) + 0.55s); }
.pillar-card[data-anim="production"] .a-bar-2 { animation-delay: calc(var(--d) + 0.65s); }
.pillar-card[data-anim="production"] .a-bar-3 { animation-delay: calc(var(--d) + 0.75s); }
.pillar-card[data-anim="production"] .a-bar-4 { animation-delay: calc(var(--d) + 0.85s); }

/* 03 QC — clipboard draws → rows fill → big check pops */
.pillar-card[data-anim="qc"] .a-qc-board {
  animation: stroke-draw 600ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.0s);
}
.pillar-card[data-anim="qc"] .a-qc-row-1 {
  animation: stroke-draw 300ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.4s);
}
.pillar-card[data-anim="qc"] .a-qc-row-2 {
  animation: stroke-draw 350ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.55s);
}
.pillar-card[data-anim="qc"] .a-qc-circle {
  animation: stroke-draw 400ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.7s);
}
.pillar-card[data-anim="qc"] .a-check {
  animation: stroke-draw 280ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 1.0s);
}

/* 04 LOGISTICS — route draws → ship rises → waves ripple */
.pillar-card[data-anim="logistics"] .a-route-fill {
  animation: stroke-draw 600ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.0s);
}
.pillar-card[data-anim="logistics"] .a-lg-ship {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
  transform: translateY(6px);
  animation: ship-rise 500ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.45s);
}
@keyframes ship-rise { to { opacity: 1; transform: translateY(0); } }
.pillar-card[data-anim="logistics"] .a-lg-wave {
  opacity: 0;
  animation: wave-pulse 1.6s ease-in-out infinite;
}
.pillar-card[data-anim="logistics"] .a-lg-wave-1 { animation-delay: calc(var(--d) + 0.7s); }
.pillar-card[data-anim="logistics"] .a-lg-wave-2 { animation-delay: calc(var(--d) + 0.95s); }
@keyframes wave-pulse {
  0%   { opacity: 0; transform: translateX(0); }
  50%  { opacity: 0.5; transform: translateX(2px); }
  100% { opacity: 0; transform: translateX(0); }
}

/* 05 CUSTOMS — doc draws → lines fill → stamp pops with check */
.pillar-card[data-anim="customs"] .a-cu-doc {
  animation: stroke-draw 600ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.0s);
}
.pillar-card[data-anim="customs"] .a-cu-fold {
  animation: stroke-draw 300ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.4s);
}
.pillar-card[data-anim="customs"] .a-cu-l1 {
  animation: stroke-draw 280ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.55s);
}
.pillar-card[data-anim="customs"] .a-cu-l2 {
  animation: stroke-draw 320ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 0.7s);
}
.pillar-card[data-anim="customs"] .a-stamp {
  transform-box: fill-box;
  transform-origin: 38px 38px;
  animation: scale-pop 480ms cubic-bezier(.4,1.5,.6,1) forwards;
  animation-delay: calc(var(--d) + 0.95s);
  opacity: 0;
}
.pillar-card[data-anim="customs"] .a-stamp-check {
  animation: stroke-draw 320ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d) + 1.3s);
}

/* "Todo en uno" final phrase — emerges from below the row as the culmination */
.pillar-final-block {
  position: relative;
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  font-weight: 500;
  color: var(--l-text);
  letter-spacing: -0.018em;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: pillar-final-in 900ms cubic-bezier(.2,.8,.2,1) 4.3s forwards;
}
/* Soft glow halo behind the finale */
.pillar-final-block::before {
  content: "";
  position: absolute;
  inset: -20px 25% -20px 25%;
  background: radial-gradient(ellipse at center, rgba(47, 79, 255, 0.10) 0%, transparent 70%);
  opacity: 0;
  animation: finale-halo-in 900ms cubic-bezier(.2,.8,.2,1) 4.3s forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes pillar-final-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes finale-halo-in {
  to { opacity: 1; }
}
.pillar-final-block .finale-text { white-space: nowrap; }
.pillar-final-block .accent {
  background: linear-gradient(95deg, #2F4FFF 0%, #6F8BFF 50%, #2F4FFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad-pan 8s ease-in-out infinite;
  font-weight: 600;
}
.pillar-final-block .finale-dot { color: var(--l-text); font-weight: 500; }
/* Legacy `.pillar-final` retained for safety (no longer rendered) */
.pillar-final, .pillar-final .finale-line { display: none; }

@media (max-width: 900px) {
  .hero-pillars-row { gap: 2px; }
  .pillar-card { min-width: 108px; padding: 8px 10px; }
  .pillar-anim { width: 36px; height: 36px; }
  .pillar-card h4 { font-size: 12px; }
  .pillar-final { width: 100%; justify-content: center; padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-card,
  .pillar-final,
  .pillar-final .finale-line,
  .pillar-card .anim-svg * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

.lh-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border: 1px solid var(--l-line-2); background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: var(--l-text-2); margin-bottom: 28px; }
.lh-eyebrow .pill { background: var(--brand); color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 999px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lh-eyebrow .arrow { color: var(--brand); }

.lh-h1 .accent-grad { background: linear-gradient(95deg, #2F4FFF 0%, #6F8BFF 50%, #2F4FFF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: grad-pan 8s ease-in-out infinite; }
@keyframes grad-pan { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Inline language hint — chinese characters next to text */
.lang-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(47, 79, 255, 0.08);
  color: var(--brand);
  border-radius: 6px;
  font-family: "Noto Serif SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 0.05em;
}

/* Inline B2BOX wordmark — sized to match an uppercase glyph of the surrounding text.
   The native SVG viewBox is 551×131; we mask with it and apply the brand gradient. */
.inline-logo-b2box {
  display: inline-block;
  /* Match cap-height of the surrounding font: ~0.72em.
     Width derived from native viewBox aspect (551/131 ≈ 4.21) */
  height: 0.72em;
  width: 3.03em;
  vertical-align: -0.02em;
  margin: 0 0.08em 0 0.04em;
  background-image: linear-gradient(95deg, #2F4FFF 0%, #6F8BFF 50%, #2F4FFF 100%);
  background-size: 200% 100%;
  -webkit-mask: url('../assets/LOGO%20B2BOX_Negro.svg') no-repeat center / contain;
  mask: url('../assets/LOGO%20B2BOX_Negro.svg') no-repeat center / contain;
  animation: grad-pan 8s ease-in-out infinite;
  user-select: none;
}
/* Hero h2 trailing period — bouncy entrance after the logo lands */
.eslabones-h2 .eh-tail-dot {
  display: inline-block;
  font-weight: 700;
  color: var(--brand);
  opacity: 0;
  transform: translateY(-6px) scale(0.4);
  animation: eh-tail-dot-pop 600ms cubic-bezier(.4, 1.6, .6, 1) 3.4s forwards;
}
@keyframes eh-tail-dot-pop {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.4); }
  60%  { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Eslabones lead — 4 explicit lines (description / pills / friction / promise) */
.eslabones-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 24px 0 0;
  text-align: left;
  max-width: 880px;
}
.eslabones-lead .esl-line {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--l-text-2);
}
.eslabones-lead strong { color: var(--l-text); font-weight: 600; }
.eslabones-lead .esl-final strong { color: var(--brand-deep); }

.eslabones-lead .esl-pills-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.eslabones-lead .es-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid rgba(47, 79, 255, 0.16);
}
/* Color variants — each link of the chain stands on its own colour
   Higher specificity (.eslabones-lead .es-pill.X) so they win against the base .es-pill */
.eslabones-lead .es-pill.es-pill-sourcing  { background: rgba(47, 79, 255, 0.10);   color: #2F4FFF; border-color: rgba(47, 79, 255, 0.30); }
.eslabones-lead .es-pill.es-pill-qc        { background: rgba(74, 222, 128, 0.18);  color: #15803D; border-color: rgba(74, 222, 128, 0.40); }
.eslabones-lead .es-pill.es-pill-logistics { background: rgba(255, 159, 67, 0.18);  color: #B45309; border-color: rgba(255, 159, 67, 0.40); }
.eslabones-lead .es-pill.es-pill-customs   { background: rgba(155, 123, 255, 0.18); color: #6D28D9; border-color: rgba(155, 123, 255, 0.40); }
.eslabones-lead .es-plus {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.eslabones-lead .esl-final {
  margin-top: 4px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(47, 79, 255, 0.06), rgba(47, 79, 255, 0));
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  text-align: left;
  width: 100%;
}

/* China stat source caption */
.china-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--l-text-3);
  margin: 14px auto 0;
  text-align: center;
  line-height: 1.5;
}
.china-source strong { color: var(--l-text-2); font-weight: 700; }
.src-mark { color: var(--brand); font-size: 0.5em; vertical-align: 0.7em; margin-left: 2px; }
.btn-brand { background: var(--brand); color: #fff; padding: 16px 26px; border-radius: 999px; font-weight: 500; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; transition: all 220ms cubic-bezier(.2,.8,.2,1); box-shadow: 0 4px 16px rgba(47,79,255,0.3); }
.btn-brand:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(47,79,255,0.45); }
.btn-brand .arrow-circ { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; transition: transform 220ms; }
.btn-brand:hover .arrow-circ { transform: translateX(3px); }
.btn-outline { background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); color: var(--l-text); padding: 16px 26px; border-radius: 999px; font-weight: 500; font-size: 16px; border: 1px solid var(--l-line-2); display: inline-flex; align-items: center; gap: 10px; transition: all 220ms; }
.btn-outline:hover { background: #fff; border-color: var(--brand); color: var(--brand); }

/* Old centered trust — replaced by inline version above */
.lh-trust-old-unused { display: none; }

/* ====== Floating cards (right side over mesh) ====== */
.lh-cards-float { position: absolute; right: 32px; top: 100px; width: 440px; max-width: 42vw; pointer-events: none; z-index: 1; }
@media (max-width: 1100px) { .lh-cards-float { display: none; } }
.lh-card { position: absolute; background: rgba(255,255,255,0.86); backdrop-filter: saturate(140%) blur(12px); border: 1px solid var(--l-line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 50px -10px rgba(10,37,64,0.18), 0 8px 16px -6px rgba(10,37,64,0.08); pointer-events: auto; animation: card-float 6s ease-in-out infinite; }
.lh-card.c1 { top: 0; right: 0; width: 280px; animation-delay: 0s; }
.lh-card.c2 { top: 200px; right: 100px; width: 320px; animation-delay: 1.5s; }
.lh-card.c3 { top: 380px; right: 30px; width: 260px; animation-delay: 3s; }
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.lh-card .ttl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--l-text-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.lh-card .ttl .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); position: relative; }
.lh-card .ttl .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand); animation: pulse-ring 2s ease-out infinite; }
.lh-card .row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; }
.lh-card .row + .row { border-top: 1px solid var(--l-line); }
.lh-card .row .k { color: var(--l-text-3); font-family: var(--font-mono); font-size: 11px; }
.lh-card .row .v { color: var(--l-text); font-weight: 500; font-family: var(--font-mono); font-size: 12px; }
.lh-card .row .v.green { color: #16A34A; }

.lh-card.c1 .big { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--l-text); margin: 4px 0 6px; }
.lh-card.c1 .big sup { font-size: 0.4em; color: var(--brand); vertical-align: 0.6em; }
.lh-card.c1 .delta { font-size: 12px; color: #16A34A; font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 4px; }

.lh-card.c2 .progress-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.lh-card.c2 .progress-row .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--l-text-3); width: 80px; text-transform: uppercase; letter-spacing: 0.08em; }
.lh-card.c2 .progress-bar { flex: 1; height: 4px; background: var(--l-bg-soft); border-radius: 2px; overflow: hidden; }
.lh-card.c2 .progress-bar .fill { height: 100%; background: linear-gradient(90deg, var(--brand-light), var(--brand)); border-radius: 2px; transform-origin: left; animation: bar-grow 2.4s ease-out forwards; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.lh-card.c2 .progress-row .pct { font-family: var(--font-mono); font-size: 11px; color: var(--l-text); width: 32px; text-align: right; }

/* ============== SECTION SHELL ============== */
.lh-section { padding: 96px 0; position: relative; }
.lh-section.alt { background: var(--l-bg-soft); }
.lh-section.alt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--l-line-2), transparent); }
.lh-eyebrow-2 { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand); margin-bottom: 24px; }
.lh-eyebrow-2::before { content: ''; width: 24px; height: 2px; background: var(--brand); }
.lh-h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; color: var(--l-text); max-width: 16ch; }
.lh-h2 .grad { background: linear-gradient(95deg, #2F4FFF, #6F8BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* H2 with dominant "no" */
.lh-h2-bigno { max-width: 22ch; line-height: 1.02; }
.lh-h2-bigno .l1, .lh-h2-bigno .l2 { display: block; }
.lh-h2-bigno .l1 .grad { color: var(--brand); background: none; -webkit-text-fill-color: var(--brand); font-style: italic; }
.lh-h2-bigno .l2 { margin-top: 8px; }
.lh-h2-bigno .bigno { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 18vw, 240px); line-height: 0.85; letter-spacing: -0.06em; color: var(--brand); vertical-align: -0.18em; margin-left: 12px; background: linear-gradient(170deg, #2F4FFF, #0A1F8F); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; }
.lh-h2-bigno .bigno-dot { color: var(--brand); -webkit-text-fill-color: var(--brand); background: none; }
.lh-lead { font-size: 19px; line-height: 1.55; color: var(--l-text-2); max-width: 64ch; margin-top: 20px; }

/* ============== 5 ESLABONES — Linear-style cards row ============== */
.lh-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 48px; border: 1px solid var(--l-line); border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(10,37,64,0.12); }
@media (max-width: 1100px) { .lh-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lh-pillars { grid-template-columns: 1fr; } }
.pillar { padding: 36px 28px; border-right: 1px solid var(--l-line); position: relative; min-height: 320px; display: flex; flex-direction: column; transition: background 250ms; cursor: default; }
.pillar:last-child { border-right: none; }
@media (max-width: 1100px) {
  .pillar { border-bottom: 1px solid var(--l-line); }
  .pillar:nth-child(2n) { border-right: none; }
}
.pillar:hover { background: var(--brand-soft); }
.pillar .num-row { font-family: var(--font-mono); font-size: 11px; color: var(--l-text-3); margin-bottom: 32px; display: flex; justify-content: space-between; letter-spacing: 0.1em; }
.pillar .num-row .arrow { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--l-line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--l-text-2); transition: all 220ms; }
.pillar:hover .num-row .arrow { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotate(-45deg); }
.pillar .icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-soft), rgba(47,79,255,0.02)); display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 24px; transition: all 250ms; }
.pillar:hover .icon { background: var(--brand); color: #fff; transform: scale(1.05); }
.pillar h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--l-text); margin-bottom: 12px; }
.pillar p { font-size: 14px; line-height: 1.55; color: var(--l-text-2); }

/* ============== HOW IT WORKS — animated stage ============== */
.lh-how-stage { margin-top: 48px; background: linear-gradient(160deg, #0A1F8F 0%, #2F4FFF 100%); border-radius: 28px; padding: 56px 56px 0; color: #fff; position: relative; overflow: hidden; }
.lh-how-stage::before { content: ''; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.lh-how-header { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; position: relative; }
.lh-how-header h3 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; letter-spacing: -0.03em; max-width: 16ch; }
.lh-how-header .legend { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.12em; }
.lh-how-track { margin: 56px 0 24px; height: 2px; background: rgba(255,255,255,0.18); position: relative; }
.lh-how-track .progress { position: absolute; top: 0; left: 0; height: 100%; background: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.6); width: 0%; transition: width 200ms; }
.lh-how-track .marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.4); transition: all 220ms; }
.lh-how-track .marker.active { background: #fff; border-color: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,0.18); }
.lh-how-track .container-icon { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 30px; transition: left 200ms ease-out; z-index: 2; }
.lh-how-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding-bottom: 56px; position: relative; }
@media (max-width: 900px) { .lh-how-steps { grid-template-columns: repeat(2, 1fr); } }
.lh-how-step {
  padding: 0 8px;
  opacity: 0.22;
  transform: translateY(8px);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1), transform 420ms cubic-bezier(.2,.8,.2,1);
}
.lh-how-step.is-revealed { opacity: 1; transform: translateY(0); }
.lh-how-step.is-revealed h4 { color: #fff; }
.lh-how-step .stp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.lh-how-step .phase-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pc, #2F4FFF) 22%, transparent);
  color: var(--pc, #2F4FFF);
  flex-shrink: 0;
  transition: transform 280ms;
}
.lh-how-step.is-revealed .phase-icon { animation: phase-icon-pop 500ms cubic-bezier(.4, 1.6, .6, 1); }
@keyframes phase-icon-pop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.lh-how-step.is-revealed .time {
  background: color-mix(in srgb, var(--pc, #2F4FFF) 28%, transparent);
  color: #fff;
}
.lh-how-step .stp { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.55); margin-bottom: 6px; letter-spacing: 0.12em; }
.lh-how-step h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.lh-how-step .time { display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.15); color: #fff; margin-bottom: 12px; }
.lh-how-step .row { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; margin-bottom: 4px; color: rgba(255,255,255,0.78); }
.lh-how-step .row .key { color: rgba(255,255,255,0.5); flex-shrink: 0; min-width: 50px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 1px; }

/* ============== PROOF PHOTOS — placeholders for real images ============== */
.lh-proof-grid { margin-top: 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 280px; gap: 16px; }
@media (max-width: 900px) { .lh-proof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lh-proof-grid { grid-template-columns: 1fr; } }
.proof-tile { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #0F1740 0%, #1A1F4F 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: #fff; transition: transform 280ms; cursor: pointer; }
.proof-tile:hover { transform: translateY(-4px); }
.proof-tile.lg { grid-row: span 2; }
.proof-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
/* Ambient brand glow that breathes — covers the whole card behind content */
/* (Brand-glow ::after replaced by the legibility scrim below.) */
@keyframes pt-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate(8%, -6%) scale(1.1); opacity: 0.75; }
}
.proof-tile.brand::after {
  background: radial-gradient(ellipse at 70% 30%, rgba(111, 139, 255, 0.5) 0%, transparent 55%);
  opacity: 0.65;
}
/* Full-card SVG animation layer — strongly attenuated + a heavier scrim that
   guarantees the white text reads cleanly over any frame of the animation. */
.proof-tile .pt-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.32;          /* ⇩ animation is now a subtle texture, not the focal point */
  pointer-events: none;
}
.proof-tile.lg .pt-bg { opacity: 0.30; }

/* Scrim — heavy navy overlay. Covers ~half the card from bottom up,
   plus a semi-opaque tint over the entire surface so even the top reads well.
   Sits between the SVG (z:0) and the text content (z:1). */
.proof-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* heavy bottom gradient */
    linear-gradient(180deg,
      rgba(15, 23, 64, 0.20) 0%,
      rgba(15, 23, 64, 0.35) 25%,
      rgba(15, 23, 64, 0.78) 60%,
      rgba(15, 23, 64, 0.94) 100%);
}
.proof-tile.lg::after {
  background:
    linear-gradient(180deg,
      rgba(15, 23, 64, 0.18) 0%,
      rgba(15, 23, 64, 0.30) 30%,
      rgba(15, 23, 64, 0.70) 65%,
      rgba(15, 23, 64, 0.90) 100%);
}

/* Content layer above the ambient backgrounds */
.proof-tile > .ph-tag,
.proof-tile > .ph-stat,
.proof-tile > .ph-meta,
.proof-tile > .ph-icon { position: relative; z-index: 1; }

/* Soft scrim behind the text — fades the SVG animation out where text sits,
   without drawing visible boxes. Vertical fade only, no border or solid rectangle. */
.proof-tile .ph-stat,
.proof-tile .ph-meta {
  position: relative;
  /* Place the text + its scrim a layer above the SVG */
  z-index: 1;
}
.proof-tile .ph-stat {
  text-shadow: 0 2px 8px rgba(15, 23, 64, 0.55);
}
.proof-tile .ph-meta {
  /* Soft radial fade behind the meta block — concentrated under the text, no visible rectangle */
  text-shadow: 0 2px 10px rgba(15, 23, 64, 0.6), 0 0 18px rgba(15, 23, 64, 0.4);
}
.proof-tile .ph-meta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -12px -10px -12px;
  background: radial-gradient(ellipse 70% 70% at 50% 80%, rgba(15, 23, 64, 0.65) 0%, rgba(15, 23, 64, 0.35) 50%, transparent 100%);
  pointer-events: none;
  filter: blur(2px);
}

/* === Tile 1 — Yiwu Almacén: isometric warehouse, racks, forklift, light beams === */
/* Subtle dolly-in on the whole scene for depth */
@keyframes pt1-dolly {
  0%, 100% { transform: scale(1)    translate(0, 0); }
  50%      { transform: scale(1.04) translate(-2px, -3px); }
}
.proof-tile .pt1-scene {
  transform-origin: 50% 60%;
  animation: pt1-dolly 14s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Lamps gently flicker in opacity */
@keyframes pt1-lamps-glow {
  0%, 100% { opacity: 0.9; }
  35%      { opacity: 1; }
  70%      { opacity: 0.78; }
}
.proof-tile .pt1-lamps {
  animation: pt1-lamps-glow 5.5s cubic-bezier(.4,0,.2,1) infinite;
}
/* Volumetric beam slowly drifts/breathes */
@keyframes pt1-beam-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(0)   scaleY(1); }
  50%      { opacity: 0.85; transform: translateX(8px) scaleY(1.04); }
}
.proof-tile .pt1-beam {
  transform-origin: 50% 0;
  animation: pt1-beam-breathe 7s cubic-bezier(.4,0,.2,1) infinite;
  mix-blend-mode: screen;
}
/* Crane carriage glides L→R while cable extends + container drops */
@keyframes pt1-crane-glide {
  0%, 100% { transform: translateX(28px); }
  45%      { transform: translateX(168px); }
  55%      { transform: translateX(168px); }
}
.proof-tile .pt1-crane {
  animation: pt1-crane-glide 9s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes pt1-hook-drop {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(0); }
  55%      { transform: translateY(38px); }
  75%      { transform: translateY(0); }
}
.proof-tile .pt1-hook {
  animation: pt1-hook-drop 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Forklift travels across floor with subtle bounce */
@keyframes pt1-fork-travel {
  0%   { transform: translate(-90px, 0); }
  6%   { transform: translate(-90px, 0); }
  50%  { transform: translate(150px, 0); }
  56%  { transform: translate(150px, 0); }
  100% { transform: translate(-90px, 0); }
}
@keyframes pt1-fork-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}
.proof-tile .pt1-fork {
  animation: pt1-fork-travel 11s cubic-bezier(.65,.05,.36,1) infinite,
             pt1-fork-bounce 0.5s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Wheels spin while forklift moves */
@keyframes pt1-wheel-spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.proof-tile .pt1-spoke {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt1-wheel-spin 0.7s linear infinite;
}
/* Background racks subtle parallax shift */
@keyframes pt1-rack-shift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
.proof-tile .pt1-rack-back {
  animation: pt1-rack-shift 14s cubic-bezier(.4,0,.2,1) infinite;
}

/* === Tile 2 — Producción: factory cross-section, robotic arm welding, conveyor belt === */
/* Each box independently slides L→R using --bo offset, then loops */
@keyframes pt2-box-flow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(240px); }
}
.proof-tile .pt2-box-g {
  animation: pt2-box-flow 4.2s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: calc(var(--bo, 0px) / 240 * -4.2s);
}
/* Belt stripes shift continuously */
@keyframes pt2-belt-stripes {
  0%   { transform: translateX(0); }
  100% { transform: translateX(20px); }
}
.proof-tile .pt2-belt-stripes {
  animation: pt2-belt-stripes 0.6s linear infinite;
}
/* Robotic arm: shoulder swings, elbow flexes, wrist tilts */
@keyframes pt2-arm-shoulder {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(6deg); }
}
.proof-tile .pt2-arm-shoulder {
  animation: pt2-arm-shoulder 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes pt2-arm-elbow {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(8deg); }
}
.proof-tile .pt2-arm-elbow {
  animation: pt2-arm-elbow 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes pt2-arm-wrist {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-12deg); }
}
.proof-tile .pt2-arm-wrist {
  animation: pt2-arm-wrist 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Sparks flash + scale near welder head */
@keyframes pt2-spark-flash {
  0%, 35%   { opacity: 0; transform: scale(0.4); }
  45%       { opacity: 1; transform: scale(1.2); }
  55%       { opacity: 0.7; transform: scale(0.95); }
  70%, 100% { opacity: 0; transform: scale(0.4); }
}
.proof-tile .pt2-spark {
  transform-origin: 61px 152px;
  animation: pt2-spark-flash 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
  mix-blend-mode: screen;
}
/* Window lights flicker subtly */
@keyframes pt2-windows-flicker {
  0%, 100% { opacity: 0.85; }
  30%      { opacity: 1; }
  55%      { opacity: 0.75; }
  82%      { opacity: 0.95; }
}
.proof-tile .pt2-windows {
  animation: pt2-windows-flicker 6s cubic-bezier(.4,0,.2,1) infinite;
}
/* Output boxes drop into ramp */
@keyframes pt2-out-drop {
  0%, 88%, 100% { transform: translateY(0);   opacity: 1; }
  92%           { transform: translateY(-3px); opacity: 1; }
  95%           { transform: translateY(2px);  opacity: 0.6; }
}
.proof-tile .pt2-out-box {
  transform-box: fill-box;
  transform-origin: center;
  animation: pt2-out-drop 4.2s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--od, 0s);
}
/* LIVE badge dot pulse */
@keyframes pt2-badge-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.proof-tile .pt2-badge circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt2-badge-pulse 1.8s cubic-bezier(.4,0,.2,1) infinite;
}

/* === Tile 3 — QC: clipboard with sequential checks + scan beam + magnifier orbit === */
/* Board breathes subtly */
@keyframes pt3-board-breathe {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  50%      { transform: rotate(-2.2deg) scale(1.02); }
}
.proof-tile .pt3-board {
  animation: pt3-board-breathe 8s cubic-bezier(.4,0,.2,1) infinite;
}
/* Each row's tick draws in sequentially, then resets */
@keyframes pt3-tick-draw {
  0%, 8%   { opacity: 0; stroke-dashoffset: 14; }
  12%      { opacity: 1; stroke-dashoffset: 0; }
  85%      { opacity: 1; stroke-dashoffset: 0; }
  92%      { opacity: 0; stroke-dashoffset: 14; }
  100%     { opacity: 0; stroke-dashoffset: 14; }
}
.proof-tile .pt3-tick {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: pt3-tick-draw 6s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--rd, 0s);
}
/* Scan beam slides top→bottom of paper */
@keyframes pt3-scan-down {
  0%, 100% { transform: translateY(0);    opacity: 0.85; }
  50%      { transform: translateY(104px); opacity: 0.55; }
}
.proof-tile .pt3-scanbar {
  animation: pt3-scan-down 6s cubic-bezier(.45,.05,.55,.95) infinite;
  mix-blend-mode: screen;
}
/* AQL stamp pop-in near end of cycle */
@keyframes pt3-stamp-pop {
  0%, 75%  { transform: rotate(-6deg) scale(0.4); opacity: 0; }
  82%      { transform: rotate(2deg)  scale(1.15); opacity: 1; }
  88%      { transform: rotate(-3deg) scale(0.96); opacity: 1; }
  92%, 100%{ transform: rotate(-3deg) scale(1);    opacity: 1; }
}
.proof-tile .pt3-stamp {
  animation: pt3-stamp-pop 6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* Magnifier orbits the board, with subtle scan rotation */
@keyframes pt3-mag-orbit {
  0%   { transform: rotate(-30deg); }
  100% { transform: rotate(330deg); }
}
.proof-tile .pt3-mag-orbit {
  animation: pt3-mag-orbit 14s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes pt3-mag-counter {
  0%   { transform: rotate(30deg); }
  100% { transform: rotate(-330deg); }
}
.proof-tile .pt3-mag {
  animation: pt3-mag-counter 14s cubic-bezier(.45,.05,.55,.95) infinite;
}

/* === Tile 4 — Equipo: 3 city nodes with avatars + traveling packets + clocks === */
/* Globe slow rotation hint via mask shift not used; instead we breathe the lat/long */
@keyframes pt4-globe-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.02); }
}
.proof-tile .pt4-globe {
  transform-origin: 100px 100px;
  animation: pt4-globe-breathe 12s cubic-bezier(.4,0,.2,1) infinite;
}
/* Arc dashed lines flow */
@keyframes pt4-arc-flow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}
.proof-tile .pt4-arc {
  animation: pt4-arc-flow 3s linear infinite;
}
/* Each node ring pulses outward, staggered */
@keyframes pt4-ring-pulse {
  0%   { opacity: 0.85; transform: scale(0.55); stroke-width: 2; }
  100% { opacity: 0;    transform: scale(1.8);  stroke-width: 0.4; }
}
.proof-tile .pt4-node .pt4-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt4-ring-pulse 2.8s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--rd, 0s);
}
/* Node center subtle "online" pulse */
@keyframes pt4-node-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.proof-tile .pt4-node {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt4-node-pulse 4s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: var(--rd, 0s);
}
/* Clock hands rotate at different speeds (different timezones) */
@keyframes pt4-clock-min {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes pt4-clock-hr {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.proof-tile .pt4-clock-m {
  transform-origin: 0 0;
  transform-box: fill-box;
  animation: pt4-clock-min 8s linear infinite;
}
.proof-tile .pt4-clock-h {
  transform-origin: 0 0;
  transform-box: fill-box;
  animation: pt4-clock-hr 96s linear infinite;
}
.proof-tile .pt4-clock-m2 { animation-duration: 9s; }
.proof-tile .pt4-clock-h2 { animation-duration: 108s; }
.proof-tile .pt4-clock-m3 { animation-duration: 7s; }
.proof-tile .pt4-clock-h3 { animation-duration: 84s; }

/* === Tile 5 — Logística: detailed ship + waves + foam + gulls + dock crane === */
/* Ship glides L→R smoothly with subtle vertical bob */
@keyframes pt5-ship-glide {
  0%   { transform: translateX(-110px) translateY(0); }
  100% { transform: translateX(220px)  translateY(0); }
}
@keyframes pt5-ship-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2px); }
}
.proof-tile .pt5-ship {
  animation: pt5-ship-glide 18s cubic-bezier(.45,.05,.55,.95) infinite,
             pt5-ship-bob 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Foam trail flicker (alpha) */
@keyframes pt5-foam-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.proof-tile .pt5-foam {
  animation: pt5-foam-flicker 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
/* Wave layers shift at different speeds */
@keyframes pt5-wave-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}
.proof-tile .pt5-wave {
  animation: pt5-wave-shift 5s linear infinite;
}
/* Distant ship moves slowly across the horizon */
@keyframes pt5-ship-far {
  0%   { transform: translateX(0); opacity: 0.55; }
  100% { transform: translateX(180px); opacity: 0.55; }
}
.proof-tile .pt5-ship-far {
  animation: pt5-ship-far 18s linear infinite;
}
/* Bird flies through sky */
@keyframes pt5-bird {
  0%   { transform: translateX(-10px) translateY(0);  opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translateX(110px) translateY(-4px); opacity: 0.6; }
  90%  { opacity: 0; }
  100% { transform: translateX(220px) translateY(-2px); opacity: 0; }
}
.proof-tile .pt5-bird {
  animation: pt5-bird 9s linear infinite;
}
/* Drop label fades with the container */
.proof-tile .pt5-drop-label {
  transform-origin: center;
  animation: pt5-drop 5s ease-in-out infinite;
}
.proof-tile .pt5-w1 { animation-duration: 7s; }
.proof-tile .pt5-w2 { animation-duration: 6s; }
.proof-tile .pt5-w3 { animation-duration: 5s; }
.proof-tile .pt5-w4 { animation-duration: 4s; }
/* Dock crane trolley travels along boom; container drops + releases */
@keyframes pt5-trolley-travel {
  0%, 100% { transform: translateX(168px); }
  45%      { transform: translateX(132px); }
  55%      { transform: translateX(132px); }
}
.proof-tile .pt5-trolley {
  animation: pt5-trolley-travel 9s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes pt5-cable-extend {
  0%, 100% { transform: scaleY(1);   }
  50%      { transform: scaleY(1.25); }
}
.proof-tile .pt5-cable {
  transform-origin: 0 48px;
  transform-box: fill-box;
  animation: pt5-cable-extend 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes pt5-drop {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  40%      { transform: translateY(20px); opacity: 1; }
  48%      { transform: translateY(20px); opacity: 0.4; }
  56%      { transform: translateY(0);   opacity: 0; }
  70%      { transform: translateY(0);   opacity: 1; }
}
.proof-tile .pt5-drop {
  animation: pt5-drop 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Smoke plumes drift up + fade */
@keyframes pt5-smoke {
  0%   { transform: translateY(0)    scale(1);   opacity: 0.6; }
  100% { transform: translateY(-22px) scale(1.6); opacity: 0; }
}
.proof-tile .pt5-smoke {
  transform-box: fill-box;
  transform-origin: center;
  animation: pt5-smoke 4s cubic-bezier(.45,.05,.55,.95) infinite;
}
.proof-tile .pt5-smoke1 { animation-delay: 0s;    }
.proof-tile .pt5-smoke2 { animation-delay: -1.3s; }
.proof-tile .pt5-smoke3 { animation-delay: -2.6s; }
/* Sun glow breathe */
@keyframes pt5-sun-glow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.proof-tile .pt5-sun {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt5-sun-glow 7s cubic-bezier(.4,0,.2,1) infinite;
}
/* Clouds drift slowly */
@keyframes pt5-clouds-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-30px); }
}
.proof-tile .pt5-clouds {
  animation: pt5-clouds-drift 18s linear infinite;
}
/* Gulls flap + drift */
@keyframes pt5-gull-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.55); }
}
@keyframes pt5-gull-drift1 {
  0%   { transform: translate(60px, 50px); }
  100% { transform: translate(220px, 35px); }
}
@keyframes pt5-gull-drift2 {
  0%   { transform: translate(110px, 60px); }
  100% { transform: translate(-40px, 48px); }
}
@keyframes pt5-gull-drift3 {
  0%   { transform: translate(150px, 44px); }
  100% { transform: translate(20px,  30px); }
}
.proof-tile .pt5-gull {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt5-gull-flap 0.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
.proof-tile .pt5-gull1 { animation: pt5-gull-flap 0.55s cubic-bezier(.45,.05,.55,.95) infinite, pt5-gull-drift1 16s linear infinite; }
.proof-tile .pt5-gull2 { animation: pt5-gull-flap 0.7s  cubic-bezier(.45,.05,.55,.95) infinite, pt5-gull-drift2 22s linear infinite; }
.proof-tile .pt5-gull3 { animation: pt5-gull-flap 0.5s  cubic-bezier(.45,.05,.55,.95) infinite, pt5-gull-drift3 19s linear infinite; }
/* Background distant ship slow drift */
@keyframes pt5-bg-ship-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(80px); }
}
.proof-tile .pt5-bg-ship {
  animation: pt5-bg-ship-drift 60s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .proof-tile .pt-bg *,
  .proof-tile .pt-bg { animation-duration: 30s !important; animation-iteration-count: 1 !important; }
  .proof-tile .pt2-spark,
  .proof-tile .pt3-tick,
  .proof-tile .pt5-gull { animation-iteration-count: 0 !important; opacity: 1 !important; }
}
/* Stat numbers — STAMP-IN effect.
   The reel stays parked on the TARGET digit (no rolling).
   On .is-building, each character pops in with scale + slight rotate + glow flash,
   staggered left-to-right. No increment, no count-up, no scroll. */
.proof-tile .ph-stat-num {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.proof-tile .ph-stat-char {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
  position: relative;
  width: 0.62em;          /* monospace-ish slot for digits */
  transform-origin: 50% 60%;
  /* Default visible state — no animation needed for reduced motion / first paint */
  opacity: 1;
  transform: scale(1) rotate(0);
}
.proof-tile .ph-stat-char.ph-stat-sep {
  width: 0.28em;          /* dot/comma narrower */
}
.proof-tile .ph-stat-char .reel {
  display: flex;
  flex-direction: column;
  line-height: 1;
  /* Always show the TARGET digit (last reel item) — no rolling animation.
     The reel HTML is kept for backward-compat but only the target glyph matters. */
  transform: translateY(var(--target, 0));
}
.proof-tile .ph-stat-char .reel > span {
  display: block;
  height: 1em;
  text-align: center;
}
/* During .is-building, each character STAMPS in with scale + rotate + glow.
   Looks like a hand stamp pressed onto paper, not a counter rolling up. */
.proof-tile .ph-stat-num.is-building .ph-stat-char {
  animation: stat-stamp 700ms cubic-bezier(.34, 1.7, .5, 1) backwards;
  animation-delay: var(--cd, 0ms);
}
@keyframes stat-stamp {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-14deg);
    text-shadow: 0 0 0 rgba(171, 255, 151, 0);
    filter: blur(2px);
  }
  35% {
    opacity: 1;
    transform: scale(1.22) rotate(2deg);
    text-shadow: 0 0 18px rgba(171, 255, 151, 0.85), 0 0 6px rgba(255, 255, 255, 0.9);
    filter: blur(0);
  }
  60% {
    transform: scale(0.94) rotate(-1deg);
    text-shadow: 0 0 10px rgba(171, 255, 151, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    text-shadow: 0 0 0 rgba(171, 255, 151, 0);
    filter: blur(0);
  }
}
/* Unit "+" or "m²" or "%" or "personas" — also stamps in, but softer (no rotation) */
.proof-tile .ph-stat-unit {
  display: inline-block;
  opacity: 1;
  margin-left: 0.1em;
  transform-origin: 0 60%;
}
.proof-tile .ph-stat-num.is-building .ph-stat-unit {
  animation: stat-unit-stamp 520ms cubic-bezier(.34, 1.6, .5, 1) backwards;
  animation-delay: var(--cd, 0ms);
}
@keyframes stat-unit-stamp {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
/* Scaffolding line under the digits */
.proof-tile .ph-stat-num::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, var(--lime) 0%, var(--brand-light) 50%, var(--lime) 100%);
  background-size: 200% 100%;
  border-radius: 2px;
  transform: scaleX(1);
  transform-origin: left;
  animation: grad-pan 6s ease-in-out infinite;
}
.proof-tile .ph-stat-num.is-building::after {
  animation: ph-stat-line 700ms cubic-bezier(.2,.8,.2,1) 600ms backwards,
             grad-pan 6s ease-in-out infinite 1.3s;
}
@keyframes ph-stat-line {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
.proof-tile .ph-corner { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.1em; backdrop-filter: blur(6px); }
.proof-tile .ph-icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); position: relative; z-index: 1; }
.proof-tile .ph-meta { position: relative; z-index: 1; }
.proof-tile .ph-meta .city { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.proof-tile .ph-meta h4 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.proof-tile.brand { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); }
.proof-tile.lg.brand .ph-meta h4 { font-size: 32px; max-width: 12ch; }

/* ============== COMPARISON ============== */
.lh-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
@media (max-width: 900px) { .lh-cmp { grid-template-columns: 1fr; } }
.lh-cmp .col { padding: 40px; border-radius: 20px; min-height: 480px; position: relative; overflow: hidden; }
.lh-cmp .col.bad { background: var(--l-bg); border: 1px solid var(--l-line-2); }
.lh-cmp .col.good { background: linear-gradient(160deg, #0A1F8F 0%, #2F4FFF 100%); color: #fff; box-shadow: 0 30px 80px -20px rgba(47,79,255,0.4); }

/* ============== COMPARATIVA 3 columnas (Alibaba / Trader / B2BOX) ============== */
.lh-cmp-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}
@media (max-width: 1080px) { .lh-cmp-3 { grid-template-columns: 1fr; } }
.cmp-col {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 20px;
  background: var(--l-bg);
  border: 1px solid var(--l-line-2);
  display: flex;
  flex-direction: column;
  min-height: 540px;
}
.cmp-col.is-popular {
  background: linear-gradient(160deg, #0A1F8F 0%, #2F4FFF 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 28px 70px -20px rgba(47,79,255,0.4);
  transform: translateY(-8px);
}
.cmp-col.is-popular::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  pointer-events: none;
  border-radius: inherit;
}
.cmp-col > * { position: relative; }
.cmp-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 20px -6px rgba(10,37,64,0.25);
  z-index: 2;
}
.cmp-head { padding-bottom: 18px; border-bottom: 1px solid var(--l-line); margin-bottom: 18px; }
.cmp-col.is-popular .cmp-head { border-bottom-color: rgba(255,255,255,0.14); }
.cmp-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-text-3);
  margin-bottom: 10px;
}
.cmp-col.is-popular .cmp-tag { color: rgba(255,255,255,0.6); }
.cmp-col h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--l-text);
  margin-bottom: 8px;
}
.cmp-col.is-popular h3 { color: #fff; }
/* B2BOX Pro logo replaces the textual h3 in the popular column */
.cmp-h3-logo { margin: 0 0 12px; padding: 0; line-height: 0; }
.cmp-h3-logo img {
  height: 28px;
  width: auto;
  display: block;
  /* On the dark blue popular card the logo is rendered white */
  filter: brightness(0) invert(1);
}
.cmp-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--l-text-2);
  margin: 0;
}
.cmp-col.is-popular .cmp-sub { color: rgba(255,255,255,0.78); }
.cmp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1 1 auto;
}
.cmp-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--l-text-2);
  border-top: 1px solid var(--l-line);
}
.cmp-list li:first-child { border-top: none; padding-top: 4px; }
.cmp-list li strong { color: var(--l-text); font-weight: 600; }
.cmp-col.is-popular .cmp-list li { color: rgba(255,255,255,0.88); border-top-color: rgba(255,255,255,0.1); }
.cmp-col.is-popular .cmp-list li strong { color: #fff; }
.cmp-list .ic {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin-top: 1px;
  font-weight: 700;
}
.cmp-col-alibaba .ic, .cmp-col-trading .ic {
  background: rgba(220,38,38,0.1);
  color: #DC2626;
}
.cmp-col.is-popular .ic {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.cmp-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--l-text-3);
  padding: 14px 14px;
  background: var(--l-bg-soft);
  border-radius: 10px;
  margin-top: auto;
}
.cmp-col.is-popular .cmp-foot {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
}
.lh-cmp .col.good::before { content: ''; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.lh-cmp .col h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; position: relative; }
.lh-cmp .col .sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--l-text-3); margin-bottom: 32px; position: relative; }
.lh-cmp .col.good .sub { color: rgba(255,255,255,0.6); }
.lh-cmp .col ul { list-style: none; padding: 0; margin: 0; position: relative; }
.lh-cmp .col li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--l-line); font-size: 14px; line-height: 1.5; }
.lh-cmp .col.good li { border-top-color: rgba(255,255,255,0.12); }
.lh-cmp .col li:first-child { border-top: none; }
.lh-cmp .col li .ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.lh-cmp .col.bad li .ic { background: rgba(220,38,38,0.1); color: #DC2626; }
.lh-cmp .col.good li .ic { background: rgba(255,255,255,0.18); color: #fff; }
.lh-cmp .col.bad li { color: var(--l-text-2); }
.lh-cmp .col.good li { color: rgba(255,255,255,0.92); }

/* ============== ¿Por qué China? + Yiwu ============== */
.china-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--l-line);
  border-bottom: 1px solid var(--l-line);
}
@media (max-width: 900px) { .china-stats { grid-template-columns: repeat(2, 1fr); } }
.china-stat {
  padding: 28px 24px;
  border-right: 1px solid var(--l-line);
  position: relative;
}
.china-stat:last-child { border-right: none; }
@media (max-width: 900px) {
  .china-stat:nth-child(2n) { border-right: none; }
  .china-stat:nth-child(-n+2) { border-bottom: 1px solid var(--l-line); }
}
.china-stat .cs-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--l-text);
  line-height: 1;
  background: linear-gradient(95deg, #2F4FFF 0%, #6F8BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.china-stat .cs-num .cs-unit {
  display: inline-block;
  font-size: 16px;
  margin-left: 4px;
  vertical-align: 0.7em;
  background: linear-gradient(95deg, #2F4FFF 0%, #6F8BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.china-stat .cs-lbl {
  font-size: 13px;
  color: var(--l-text-2);
  margin-top: 12px;
  font-weight: 500;
}
.china-stat .cs-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--l-text-3);
  line-height: 1.5;
  margin-top: 8px;
}

/* ========== Futian Market mini-feature (Por qué Yiwu) ========== */
.futian-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 44px;
  padding: 36px 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(47, 79, 255, 0.04) 0%, rgba(47, 79, 255, 0) 60%), var(--l-bg);
  border: 1px solid var(--l-line);
}
@media (max-width: 900px) { .futian-block { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }
.futian-h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 6px 0 12px;
  color: var(--l-text);
}
.futian-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--l-text-2);
  margin: 0;
}
.futian-lead strong { color: var(--l-text); font-weight: 600; }
.futian-svg {
  width: 100%;
  display: block;
  aspect-ratio: 480/280;
}
/* Futian — grid of stalls; diagonal wave of light pulses through them in loop */
.futian-anim .ft-stall {
  fill: rgba(47, 79, 255, 0.10);
  transition: fill 220ms;
  animation: ft-stall-pulse 5s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes ft-stall-pulse {
  0%, 80%, 100% { fill: rgba(47, 79, 255, 0.10); }
  10%           { fill: rgba(47, 79, 255, 0.85); }
  25%           { fill: rgba(47, 79, 255, 0.40); }
}
.futian-anim .ft-overlay {
  opacity: 0;
  transform: translateY(8px);
  transform-origin: center;
}
/* Lime sweep beam crossing horizontally */
@keyframes ft-beam-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(580px); }
}
.futian-anim .ft-beam {
  animation: ft-beam-sweep 4s linear infinite;
  mix-blend-mode: screen;
}
/* Walking dots glow soft */
.futian-anim .ft-walker {
  filter: drop-shadow(0 0 4px rgba(171, 255, 151, 0.6));
}
.futian-svg {
  aspect-ratio: 480/320;
}
.reveal.in .futian-anim .ft-overlay {
  animation: ft-overlay-in 700ms cubic-bezier(.2,.8,.2,1) 0.4s forwards;
}
@keyframes ft-overlay-in { to { opacity: 1; transform: translateY(0); } }

.yiwu-block {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 44px;
  padding: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(47,79,255,0.04) 0%, rgba(47,79,255,0.0) 60%), var(--l-bg-soft);
  border: 1px solid var(--l-line);
}
@media (max-width: 900px) { .yiwu-block { grid-template-columns: 1fr; padding: 32px; gap: 32px; } }
.yiwu-h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.15;
  margin: 8px 0 14px;
  color: var(--l-text);
}
.yiwu-lead {
  font-size: 15px;
  color: var(--l-text-2);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 52ch;
}
.yiwu-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.yiwu-reasons li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--l-line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--l-text-2);
}
.yiwu-reasons li:first-child { border-top: none; }
.yiwu-reasons li strong { color: var(--l-text); font-weight: 600; }
.yiwu-reasons .yr-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brand);
  padding-top: 2px;
}

.yiwu-anim {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.yiwu-svg {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  aspect-ratio: 600/360;
}

@keyframes ya-stroke { to { stroke-dashoffset: 0; } }
@keyframes ya-fade-in { to { opacity: 1; } }
@keyframes ya-pulse-ring {
  0%   { transform: scale(0.45); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes ya-yiwu-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.75; }
}

.yiwu-anim .ya-china-dots,
.yiwu-anim .ya-routes,
.yiwu-anim .ya-city,
.yiwu-anim .ya-yiwu-ring-1,
.yiwu-anim .ya-yiwu-ring-2,
.yiwu-anim .ya-yiwu-label-group {
  opacity: 0;
}

.reveal.in .yiwu-anim .ya-china-dots {
  animation: ya-fade-in 1200ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: 0.15s;
}
.reveal.in .yiwu-anim .ya-routes { animation: ya-fade-in 300ms ease forwards; animation-delay: 1.2s; }
.reveal.in .yiwu-anim .ya-route {
  animation: ya-stroke 800ms cubic-bezier(.2,.8,.2,1) forwards;
}
.reveal.in .yiwu-anim .ya-route:nth-child(1) { animation-delay: 1.5s; }
.reveal.in .yiwu-anim .ya-route:nth-child(2) { animation-delay: 1.65s; }
.reveal.in .yiwu-anim .ya-route:nth-child(3) { animation-delay: 1.75s; }
.reveal.in .yiwu-anim .ya-route:nth-child(4) { animation-delay: 1.85s; }
.reveal.in .yiwu-anim .ya-route:nth-child(5) { animation-delay: 2.0s; }
.reveal.in .yiwu-anim .ya-city {
  animation: ya-fade-in 400ms ease forwards;
  animation-delay: var(--cd, 1.4s);
}
.reveal.in .yiwu-anim .ya-yiwu-label-group {
  animation: ya-fade-in 500ms ease forwards;
  animation-delay: 1.0s;
}
.reveal.in .yiwu-anim .ya-yiwu-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: ya-yiwu-pulse 2.4s ease-in-out infinite;
  animation-delay: 1.0s;
}
.reveal.in .yiwu-anim .ya-yiwu-ring-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: ya-pulse-ring 2.4s ease-out infinite;
  animation-delay: 1.0s;
}
.reveal.in .yiwu-anim .ya-yiwu-ring-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: ya-pulse-ring 2.4s ease-out infinite;
  animation-delay: 2.2s;
}

.yiwu-anim-caption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--l-text-2);
  text-align: center;
  margin: 4px auto 8px;
  max-width: 460px;
  padding: 0 12px;
}
.yiwu-anim-caption strong { color: var(--l-text); font-weight: 600; }

.yiwu-stats-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--l-line);
}
.yiwu-stats-mini > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yiwu-stats-mini strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--l-text);
  letter-spacing: -0.012em;
}
.yiwu-stats-mini span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--l-text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============== METRICS BIG ============== */
.lh-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
@media (max-width: 900px) { .lh-metrics { grid-template-columns: repeat(2, 1fr); } }
.lh-metric { padding: 32px; border-radius: 20px; background: #fff; border: 1px solid var(--l-line); position: relative; overflow: hidden; transition: all 280ms; }
.lh-metric:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -10px rgba(10,37,64,0.12); border-color: rgba(47,79,255,0.3); }
.lh-metric::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--brand-soft), transparent 70%); }
.lh-metric .v { font-family: var(--font-display); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; color: var(--l-text); line-height: 1; }
.lh-metric .v sup { color: var(--brand); font-size: 0.4em; vertical-align: 0.7em; margin-right: 2px; }

/* Stat number — typewriter style. Each digit fades in left-to-right at 70ms intervals.
   Clean and minimal, no rotation/scale theatrics. Loops every 7s while visible. */
.stamp-num {
  display: inline-flex;
  align-items: baseline;
}
.stamp-num .stamp-ch {
  display: inline-block;
  /* Default state: digit visible at rest (so it's correct even if loop never fires) */
  opacity: 1;
}
.stamp-num.is-stamp .stamp-ch {
  animation: tw-num-in 280ms cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(var(--ci, 0) * 70ms);
}
@keyframes tw-num-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* Optional caret on the last digit while typing */
.stamp-num.is-stamp::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: var(--brand);
  font-weight: 400;
  opacity: 0;
  animation: tw-num-caret 1.6s steps(2, end) infinite;
  animation-delay: 100ms;
  vertical-align: -0.05em;
}
@keyframes tw-num-caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-num.is-stamp .stamp-ch,
  .stamp-num.is-stamp::after { animation: none !important; opacity: 1 !important; }
}
.lh-metric .l { font-size: 14px; color: var(--l-text-2); margin-top: 14px; line-height: 1.5; max-width: 22ch; }

/* ============== CTA FINAL ============== */
.lh-cta { padding: 140px 0; position: relative; overflow: hidden; background: linear-gradient(160deg, #0A1F8F 0%, #2F4FFF 60%, #6F8BFF 100%); color: #fff; text-align: center; }
.lh-cta::before { content: ''; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}
.lh-cta::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 800px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%); pointer-events: none; }
.lh-cta .container { position: relative; z-index: 1; }
.lh-cta h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; max-width: 18ch; margin: 0 auto 32px; }
.lh-cta p { font-size: 20px; color: rgba(255,255,255,0.85); max-width: 580px; margin: 0 auto 48px; }
.lh-cta .btn-white { background: #fff; color: var(--brand-deep); padding: 18px 32px; border-radius: 999px; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 12px; transition: all 220ms; }
.lh-cta .btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.lh-cta .btn-white .arrow-circ { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform 220ms; }
.lh-cta .btn-white:hover .arrow-circ { transform: translateX(4px); }
.lh-cta .mini { margin-top: 48px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.12em; }

/* footer override on light page */
body.light-home .site-footer { background: #0A1023; color: rgba(255,255,255,0.7); margin-top: 0; border-top: none; position: relative; overflow: hidden; }
body.light-home .site-footer .logo .b2box { color: #fff; }

/* Footer logo — single SVG mark (B2BOX PRO) tinted white for the dark footer */
.footer-logo-svg, .footer-logo-img {
  display: inline-block;
  margin-bottom: 18px;
  text-decoration: none;
  line-height: 0;
}
.footer-logo-svg img, .footer-logo-img img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer-logo-img .pro { display: none; }

/* Mega backdrop logo — disabled */
.footer-mega-img, .footer-mega { display: none !important; }
@keyframes breathe {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.09; }
}
body.light-home .footer-col h4 { color: rgba(255,255,255,0.4); }
body.light-home .footer-col a { color: rgba(255,255,255,0.7); }
body.light-home .footer-col a:hover { color: var(--brand-light); }
body.light-home .footer-bottom { border-top-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

/* ============== COVERAGE MAP ============== */
/* Cobertura hint — small floating tooltip-style card above the map */
.lh-cov-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(47, 79, 255, 0.06);
  border: 1px solid rgba(47, 79, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--l-text-2);
  letter-spacing: 0.04em;
}
.lh-cov-hint .hint-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.lh-cov-stage { margin-top: 40px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: stretch; }
@media (max-width: 1000px) { .lh-cov-stage { grid-template-columns: 1fr; } }
.lh-cov-mapwrap { position: relative; background: #fff; border: 1px solid var(--l-line); border-radius: 24px; padding: 20px; overflow: hidden; min-height: 380px; }
.lh-cov-mapwrap::before { content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,37,64,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 95%);
  pointer-events: none;
}
.lh-cov-dotmap { position: absolute; inset: 20px; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 600ms; }
.lh-cov-map { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 340px; display: block; }
.lh-cov-map text { font-family: var(--font-mono); font-size: 9px; fill: var(--l-text-3); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.lh-cov-pin { cursor: pointer; transition: transform 220ms; }
.lh-cov-pin circle { fill: var(--brand); transition: all 220ms; filter: drop-shadow(0 0 4px rgba(47, 79, 255, 0.4)); }
.lh-cov-pin:hover circle, .lh-cov-pin.active circle { fill: var(--lime); r: 9; filter: drop-shadow(0 0 12px rgba(171, 255, 151, 0.85)); }
.lh-cov-pin:hover text, .lh-cov-pin.active text { fill: var(--l-text) !important; font-weight: 700; }
.lh-cov-pin:hover text, .lh-cov-pin.active text { fill: var(--brand); font-weight: 600; }
.lh-cov-pin.lh-cov-origin { cursor: default; }
.lh-cov-routes path { transition: all 240ms; }
.lh-cov-routes path.active { stroke-opacity: 1; stroke-width: 2; stroke-dasharray: 6 3; animation: dash-flow 1.4s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -18; } }

.lh-cov-panel { background: linear-gradient(160deg, #0A1F8F 0%, #2F4FFF 100%); color: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 70px -20px rgba(47,79,255,0.4); position: relative; overflow: hidden; min-height: 380px; }
.lh-cov-foot { margin-top: auto; }
.lh-cov-panel::before { content: ''; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.lh-cov-panel > * { position: relative; z-index: 1; }
.lh-cov-panel-header { display: flex; gap: 16px; align-items: center; }
.lh-cov-panel-header .flag { font-size: 44px; line-height: 1; transition: transform 280ms; }
.lh-cov-panel.active .flag { animation: flag-pop 400ms ease; }
@keyframes flag-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.lh-cov-panel-header .cname { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.lh-cov-panel-header .ccode { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.6); margin-top: 4px; }
.lh-cov-stats { display: flex; flex-direction: column; }
.lh-cov-stats .row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.lh-cov-stats .row:first-child { border-top: none; }
.lh-cov-stats .row .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.lh-cov-stats .row .v { font-family: var(--font-mono); font-size: 13px; color: #fff; font-weight: 500; text-align: right; max-width: 60%; }
.lh-cov-foot {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: auto;
  /* Reserve space for ~3 lines so the panel never resizes when text varies */
  min-height: 92px;
  display: flex;
  align-items: flex-start;
}

.lh-cov-list { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.lh-cov-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--l-line-2); font-family: var(--font-mono); font-size: 12px; color: var(--l-text-2); cursor: pointer; transition: all 200ms; background: #fff; }
.lh-cov-chip:hover, .lh-cov-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.lh-cov-chip.muted { color: var(--l-text-3); cursor: default; }
.lh-cov-chip.muted:hover { background: #fff; border-color: var(--l-line-2); color: var(--l-text-3); transform: none; }

/* Pillar tilt smoothness */
.pillar { transition: transform 220ms cubic-bezier(.2,.8,.2,1), background 250ms; transform-style: preserve-3d; }

/* Reveal — pure CSS keyframe animation. No JS dependency, no IntersectionObserver,
   no opacity:0 fallback that can get stuck. Elements fade up on page load with stagger. */
@keyframes lh-reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.reveal { animation: lh-reveal-up 700ms cubic-bezier(.2,.8,.2,1) both; }
.reveal[data-delay="80"]  { animation-delay: 80ms; }
.reveal[data-delay="120"] { animation-delay: 120ms; }
.reveal[data-delay="160"] { animation-delay: 160ms; }
.reveal[data-delay="200"] { animation-delay: 200ms; }
.reveal[data-delay="240"] { animation-delay: 240ms; }
.reveal[data-delay="280"] { animation-delay: 280ms; }
.reveal[data-delay="380"] { animation-delay: 380ms; }
.reveal[data-delay="500"] { animation-delay: 500ms; }
.reveal[data-delay="650"] { animation-delay: 650ms; }
.reveal[data-delay="800"] { animation-delay: 800ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

/* ============== Cinco eslabones — H2 morph animation ============== */
.eslabones-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--l-text);
  max-width: none;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 900px) {
  .eslabones-h2 {
    font-size: clamp(28px, 7vw, 42px);
    white-space: normal;
  }
}
.eh-swap {
  display: inline-grid;
  vertical-align: baseline;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.eh-swap > * {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
}
/* === Classic typewriter — erase + type letter by letter, then reveal SVG logo === */
.eslabones-h2 .tw {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.eslabones-h2 .tw-out {
  color: var(--l-text-3);
  font-weight: 700;
  transition: color 240ms ease;
}
.eslabones-h2 .tw.is-target .tw-out {
  color: var(--brand);
}
.eslabones-h2 .tw-caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 4px;
  background: var(--brand);
  color: transparent;
  font-size: 0;
  vertical-align: -0.05em;
  animation: tw-caret-blink 800ms steps(2, end) infinite;
}
@keyframes tw-caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* B2BOX SVG logo — collapsed by default, reveals inline once .show-logo is added */
.eslabones-h2 .tw-logo-wrap {
  display: inline-block;
  vertical-align: -0.04em;
  overflow: hidden;
  width: 0;
  opacity: 0;
  transition: width 0ms;
}
.eslabones-h2 .tw.show-logo .tw-logo-wrap {
  width: 4.2em;     /* native SVG aspect ratio 551/131 ≈ 4.21 at cap-height 0.72em */
  opacity: 1;
  transition: width 240ms cubic-bezier(.2,.8,.2,1);
}
.eslabones-h2 .tw-logo-svg {
  height: 0.85em;
  width: 4.2em;
  display: block;
  overflow: visible;
}
/* Each letter — fills brand blue, scales/fades in with stagger when .show-logo */
.eslabones-h2 .tw-letter {
  fill: var(--brand);
  opacity: 0;
  transform: translateY(8px) scale(0.7);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0ms;
}
.eslabones-h2 .tw.show-logo .tw-letter {
  animation: tw-letter-in 460ms cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(var(--li, 0) * 90ms);
}
@keyframes tw-letter-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
/* Final dot after the logo — only shown once logo is in */
.eslabones-h2 .tw-end-dot {
  display: inline-block;
  color: var(--l-text);
  font-weight: 700;
  margin-left: 2px;
  opacity: 0;
  transition: opacity 240ms ease;
}
.eslabones-h2 .tw.show-logo .tw-end-dot {
  opacity: 1;
  transition-delay: 600ms;
}

/* Legacy typewriter classes kept for safety (no-op now) */
.tw-stage {
  display: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  position: relative;
}
.tw-text {
  color: var(--l-text-3);
  font-weight: 700;
  transition: color 200ms;
}
.tw-text.is-typing-to {
  color: var(--brand);  /* turns blue the moment we start typing the new word */
}
/* Hidden state: zero width — the dot stays pegged to "complejo" / "fácil con" while typing.
   Visible state: exact native width of the wordmark + a single word-space gap. */
.tw-logo {
  display: inline-block;
  vertical-align: baseline;
  opacity: 0;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1),
              width 320ms cubic-bezier(.2,.8,.2,1),
              margin-left 320ms cubic-bezier(.2,.8,.2,1);
}
.tw-logo.is-visible {
  opacity: 1;
  width: 3.03em;     /* exact width derived from the SVG viewBox (551×131) at 0.72em cap-height */
  margin-left: 0.22em;
}
.tw-logo .inline-logo-b2box { vertical-align: -0.04em; }
.tw-dot {
  display: inline-block;
  color: var(--l-text);
  font-weight: 700;
  /* The dot stays on screen the whole time and slides naturally with the text flow */
}
.tw-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--brand);
  margin-left: 4px;
  vertical-align: -0.1em;
  opacity: 0;
  transform: scaleY(0.9);
}
.tw-caret.is-active {
  opacity: 1;
  animation: tw-caret-blink 800ms steps(2, end) infinite;
}
@keyframes tw-caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Legacy (unused now) */
.eh-w-from { display: none; }
.eh-w-to { display: none; }
.eh-tail-from { color: var(--l-text); }
.eh-tail-to {
  color: var(--l-text);
  font-weight: 500;
  opacity: 0;
  transform: translateX(12px);
  will-change: opacity, transform;
}

/* Morph timing — sequential (no overlap) to avoid the "ghost layer" between `complejo` → `fácil` */
.eslabones-trigger.is-animated .eh-w-from {
  animation: eh-from-out 280ms cubic-bezier(.2,.8,.2,1) 650ms forwards;
}
.eslabones-trigger.is-animated .eh-w-to {
  animation: eh-to-in 380ms cubic-bezier(.2,.8,.2,1) 950ms forwards;
}
.eslabones-trigger.is-animated .eh-tail-from {
  animation: eh-from-out 280ms cubic-bezier(.2,.8,.2,1) 650ms forwards;
}
.eslabones-trigger.is-animated .eh-tail-to {
  animation: eh-coda-in 460ms cubic-bezier(.2,.8,.2,1) 1350ms forwards;
}
/* Lead now triggers from .reveal.in (general intersection observer), independent of the morph */
.reveal.in .eslabones-lead {
  animation: eh-lead-in 700ms cubic-bezier(.2,.8,.2,1) 200ms forwards;
}

@keyframes eh-from-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes eh-to-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes eh-coda-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes eh-lead-in {
  to { opacity: 1; transform: none; }
}

.eslabones-lead {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .eh-swap { transition: none; }
  .eslabones-trigger.is-animated .eh-w-from,
  .eslabones-trigger.is-animated .eh-tail-from { animation: none; opacity: 0; }
  .eslabones-trigger.is-animated .eh-w-to,
  .eslabones-trigger.is-animated .eh-tail-to,
  .eslabones-trigger.is-animated .eslabones-lead { animation: none; opacity: 1; transform: none; }
}

/* ============== Modalidades (3 tipos A/B/C) ============== */
.lh-modalities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .lh-modalities { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
}
.modality {
  position: relative;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 24px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms, border-color 280ms;
}
.modality:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -20px rgba(10, 37, 64, 0.12);
  border-color: var(--l-line-2);
}
.modality.is-popular {
  background: linear-gradient(180deg, #F2F5FF 0%, #FFFFFF 38%);
  border: 2px solid var(--brand);
  box-shadow: 0 24px 60px -16px rgba(47, 79, 255, 0.28);
}
.modality.is-popular:hover {
  box-shadow: 0 32px 70px -16px rgba(47, 79, 255, 0.36);
}
.modality-badge {
  position: absolute;
  top: -14px;
  left: 28px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(47, 79, 255, 0.32);
}
.modality-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  border-radius: 6px;
  align-self: flex-start;
}
.modality-head h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--l-text);
  margin: 14px 0 6px;
  line-height: 1.15;
}
.modality-sub {
  font-size: 14px;
  color: var(--l-text-2);
  line-height: 1.5;
}
.modality-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--l-text-2);
  padding-top: 18px;
  border-top: 1px solid var(--l-line);
}
.modality-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.modality-features li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--l-text);
}
.modality-features .ic {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}
.modality.is-popular .modality-features .ic {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.modality-countries {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--l-line);
}
.modality-countries-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-text-3);
  margin-bottom: 12px;
}
.modality-countries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--l-bg-soft);
  border: 1px solid var(--l-line);
  font-size: 13px;
  color: var(--l-text);
  white-space: nowrap;
  transition: background 200ms, border-color 200ms;
}
.country-chip em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l-text-3);
  margin-left: 4px;
}
.country-chip.muted { color: var(--l-text-3); background: transparent; }
.modality.is-popular .country-chip {
  background: rgba(47, 79, 255, 0.06);
  border-color: rgba(47, 79, 255, 0.15);
}

.modality-pricing {
  border-top: 1px solid var(--l-line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-text-3);
  margin-bottom: 6px;
}
.pricing-tier {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}
.pricing-tier .tier-pct {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pricing-tier .tier-range {
  font-size: 13px;
  color: var(--l-text-2);
}

.lh-modalities-note {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--l-text-3);
}

/* ============== Servicios adicionales ============== */
.lh-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .lh-services { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
}
.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 20px;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms, box-shadow 280ms;
  overflow: hidden;
  isolation: isolate;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 79, 255, 0.28);
  box-shadow: 0 28px 56px -20px rgba(10, 37, 64, 0.14);
}

/* Shine border — rotating conic gradient on the BORDER only (no fill bleed at corners).
   The trick: the rotating layer is masked to a 1.5px ring along the rounded edge so it
   never shows through the card body, and the inner cover sits perfectly inside that ring. */
.shine-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}
.shine-card > .shine-border {
  position: absolute;
  z-index: 0;
  inset: -2px;                    /* extend past the border so corners don't crop */
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 268deg,
    rgba(47, 79, 255, 0.55) 305deg,
    rgba(111, 139, 255, 0.95) 335deg,
    rgba(47, 79, 255, 0.55) 355deg,
    transparent 360deg
  );
  animation: shine-border-spin 5s linear infinite;
  pointer-events: none;
  transform-origin: center center;
  /* Mask to a 2px ring on the inside of the card border using composite mask.
     This keeps the rotating gradient strictly on the edge — no diagonal stripe
     ever bleeds across the card body, even at rounded corners. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  padding: 1.6px;                 /* the ring thickness */
  background-clip: border-box;
  /* Fallback (Safari < 15.4): the inset cover below still hides any leak */
}
.shine-card::after {
  content: "";
  position: absolute;
  inset: 1.6px;                   /* match the ring thickness above */
  background: #fff;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  transition: background 220ms;
}
.shine-card > * {
  position: relative;
  z-index: 2;
}
@keyframes shine-border-spin {
  to { transform: rotate(360deg); }
}

/* Soft inner blue glow on hover (no shape change at corners) */
.shine-card:hover::after {
  background: linear-gradient(180deg, rgba(47, 79, 255, 0.04) 0%, #fff 60%);
}

@media (prefers-reduced-motion: reduce) {
  .shine-card > .shine-border { animation-duration: 30s; }
}
.service-card .service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-soft), rgba(47, 79, 255, 0.02));
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--l-text);
  line-height: 1.2;
}
.service-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--l-text-2);
  flex-grow: 1;
}
.service-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid rgba(47, 79, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--brand);
  text-transform: uppercase;
  font-weight: 600;
}
.service-card .service-sub {
  font-size: 13.5px;
  color: var(--l-text-2);
  line-height: 1.5;
  margin: 4px 0 14px;
}
.service-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-features li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--l-text-2);
  padding: 6px 0;
  border-top: 1px solid var(--l-line);
}
.service-features li:first-child { border-top: none; padding-top: 0; }
.service-features .sf-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l-text-3);
  font-weight: 600;
  padding-top: 1px;
}
.lh-modalities-note a {
  color: var(--brand);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.lh-modalities-note a:hover {
  color: var(--brand-deep);
}

/* ============== ECOSISTEMA · B2BOX App + Brands ============== */
.eco-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}
@media (max-width: 1080px) { .eco-grid { grid-template-columns: 1fr; } }

.eco-card {
  position: relative;
  border-radius: 28px;
  padding: 44px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
}
.eco-card .eco-head h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 12px 0 14px;
}
.eco-card .eco-sub {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
.eco-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.eco-tag-light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Eco card hero logos (App / Brands) — replaces the textual chip */
.eco-logo {
  display: block;
  width: auto;
  margin-bottom: 18px;
  user-select: none;
}
.eco-logo-app {
  height: 38px;
  /* App logo is black + red — invert + brighten so it reads on dark blue card */
  filter: brightness(0) invert(1);
}
.eco-logo-brands {
  height: 44px;
}

/* Footer "Otros productos" — logos instead of plain links */
.footer-logos-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-logos-list li { padding: 0; }
.footer-product-link {
  display: inline-flex !important;
  align-items: center;
  text-decoration: none;
  border: none !important;
  padding: 0 !important;
  transition: opacity 220ms;
}
.footer-product-link:hover { opacity: 0.75; }
.footer-product-logo {
  height: 22px;
  width: auto;
  display: block;
  /* Footer is dark — both logos rendered white */
  filter: brightness(0) invert(1);
}
.footer-product-logo-brands {
  height: 26px;
}

/* B2BOX App (large, dark gradient) */
.eco-app {
  background: linear-gradient(160deg, #0A1F8F 0%, #2F4FFF 100%);
  color: #fff;
  box-shadow: 0 28px 70px -20px rgba(47, 79, 255, 0.4);
}
.eco-app .eco-sub { color: rgba(255, 255, 255, 0.78); }
.eco-app-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.eco-app > * { position: relative; z-index: 1; }

/* Mock UI inside App card */
.eco-mock {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eco-mock-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.emt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.emt-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 12px;
}
.eco-mock-body {
  padding: 8px 14px;
}
.emb-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.8fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.emb-row:last-child { border-bottom: none; }
.emb-row-h {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  width: fit-content;
}
.pill-track  { background: rgba(96, 165, 250, 0.22); color: #BFDBFE; }
.pill-prod   { background: rgba(251, 191, 36, 0.22); color: #FDE68A; }
.pill-qc     { background: rgba(74, 222, 128, 0.22); color: #BBF7D0; }
.pill-quote  { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Features list */
.eco-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.eco-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--l-text-2);
}
.eco-features li strong { color: var(--l-text); font-weight: 600; }
.eco-features-light li { color: rgba(255, 255, 255, 0.88); }
.eco-features-light li strong { color: #fff; }
.eco-features li .ic {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--brand-soft);
  color: var(--brand);
  margin-top: 1px;
}
.eco-features-light li .ic {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Footer (countries + CTA) */
.eco-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--l-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.eco-app .eco-foot { border-top-color: rgba(255, 255, 255, 0.12); }
.eco-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.eco-foot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-text-3);
  font-weight: 600;
}
.eco-app .eco-foot-label { color: rgba(255, 255, 255, 0.55); }
.eco-foot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eco-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.eco-chip .cf { font-size: 13px; line-height: 1; }
.eco-all-countries {
  font-size: 14px;
  font-weight: 600;
  color: var(--l-text);
}

.eco-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #fff;
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  text-decoration: none;
  width: fit-content;
  transition: transform 220ms, box-shadow 220ms;
}
.eco-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(255, 255, 255, 0.3); }
.eco-cta .arrow-circ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}
.eco-cta-outline {
  background: var(--brand);
  color: #fff;
}
.eco-cta-outline .arrow-circ {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.eco-cta-outline:hover { box-shadow: 0 12px 28px -10px rgba(47, 79, 255, 0.4); }

/* Brands — editorial / atelier style, layered colour palette + product mockups */
.eco-brands {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 159, 67, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(155, 123, 255, 0.08) 0%, transparent 50%),
    #FAFAF7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}
.eco-brands::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='rgba(0,0,0,0.025)' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}
.eco-brands > * { position: relative; z-index: 1; }
.eco-brands .eco-head h3 { color: #1A1A1A; font-family: var(--font-display); }
.eco-brands .eco-sub { color: #6A6A6A; }

/* Stacked product mockup: bottle / box / tube — like a Brands editorial shoot */
.eco-brands-art {
  position: relative;
  height: 160px;
  margin: 12px 0 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding: 0 12px;
}
.ebart {
  position: relative;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.20);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
/* Bottle (left) — tall, peach */
.ebart-1 {
  width: 38px;
  height: 130px;
  background: linear-gradient(180deg, #FF9F6E 0%, #FF7A4D 100%);
  border-radius: 22px 22px 8px 8px;
  transform: rotate(-4deg);
}
.ebart-1::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 12px;
  background: #1A1A1A;
  border-radius: 4px 4px 2px 2px;
}
.ebart-1::after {
  content: "B";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
}
/* Center box — square, navy with brand foil */
.ebart-2 {
  width: 86px;
  height: 110px;
  background: linear-gradient(160deg, #1F2937 0%, #0A1F8F 100%);
  border-radius: 4px;
  transform: translateY(-4px);
  z-index: 2;
}
.ebart-2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
}
.ebart-2::after {
  content: "BRANDS";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fff;
}
/* Tube (right) — round top, lime tint */
.ebart-3 {
  width: 40px;
  height: 100px;
  background: linear-gradient(180deg, #C8FFC0 0%, #7AD96A 100%);
  border-radius: 4px 4px 18px 18px;
  transform: rotate(5deg);
}
.ebart-3::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 8px;
  background: #1A1A1A;
  border-radius: 2px 2px 6px 6px;
}
.ebart-3::after {
  content: "·";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #1F2937;
  font-weight: 900;
  line-height: 0;
}
.eco-brands:hover .ebart-1 { transform: rotate(-7deg) translateY(-4px); }
.eco-brands:hover .ebart-2 { transform: translateY(-12px); }
.eco-brands:hover .ebart-3 { transform: rotate(8deg) translateY(-4px); }

/* Brands eco-features — editorial mono labels with lime bullets */
.eco-brands .eco-features li .ic {
  background: rgba(122, 217, 106, 0.18);
  color: #15803D;
}
/* Brands CTA — editorial dark style */
.eco-brands .eco-cta-outline {
  background: #1A1A1A;
  color: #fff;
}
.eco-brands .eco-cta-outline .arrow-circ { background: var(--lime); color: #1A1A1A; }
.eco-brands .eco-cta-outline:hover { background: var(--brand-deep); }

/* ============================================================================
   ADUANEX — Argentina-only partner section (mid-page).
   Hidden by default; the i18n script sets data-locale on <html>.
   Green color scheme to highlight as a differentiated co-branded block.
   ============================================================================ */
.aduanex-section { display: none; }
/* STRICT Argentina-only — gated by data-locale="AR" exclusively. */
html[data-locale="AR"] .aduanex-section { display: block; }

/* ===== Aduanex brand palette =====
   Aduanex logo is dark/black background with white "ADUA" + lime "NEX".
   Section uses that identity: black bg + lime accents. */
.aduanex-section {
  --adx-bg-1: #050505;
  --adx-bg-2: #0F0F0F;
  --adx-bg-3: #161616;
  --adx-lime: #C9FF3A;            /* the bright lime of the "NEX" in the logo */
  --adx-lime-soft: #D8FF6E;
  --adx-text: #F5F5F5;
  --adx-text-mute: rgba(255,255,255,0.62);
  --adx-line: rgba(201,255,58,0.22);
  position: relative;
  padding: 96px 0 110px;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(201,255,58,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(201,255,58,0.06), transparent 65%),
    linear-gradient(180deg, var(--adx-bg-1) 0%, var(--adx-bg-2) 50%, var(--adx-bg-3) 100%);
  color: var(--adx-text);
  overflow: hidden;
}
/* Lime hairlines top + bottom */
.aduanex-section::before,
.aduanex-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--adx-lime) 30%, var(--adx-lime) 70%, transparent 100%);
  opacity: 0.55;
}
.aduanex-section::before { top: 0; }
.aduanex-section::after { bottom: 0; }

.adx-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .adx-grid { grid-template-columns: 1fr; gap: 36px; }
  .aduanex-section { padding: 64px 0 72px; }
}

.adx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--adx-lime);
  color: #050505;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.adx-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 0 0 3px rgba(5,5,5,0.18);
  animation: adx-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes adx-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(5,5,5,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(5,5,5,0); }
}

.adx-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--adx-text);
  margin: 0 0 18px;
}
.adx-h2 .accent {
  color: var(--adx-lime);
  position: relative;
  display: inline-block;
}
.adx-h2 .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 0.18em;
  background: linear-gradient(90deg, var(--adx-lime), var(--adx-lime-soft));
  border-radius: 2px;
  opacity: 0.6;
}

.adx-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--adx-text-mute);
  max-width: 56ch;
  margin: 0 0 28px;
}

.adx-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 14px;
}
.adx-feature {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.adx-feature .ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--adx-lime);
  color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(201,255,58,0.4);
}
.adx-feature .ic svg { width: 18px; height: 18px; }
.adx-feature .txt strong {
  display: block;
  color: var(--adx-text);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}
.adx-feature .txt span {
  display: block;
  color: var(--adx-text-mute);
  font-size: 14.5px;
  line-height: 1.5;
}

.adx-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.adx-cta-row .btn-adx {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--adx-lime);
  color: #050505;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 220ms cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 24px -8px rgba(201,255,58,0.45);
}
.adx-cta-row .btn-adx:hover {
  background: var(--adx-lime-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(201,255,58,0.55);
}
.adx-cta-row .btn-adx .arrow-circ {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #050505;
  color: var(--adx-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

/* RIGHT visual — co-branding card (matches Aduanex visual identity) */
.adx-card {
  position: relative;
  border-radius: 24px;
  padding: 36px 32px;
  background:
    linear-gradient(160deg, #0F0F0F 0%, #1A1A1A 60%, #050505 100%);
  border: 1px solid var(--adx-line);
  color: var(--adx-text);
  overflow: hidden;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.adx-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,255,58,0.16), transparent 60%);
  pointer-events: none;
}
.adx-card .partner-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(171,255,151,0.18);
}
.adx-card .partner-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--adx-lime);
  color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.adx-card .partner-logo.b2 { background: #fff; color: #0F1740; font-family: var(--font-display); }

/* Aduanex wordmark mini-logo — matches the brand: white "ADUA" + lime "NEX" on black */
.adx-card .adx-wordmark {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 14px;
  background: #050505;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  border: 1px solid rgba(201,255,58,0.25);
}
.adx-card .adx-wm-l { color: #F5F5F5; }
.adx-card .adx-wm-r { color: var(--adx-lime); }
.adx-card .partner-x {
  font-family: var(--font-mono);
  color: var(--adx-lime);
  font-size: 22px;
  font-weight: 700;
  opacity: 0.7;
}
.adx-card .partner-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--adx-text);
}
.adx-card .partner-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--adx-text-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.adx-card .partner-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
  margin-bottom: 22px;
}
.adx-card .partner-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--adx-lime);
  letter-spacing: -0.02em;
  line-height: 1;
}
.adx-card .partner-stat span {
  display: block;
  font-size: 13px;
  color: var(--adx-text-mute);
  margin-top: 6px;
  line-height: 1.4;
}
.adx-card .partner-quote {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  border-left: 3px solid var(--adx-lime);
  padding-left: 14px;
  font-style: italic;
}

/* ============================================================================
   ECOSISTEMA — Pro + App side by side (row 1) + Brands full-width shorter (row 2)
   Design: brand identity per product. Pro = navy/blue. App = red. Brands = neutral.
   ============================================================================ */
.eco-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 980px) {
  .eco-grid-2 { grid-template-columns: 1fr; gap: 20px; }
}

.eco-card-2 {
  position: relative;
  border-radius: 24px;
  padding: 36px 32px 28px;
  background: #fff;
  border: 1px solid var(--l-line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), border-color 320ms, box-shadow 320ms;
}
.eco-card-2:hover {
  transform: translateY(-4px);
  border-color: rgba(47,79,255,0.28);
  box-shadow: 0 32px 70px -24px rgba(10,37,64,0.18);
}

/* Pro card: deep navy blue identity */
.eco-card-2.eco-pro {
  background: linear-gradient(168deg, #0A1F8F 0%, #0F1740 60%, #061036 100%);
  color: #fff;
  border-color: rgba(111,139,255,0.25);
}
.eco-card-2.eco-pro:hover { border-color: rgba(171,255,151,0.45); }
.eco-card-2.eco-pro .eco-pro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(171,255,151,0.16), transparent 55%),
    radial-gradient(560px 320px at 0% 100%, rgba(47,79,255,0.45), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.eco-card-2.eco-pro > * { position: relative; z-index: 1; }

/* App card: white with subtle red accent (B2BOX App brand color) */
.eco-card-2.eco-app {
  background: linear-gradient(180deg, #fff 0%, #FFF8F8 100%);
}
.eco-card-2.eco-app .eco-app-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 280px at 100% 0%, rgba(220,38,38,0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.eco-card-2.eco-app > * { position: relative; z-index: 1; }

.eco-head-2 { display: flex; flex-direction: column; gap: 12px; }
.eco-card-2.eco-pro .eco-head-2 h3,
.eco-card-2.eco-pro .eco-sub-2 { color: inherit; }
.eco-card-2.eco-pro .eco-sub-2 { color: rgba(255,255,255,0.78); }

.eco-head-2 h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--l-text);
  margin: 0;
}
.eco-sub-2 {
  font-size: 15px;
  line-height: 1.55;
  color: var(--l-text-2);
  margin: 0;
  max-width: 52ch;
}

.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: fit-content;
}
.eco-badge-pro { background: var(--lime); color: #0F1740; }
.eco-badge-app { background: rgba(220,38,38,0.10); color: #DC2626; }
.eco-badge-brands { background: rgba(15,23,64,0.08); color: #0F1740; }

.eco-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eco-logo-img { height: 32px; width: auto; }
.eco-card-2.eco-pro .eco-logo-img {
  filter: brightness(0) invert(1);  /* white in dark card */
}

/* PRO wordmark — typographic mark, white "B2BOX" + lime "PRO" */
.eco-wm-pro {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 32px;
}
.eco-wm-pro .ewp-l { color: #fff; }
.eco-wm-pro .ewp-r { color: var(--lime); margin-left: 6px; font-size: 0.7em; padding: 2px 7px; background: rgba(171,255,151,0.12); border-radius: 6px; letter-spacing: 0.04em; }

.eco-features-2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.eco-features-2 li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--l-text);
}
.eco-features-2 li .ic {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(47,79,255,0.10);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.eco-card-2.eco-pro .eco-features-2 li { color: rgba(255,255,255,0.92); }
.eco-card-2.eco-pro .eco-features-2 li .ic {
  background: rgba(171,255,151,0.18);
  color: var(--lime);
}
.eco-card-2.eco-app .eco-features-2 li .ic {
  background: rgba(220,38,38,0.08);
  color: #DC2626;
}
.eco-card-2.eco-pro .eco-features-2 li strong { color: #fff; }

.eco-foot-2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--l-line);
}
.eco-card-2.eco-pro .eco-foot-2 { border-top-color: rgba(255,255,255,0.12); }

.eco-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 580px) {
  .eco-meta-row { grid-template-columns: 1fr; }
}
.eco-meta { display: flex; flex-direction: column; gap: 2px; }
.eco-meta-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-text-3);
}
.eco-card-2.eco-pro .eco-meta-k { color: rgba(255,255,255,0.55); }
.eco-meta-v {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--l-text);
  line-height: 1.4;
}
.eco-card-2.eco-pro .eco-meta-v { color: #fff; }

.eco-cta-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.eco-cta-2:hover {
  background: var(--brand-deep);
  transform: translateY(-1px);
}
.eco-cta-2 .arrow-circ {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eco-card-2.eco-pro .eco-cta-2 {
  background: var(--lime);
  color: #0F1740;
  box-shadow: 0 8px 24px -8px rgba(171,255,151,0.5);
}
.eco-card-2.eco-pro .eco-cta-2:hover {
  background: #c1ffae;
  box-shadow: 0 12px 32px -8px rgba(171,255,151,0.55);
}
.eco-card-2.eco-pro .eco-cta-2 .arrow-circ {
  background: rgba(15,23,64,0.18);
  color: #0F1740;
}

/* Brands wide row — same component but full-width and reduced height */
.eco-brands-wide {
  margin-top: 24px;
  padding: 28px 32px 24px;
  background: linear-gradient(170deg, #FAFCFF 0%, #F0F4FF 100%);
  border: 1px solid var(--l-line);
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.7fr;
  gap: 32px;
  align-items: center;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 980px) {
  .eco-brands-wide {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 24px;
  }
}
.eco-brands-wide .eco-brands-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.eco-brands-wide .eco-brands-art .ebart {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.eco-brands-wide .eco-brands-art .ebart-1 {
  width: 220px; height: 220px;
  top: -60px; right: 30%;
  background: rgba(122, 217, 106, 0.18);
}
.eco-brands-wide .eco-brands-art .ebart-2 {
  width: 180px; height: 180px;
  bottom: -50px; right: 8%;
  background: rgba(47, 79, 255, 0.10);
}
.eco-brands-wide .eco-brands-art .ebart-3 {
  width: 140px; height: 140px;
  top: 30%; left: -20px;
  background: rgba(171, 255, 151, 0.18);
}
.eco-brands-wide > * { position: relative; z-index: 1; }
.eco-brands-wide .eco-head-wide { gap: 10px; }
.eco-brands-wide .eco-head-wide h3 { font-size: 22px; }
.eco-brands-wide .eco-sub-2 { font-size: 14px; max-width: 48ch; }

.eco-features-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
@media (max-width: 580px) {
  .eco-features-wide { grid-template-columns: 1fr; }
}
.eco-features-wide li { font-size: 13.5px; }

.eco-foot-wide {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: none;
  padding-top: 0;
  align-items: flex-start;
}
.eco-foot-wide .eco-meta-k { font-size: 10px; }
.eco-foot-wide .eco-meta-v { font-size: 13px; }