/* ============================================================
   B2BOX Pro — Mobile / Tablet overrides
   ============================================================
   Loaded AFTER home-light.css, pages.css, empresa.css, globals.css
   so it cascades correctly. Targets:
     - iPhone SE/8           375px
     - iPhone 14/15          390px
     - iPhone Pro Max        428–430px
     - iPad Mini portrait    768px
     - iPad / iPad Pro 11    810–834px
     - iPad Pro 12.9 portr.  1024px
     - All landscape orientations
   Apple HIG min hit area: 44×44pt
   ============================================================ */


/* ====================================================
   1. iOS-specific resets — apply at all viewport sizes
   ==================================================== */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a, button, [role="button"], .btn, .menu-trigger, .country-select,
.faq-q, .pillar-card, .lh-cov-chip, .footer-col a, .nav a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
/* iOS Safari sticky/fixed quirk — force GPU layer */
.site-header {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Honor reduced motion globally for any animations not yet covered */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Disable hover state on touch devices (prevents stuck-on-tap) */
@media (hover: none) and (pointer: coarse) {
  a:hover, button:hover, .btn:hover, .pillar-card:hover,
  .proof-tile:hover, .lh-metric:hover, .lh-cov-chip:hover,
  .country-select:hover, .footer-col a:hover, .nav a:hover,
  .pillar-card:hover, .pillar-card:hover::before {
    transform: none !important;
    background: revert;
  }
  .btn-primary:hover { transform: none !important; box-shadow: 0 0 0 0 var(--accent-glow); }
  .pillar-card:hover { transform: none; }
  .proof-tile:hover { transform: none; }
  .lh-metric:hover { transform: none; box-shadow: none; }
  .lh-cov-chip:hover { transform: none; }
}


/* ====================================================
   2. Hamburger drawer (always loaded, hidden on desktop)
   ==================================================== */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: #fff;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
  box-shadow: -16px 0 40px -8px rgba(10, 37, 64, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer[data-open="true"] {
  transform: translateX(0);
}
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 37, 64, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms;
}
.mobile-drawer-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}
.mobile-drawer-head img {
  height: 32px;
  width: auto;
}
.mobile-drawer-close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(10, 37, 64, 0.04);
  border: 1px solid rgba(10, 37, 64, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0A2540;
}
.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 24px;
}
.mobile-drawer nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 16px;
  font-family: var(--font-display, 'Inter Tight', sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #0A2540;
  border-radius: 12px;
  transition: background 180ms;
}
.mobile-drawer nav a:active,
.mobile-drawer nav a.active {
  background: rgba(47, 79, 255, 0.08);
  color: #2F4FFF;
}
.mobile-drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  background: #2F4FFF;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin-top: auto;
  box-shadow: 0 6px 16px rgba(47, 79, 255, 0.32);
}
.mobile-drawer-country {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(10, 37, 64, 0.08);
  background: rgba(10, 37, 64, 0.02);
  font-size: 14px;
  color: #425466;
  margin-bottom: 16px;
  cursor: pointer;
  width: 100%;
}
.mobile-drawer-country .cp-flag { font-size: 18px; }
.mobile-drawer-country .cp-label { flex: 1; text-align: left; }

/* Hide drawer on desktop */
@media (min-width: 1025px) {
  .mobile-drawer,
  .mobile-drawer-backdrop { display: none !important; }
}

/* Lock body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
  touch-action: none;
}


/* ====================================================
   3. iPad portrait (768–1023px)
   ==================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Container generous padding */
  .container {
    padding: 0 24px;
  }

  /* Hero adjustments */
  .lh-h1 {
    font-size: clamp(48px, 9vw, 92px) !important;
    letter-spacing: -0.04em;
  }
  .lh-h1 .h1-line-single { white-space: normal !important; }
  .lh-hero .inner { padding: 80px 0 60px; }

  /* Hero static sub */
  .hero-static-sub {
    font-size: clamp(20px, 3vw, 28px);
  }

  /* Pillars row — 2 rows on iPad portrait so cards are bigger */
  .hero-pillars-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .pillar-card {
    flex: 1 1 30%;
    min-width: 130px;
    max-width: 200px;
  }
  .pillar-plus { display: none !important; }
  .hero-frame {
    padding: 28px 24px 32px;
  }

  /* Comparison 3-col → keep 1 col stacked (already handled by 1080px breakpoint) */

  /* Metrics 4-col → 2-col (already handled at 900px) */
  .lh-metrics { grid-template-columns: repeat(2, 1fr); }
  .lh-metric .v { font-size: 52px; }

  /* Coverage stage → 1 col stacked */
  .lh-cov-stage { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }

  /* Trust pillars — 2 columns */
  .lhpt-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px 0;
  }
  .lhpt-row::before { display: none; }
  .lhpt-block { padding: 16px 8px; }
  .lhpt-value { white-space: normal; }

  /* CTA hero buttons full-width on tablet */
  .lh-ctas { gap: 12px; flex-wrap: wrap; justify-content: center; }
  .lh-ctas .btn-brand,
  .lh-ctas .btn-outline { min-height: 52px; }

  /* H2 spotlight + eslabones */
  .eslabones-h2 { white-space: normal !important; }

  /* Pages: form */
  .form-shell { padding: 36px 28px; }

  /* Coverage map — preserve interactivity but ensure pin hit area is large enough */
  .lh-cov-pin circle { r: 8; }

  /* China stats */
  .china-stats { grid-template-columns: repeat(2, 1fr); }

  /* Yiwu/Futian blocks — already stacked at 900px */
}


