/* ══════════════════════════════════════════════════════════════
   BRITXIA — Sistema Responsive Completo
   Mobile-first · Breakpoints: 320/375/480/768/900/1024/1280/1440/1920
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Global resets ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box !important; }
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; max-width: 100vw !important; }
img, video, canvas { max-width: 100% !important; height: auto; }

/* ── 2. Typography — fluid scaling ───────────────────────────── */
.hero-title {
  font-size: clamp(34px, 8vw, 90px) !important;
  letter-spacing: clamp(-1px, -0.25vw, -2.5px) !important;
  line-height: 1.06 !important;
}
.hero-sub, .hero-close {
  font-size: clamp(14px, 2.2vw, 19px) !important;
}

/* ── 3. Hero section ──────────────────────────────────────────── */
@media (max-width: 900px) {
  #hero { padding: 108px 40px 72px !important; }
}
@media (max-width: 768px) {
  #hero {
    padding: 96px 28px 60px !important;
    min-height: 80vh !important;
  }
  .hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-btns a { text-align: center !important; }
}
@media (max-width: 480px) {
  #hero { padding: 86px 20px 52px !important; }
  .hero-title { font-size: clamp(30px, 10.5vw, 46px) !important; }
}
@media (max-width: 360px) {
  #hero { padding: 82px 16px 48px !important; }
  .hero-title { font-size: 28px !important; }
}

/* ── 4. Ecosystem header ─────────────────────────────────────── */
.bx-eco-header { padding: clamp(36px, 6vw, 72px) clamp(20px, 6vw, 64px) clamp(28px, 4vw, 52px) !important; }
@media (max-width: 768px) {
  .bx-eco-header h2 { font-size: clamp(24px, 7vw, 36px) !important; }
  .bx-eco-header p  { font-size: 14px !important; }
}

/* ── 5. Product rows — CORE responsive ───────────────────────── */
.prod-row { min-width: 0 !important; }

@media (max-width: 960px) {
  .prod-row, .prod-row.rev {
    display: flex !important;
    flex-direction: column !important;
  }
  .prod-content {
    order: 1 !important;
    padding: 48px 36px !important;
  }
  .prod-visual {
    order: 2 !important;
    padding: 28px !important;
    min-height: auto !important;
    overflow: hidden !important;
  }
}
@media (max-width: 768px) {
  .prod-content { padding: 40px 28px !important; }
  .prod-visual  { padding: 24px 16px !important; }

  /* Phone mockup container */
  .prod-visual-phone {
    min-height: 360px !important;
    max-height: 420px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }
  /* Laptop mockup container — scale to fit */
  .prod-visual-laptop {
    min-height: 240px !important;
    max-height: 280px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px 0 0 !important;
    overflow: hidden !important;
  }
  .bx-laptop-mk {
    transform: scale(0.52) !important;
    transform-origin: top center !important;
    animation: none !important;
  }
  .bx-phone-mk {
    animation: none !important;
  }
}
@media (max-width: 480px) {
  .prod-content { padding: 36px 20px !important; }
  .prod-visual  { padding: 12px 8px !important; }

  .prod-visual-phone {
    min-height: 310px !important;
    max-height: 360px !important;
  }
  .prod-visual-laptop {
    min-height: 195px !important;
    max-height: 235px !important;
  }
  .bx-laptop-mk { transform: scale(0.44) !important; }
  .bx-phone-mk  { transform: scale(0.88) !important; transform-origin: top center !important; }
}
@media (max-width: 390px) {
  .bx-laptop-mk { transform: scale(0.40) !important; }
  .bx-phone-mk  { transform: scale(0.82) !important; }
  .prod-visual-laptop { min-height: 180px !important; max-height: 210px !important; }
  .prod-visual-phone  { min-height: 285px !important; max-height: 330px !important; }
}
@media (max-width: 340px) {
  .bx-laptop-mk { transform: scale(0.36) !important; }
  .bx-phone-mk  { transform: scale(0.74) !important; }
  .prod-visual-laptop { min-height: 165px !important; max-height: 190px !important; }
  .prod-visual-phone  { min-height: 260px !important; max-height: 300px !important; }
}

/* Prod-content internal elements */
@media (max-width: 600px) {
  .prod-content h2 { font-size: clamp(26px, 7vw, 42px) !important; }
}

/* ── 6. About section ───────────────────────────────────────── */
.bx-about { padding: clamp(40px,6vw,72px) clamp(20px,6vw,64px) !important; }
@media (max-width: 600px) {
  .bx-about h2 { font-size: clamp(22px, 6.5vw, 32px) !important; }
}

/* ── 7. BRITXIA Tech section ─────────────────────────────────── */
.bx-btech { padding: clamp(44px,6.5vw,80px) clamp(20px,6vw,64px) !important; }
@media (max-width: 600px) {
  .btech-logo  { max-width: 240px !important; }
  .btech-title { font-size: 22px !important; }
  .btech-desc  { font-size: 14px !important; }
}

/* ── 8. Waitlist / Contact section ───────────────────────────── */
.bx-contacto { padding: clamp(16px,3vw,28px) clamp(16px,5vw,64px) clamp(48px,6vw,72px) !important; }
@media (max-width: 960px) {
  .waitlist-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 44px 40px !important;
  }
}
@media (max-width: 600px) {
  .waitlist-grid {
    padding: 36px 24px !important;
    gap: 28px !important;
    border-radius: 16px !important;
  }
}
@media (max-width: 480px) {
  .waitlist-grid {
    padding: 28px 20px !important;
    gap: 22px !important;
    border-radius: 12px !important;
  }
  .waitlist-grid select,
  .waitlist-grid input,
  .waitlist-grid textarea {
    font-size: 16px !important; /* prevent iOS auto-zoom */
  }
}

/* ── 9. Product pages — extra small screens ──────────────────── */
@media (max-width: 768px) {
  .pp-integ-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pp-integ-grid > div { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .pp-hero h1  { font-size: clamp(28px, 9.5vw, 40px) !important; }
  .bx-dev-float { transform: scale(0.82) !important; transform-origin: top center !important; }
}
@media (max-width: 375px) {
  .pp-hero { padding: 44px 18px 52px !important; }
  .pp-features, .pp-steps, .pp-integ, .pp-dl, .pp-close {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
@media (max-width: 340px) {
  .pp-hero { padding: 44px 14px 48px !important; }
  .pp-features, .pp-steps, .pp-integ, .pp-dl, .pp-close {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .pp-hero h1  { font-size: 26px !important; }
  .bx-dev-float { transform: scale(0.72) !important; }
}

/* ── 10. Decorative circles — contain on mobile ──────────────── */
@media (max-width: 768px) {
  /* Hero glow blob */
  #hero [style*="width:600"] {
    width: 90vw !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }
}

/* ── 11. Large screens ───────────────────────────────────────── */
@media (min-width: 1440px) {
  .prod-content { padding: 80px 72px !important; }
}
@media (min-width: 1920px) {
  #hero { padding: 160px 80px 120px !important; }
  .bx-eco-header { padding: 96px 80px 64px !important; }
}

/* ── 12. Input zoom prevention on iOS ────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ── 13. Safe area insets (notch/island phones) ──────────────── */
@supports (padding: env(safe-area-inset-left)) {
  nav {
    padding-left: max(24px, env(safe-area-inset-left)) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
  }
}