/* ====================================================
   4. iPad landscape (1024–1279px)
   ==================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container { padding: 0 28px; }
  .lh-h1 { font-size: clamp(60px, 8vw, 104px); }
  .hero-pillars-row { gap: 6px; }
  .pillar-card { padding: 16px 8px; }
  .pillar-plus { padding-top: 50px; }

  /* iPad landscape hover-supports check */
  @media (hover: none) {
    .pillar-card:hover { transform: none; }
  }
}


/* ====================================================
   5. Phone landscape and small tablet (≤768px)
   ==================================================== */
@media (max-width: 768px) {
  /* Tighter container padding */
  .container { padding: 0 16px; }
  body.light-home .site-header .container.inner {
    width: calc(100% - 16px);
    padding: 8px 8px 8px 18px;
  }

  /* ==== Header on mobile ==== */
  /* Hide desktop nav, country picker, and CTA — drawer takes over */
  body.light-home .site-header .nav,
  body.light-home .site-header .country-picker,
  body.light-home .site-header .header-cta {
    display: none !important;
  }
  /* Show menu trigger; ensure 44px hit target */
  body.light-home .site-header .menu-trigger {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(10, 37, 64, 0.08);
  }

  /* ==== Hero ==== */
  .lh-hero { min-height: auto; padding-top: 24px; padding-bottom: 24px; }
  .lh-hero .inner { padding: 80px 0 40px; }
  .lh-h1 {
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-top: 16px;
  }
  .lh-h1 .h1-line-single { white-space: normal !important; }
  .lh-bgmark { font-size: clamp(54px, 18vw, 110px); bottom: 6%; }
  .hero-static-sub { font-size: 17px; line-height: 1.35; padding: 0 4px; }
  .hero-frame {
    margin: 24px auto 0;
    padding: 18px 14px 22px;
    border-radius: 18px;
  }
  .china-han { font-size: 0.22em; right: -0.36em; }

  /* Hero pillars: stack into 1 column flow on phones, with smaller icons */
  .hero-pillars-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 0 4px;
    margin-top: 18px;
  }
  .pillar-card {
    flex: 1 1 30%;
    min-width: 90px;
    max-width: 130px;
    padding: 12px 6px;
    gap: 8px;
  }
  .pillar-anim {
    width: 56px;
    height: 56px;
  }
  .pillar-card h4 { font-size: 13px; line-height: 1.15; }
  .pillar-num { font-size: 9px; }
  .pillar-plus { display: none !important; }
  .pillar-final-block { margin-top: 14px; }
  .finale-text { font-size: 17px !important; }

  /* CTAs — wider tap targets, centered */
  .lh-ctas {
    gap: 10px;
    margin-top: 28px;
    margin-bottom: 36px;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8px;
  }
  .lh-ctas .btn-brand,
  .lh-ctas .btn-outline {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 15px;
  }

  /* Trust pillars — 2x2 grid, no horizontal connector line */
  .lh-pillars-trust { padding: 0 8px; margin-top: 32px; }
  .lhpt-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 0;
    padding: 16px 0;
  }
  .lhpt-row::before { display: none; }
  .lhpt-block {
    padding: 12px 4px;
    grid-template-rows: auto 12px auto;
  }
  .lhpt-block::before {
    width: 10px;
    height: 10px;
  }
  .lhpt-label { font-size: 9px; }
  .lhpt-value { font-size: 12px; white-space: normal; line-height: 1.3; }

  /* ==== Section padding ==== */
  .lh-section, .section { padding: 56px 0; }

  /* ==== Comparison 3-col → already 1 col at 1080px ==== */
  .cmp-col {
    padding: 24px 18px 22px;
    min-height: auto;
    margin-bottom: 16px;
  }
  .cmp-col.is-popular { transform: none; }
  .cmp-col h3 { font-size: 19px; }

  /* ==== Coverage stage → already 1 col at 1000px. Make panel mobile-friendly. ==== */
  .lh-cov-stage { gap: 16px; }
  .lh-cov-mapwrap { padding: 12px; min-height: 280px; }
  .lh-cov-map { min-height: 260px; }
  .lh-cov-panel { padding: 18px; min-height: auto; }
  .lh-cov-panel-header .flag { font-size: 36px; }
  .lh-cov-panel-header .cname { font-size: 22px; }

  /* Coverage map pins — bigger hit target via pseudo-element */
  .lh-cov-pin {
    cursor: pointer;
    /* SVG pins can't have html hit areas via CSS easily; we boost stroke r */
  }
  .lh-cov-pin circle { r: 9; }
  /* Mobile country list (alt to interactive map) */
  .lh-cov-mobile-list {
    display: none;
  }

  /* ==== Coverage chips — bigger ==== */
  .lh-cov-chip {
    padding: 10px 14px;
    min-height: 40px;
    font-size: 12px;
  }

  /* ==== Metrics 4-col → 1-col on phone ==== */
  .lh-metrics { grid-template-columns: 1fr; gap: 12px; }
  .lh-metric { padding: 24px; }
  .lh-metric .v { font-size: 48px; }
  .lh-metric .l { font-size: 13px; max-width: none; }

  /* ==== Modalities ==== */
  .lh-modalities {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 12px;
  }
  .modalities { grid-template-columns: 1fr; gap: 12px; }

  /* ==== Eslabones / lh-eyebrow-2 ==== */
  .lh-eyebrow-2 { font-size: 11px !important; padding: 0 8px; }
  .eslabones-h2 {
    font-size: clamp(26px, 7vw, 38px) !important;
    white-space: normal !important;
    text-align: center;
  }
  .eh-prefix { display: inline; }

  /* ==== H2 generic ==== */
  .lh-h2, h2.lh-h2 {
    font-size: clamp(28px, 7.4vw, 44px);
    line-height: 1.1;
  }

  /* ==== Pillars (3-step grid) ==== */
  .lh-pillars { grid-template-columns: 1fr !important; gap: 12px; }
  .lh-how-steps { grid-template-columns: 1fr !important; gap: 12px; }

  /* ==== Proof grid → 1 col ==== */
  .lh-proof-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 12px;
    margin-top: 28px;
  }
  .proof-tile { padding: 18px; }
  .proof-tile.lg { grid-row: span 1; }
  .proof-tile .pt-bg { opacity: 0.18; }
  .proof-tile.lg .pt-bg { opacity: 0.18; }
  .proof-tile .ph-meta h4 { font-size: 18px; }
  .proof-tile.lg.brand .ph-meta h4 { font-size: 24px; max-width: 100%; }

  /* China stats */
  .china-stats { grid-template-columns: 1fr 1fr; }
  .yiwu-stats-mini { grid-template-columns: 1fr 1fr; }

  /* ==== Final CTA section ==== */
  .lh-cta { padding: 80px 0; }
  .lh-cta h2 { font-size: clamp(34px, 8vw, 56px); margin-bottom: 20px; }
  .lh-cta p { font-size: 16px; margin-bottom: 32px; padding: 0 12px; }
  .lh-cta .btn-white {
    padding: 16px 24px;
    font-size: 15px;
    width: calc(100% - 32px);
    max-width: 340px;
    justify-content: center;
  }

  /* ==== Footer ==== */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-col a { min-height: 32px; display: inline-flex; align-items: center; }
  body.light-home .site-footer { padding: 64px 0 32px; }
  body.light-home .site-footer .container { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ==== Forms (cotizar.html) ==== */
  .form-shell {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .form-step h2 { font-size: 22px; }
  .form-step .desc { font-size: 13px; }
  .form-row { margin-bottom: 18px; }
  .input, .select, .textarea {
    font-size: 16px !important; /* prevent iOS auto-zoom */
    padding: 14px 14px;
    min-height: 52px;
  }
  .textarea { min-height: 120px; }
  .radio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .radio-card {
    padding: 14px 10px;
    font-size: 13px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .form-nav {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .form-nav button,
  .form-nav .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
  .checkbox-row { font-size: 13px; line-height: 1.5; }
  .checkbox-row input { width: 22px; height: 22px; margin-top: 1px; }

  /* ==== FAQ accordion ==== */
  .faq-q {
    padding: 22px 0;
    font-size: 16px;
    gap: 16px;
    min-height: 64px;
  }
  .faq-q .icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .faq-a p { font-size: 14px; padding-bottom: 24px; }

  /* ==== Page hero ==== */
  .page-hero {
    padding: 120px 0 40px !important;
  }
  .page-hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .page-hero .lead { font-size: 16px; }

  /* ==== Cases / Empresa pages ==== */
  .cases-grid { grid-template-columns: 1fr; gap: 16px; }
  .case-block { grid-template-columns: 1fr; gap: 16px; }
  .case-results { grid-template-columns: 1fr 1fr; }
  .founders-grid { grid-template-columns: 1fr; gap: 18px; }
  .founder-card { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .umbrella-grid { grid-template-columns: 1fr; gap: 14px; }
  .press-grid { grid-template-columns: 1fr; gap: 12px; }
  .facts-list { grid-template-columns: 1fr 1fr; }

  /* ==== Tap targets — generic boost ==== */
  .nav a, .country-select { min-height: 44px; }
  .footer-col a { min-height: 36px; padding: 4px 0; }
  .btn { min-height: 44px; }

  /* ==== Reduce expensive animations ==== */
  /* Aurora — keep but throttle the iteration */
  .aurora-layer { animation-duration: 60s; opacity: 0.32; filter: blur(20px); }
  /* Big bgmark — slow down */
  .lh-bgmark { animation-duration: 40s; }
  /* Proof tile pt-bg already attenuated via opacity above */

  /* ==== Headline ribbons / spotlight ==== */
  .h2-spotlight::after { height: 2px; bottom: -4px; }
}


/* ====================================================
   6. Phone portrait — small phones (≤480px)
   ==================================================== */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  .lh-h1 {
    font-size: clamp(34px, 11vw, 50px) !important;
  }
  .hero-static-sub { font-size: 15px; }

  /* Pillars: keep 3 per row + 2 wrapped — but smaller */
  .pillar-card {
    min-width: 78px;
    padding: 10px 4px;
    gap: 6px;
  }
  .pillar-anim { width: 48px; height: 48px; }
  .pillar-card h4 { font-size: 12px; }

  /* Trust pillars 1 column on smallest devices */
  .lhpt-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lhpt-block {
    grid-template-rows: auto 12px auto;
    padding: 14px 4px;
  }
  .lhpt-value { font-size: 13px; }

  /* Hero CTAs - keep stacked */
  .lh-ctas { padding: 0 12px; }

  /* Cases / team */
  .team-grid { grid-template-columns: 1fr; }
  .case-results { grid-template-columns: 1fr; }
  .facts-list { grid-template-columns: 1fr; }
}


/* ====================================================
   7. Landscape orientation tweaks (short-height phones)
   ==================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .lh-hero { min-height: auto; }
  .lh-hero .inner { padding: 70px 0 30px; }
  .lh-h1 { font-size: clamp(32px, 6vw, 56px) !important; }
  .hero-frame { margin-top: 16px; padding: 16px 12px 18px; }
  .pillar-anim { width: 44px; height: 44px; }
  .pillar-card h4 { font-size: 11px; }
  .lh-pillars-trust { margin-top: 18px; }
}


/* ====================================================
   8. Safe-area handling — header / sticky footer / CTA
   ==================================================== */
body.light-home .site-header {
  padding-top: env(safe-area-inset-top, 0px);
}
body.light-home .site-header .container.inner {
  margin-top: 0;
}

/* ====================================================
   9. Performance hints
   ==================================================== */
@media (max-width: 768px) {
  /* Disable extra-expensive infinite animations on phones for battery */
  .pillar-card[data-anim] .anim-svg * {
    animation-duration: 5s !important;
  }
  /* Coverage map routes — reduce dash flow speed */
  .lh-cov-routes path.active { animation-duration: 2s; }
  /* Dim aurora more on phone */
  .aurora-bg { opacity: 0.6; }

  /* Reduce will-change usage that hurts mobile GPU */
  .aurora-layer { will-change: auto; }
  .lh-bgmark { will-change: auto; }
}

/* Allow long content scrolling areas to contain overscroll */
.country-menu, .mobile-drawer { overscroll-behavior: contain; }


/* ====================================================
  10. Accessibility — focus visibility on touch devices
   ==================================================== */
.btn:focus-visible,
.faq-q:focus-visible,
.pillar-card:focus-visible,
.mobile-drawer-close:focus-visible,
.menu-trigger:focus-visible,
.lh-cov-chip:focus-visible {
  outline: 2px solid #2F4FFF;
  outline-offset: 2px;
}

/* ============== Cobertura hint button — fix mobile squash ============== */
@media (max-width: 768px) {
  .lh-cov-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;          /* Stop forcing pill shape on small screens */
    line-height: 1.45;
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
  }
  .lh-cov-hint .hint-icon {
    flex-shrink: 0;
    margin-top: 1px;
  }
  .lh-cov-hint > span:not(.hint-icon) {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .lh-cov-hint { font-size: 12.5px; padding: 11px 12px; }
}