/* =============================================================
   SELENIOR — Responsive overrides
   Tablet → Mobile (down to iPhone SE / 375px)
   Inline-style React app: target via [style*=] attribute selectors
   + tag fallbacks + !important.
   ============================================================= */

/* Global safety */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg { max-width: 100%; }

/* ---------- DESKTOP / SMALL DESKTOP — ≤1024px ---------- */
@media (max-width: 1024px) {
  section[style*="padding: 140px 56px"] { padding: 96px 40px !important; }
  section[style*="padding: 160px 56px"] { padding: 110px 40px !important; }
  footer[style*="padding: 80px 56px 36px"] { padding: 64px 40px 32px !important; }

  section#top > div[style*="padding: 180px 56px 0"] {
    padding: 140px 40px 0 !important;
    gap: 56px !important;
  }
  div[style*="grid-template-columns: 1.15fr 0.85fr"] {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 48px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"] {
    gap: 56px !important;
  }
  div[style*="grid-template-columns: 0.7fr 1.3fr"] {
    grid-template-columns: 0.6fr 1.4fr !important;
    gap: 56px !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* ---------- TABLET PORTRAIT — ≤860px ---------- */
@media (max-width: 860px) {
  section[style*="padding: 140px 56px"] { padding: 80px 28px !important; }
  section[style*="padding: 160px 56px"] { padding: 88px 28px !important; }
  footer[style*="padding: 80px 56px 36px"] { padding: 56px 28px 28px !important; }

  section#top > div[style*="180px 56px 0"] {
    padding: 120px 28px 0 !important;
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }

  /* All 2-col grids → 1 column */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1.15fr 0.85fr"],
  div[style*="grid-template-columns: 0.85fr 1.15fr"],
  div[style*="grid-template-columns: 0.7fr 1.3fr"],
  div[style*="grid-template-columns: 1.05fr 0.95fr"],
  div[style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  div[style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }

  /* Tighten redundant margins on section-header rows */
  div[style*="margin-bottom: 80px"][style*="grid-template-columns"],
  div[style*="margin-bottom: 72px"][style*="grid-template-columns"],
  div[style*="margin-bottom: 64px"][style*="grid-template-columns"] {
    margin-bottom: 44px !important;
  }

  /* Tablet typography (intermediate scale) — tag level, catches all variants */
  h1 {
    font-size: clamp(2.4rem, 6vw, 3.25rem) !important;  /* 38.4px → 52px */
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    text-wrap: balance !important;
  }
  h2 {
    font-size: clamp(1.95rem, 4.6vw, 2.4rem) !important;  /* 31px → 38.4px */
    line-height: 1.1 !important;
    letter-spacing: -0.018em !important;
    text-wrap: balance !important;
  }
  h3 {
    font-size: clamp(1.45rem, 3.6vw, 1.75rem) !important;  /* 23px → 28px */
    line-height: 1.12 !important;
    text-wrap: balance !important;
  }
  p[style*="font-size: 19px"] { font-size: 17px !important; }
  p[style*="font-size: 17px"] { font-size: 16px !important; }

  *[style*="font-size: 30px"][style*="Instrument Serif"] {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* Diagnostic panel padding */
  div[style*="padding: 32px 32px 28px"] { padding: 24px !important; }

  /* Method intro row stack */
  div[style*="grid-template-columns: auto 1fr"][style*="padding: 44px 0"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Nav: hide menu links */
  nav.se-nav-links { display: none !important; }

  /* FAQ sticky sidebar — release */
  div[style*="position: sticky"][style*="top: 100px"] { position: static !important; }

  /* Funnel mini-numbers shrink */
  div[style*="font-size: 22px"][style*="Clash Display"] { font-size: 18px !important; }

  /* Big calculator hero number — covers all big Clash sizes */
  div[style*="Clash Display"][style*="font-size: 88px"],
  div[style*="Clash Display"][style*="font-size: 80px"],
  div[style*="Clash Display"][style*="font-size: 72px"],
  div[style*="Clash Display"][style*="font-size: 64px"] { font-size: 56px !important; }
}

/* ============================================================
   MOBILE — ≤640px  (iPhone SE 375, iPhone 14 390, etc.)
   Strict design specs:
   - Section padding vertical max 64px
   - Margem lateral global 20px
   - H1 max 2.8rem = 44.8px, H2 2rem = 32px
   - Eyebrow → H: 12px; H → p: 20px; p → CTA: 32px
   - Button min-height 52px, padding-horiz 24px, full-width stacked
   - Big numbers max 3rem
   ============================================================ */
@media (max-width: 640px) {
  /* Section paddings */
  section[style*="padding: 140px 56px"] { padding: 64px 20px !important; }
  section[style*="padding: 160px 56px"] { padding: 64px 20px !important; }
  footer[style*="padding: 80px 56px 36px"] { padding: 48px 20px 28px !important; }

  /* HERO */
  section#top {
    min-height: auto !important;
    padding-bottom: 48px !important;
  }
  section#top > div[style*="180px 56px 0"] {
    padding: 96px 20px 0 !important;
    gap: 40px !important;
    grid-template-columns: 1fr !important;
  }

  /* === HEADLINES — tag-level rules catch all inline font-size variants === */
  h1 {
    font-size: clamp(2rem, 7vw, 2.6rem) !important;   /* 32px → 41.6px */
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin-top: 12px !important;
    text-wrap: balance !important;
  }
  h2 {
    font-size: clamp(1.65rem, 5.4vw, 2rem) !important;  /* 26.4px → 32px */
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    margin-top: 12px !important;
    text-wrap: balance !important;
  }
  h3 {
    font-size: clamp(1.25rem, 4.2vw, 1.5rem) !important;  /* 20px → 24px */
    line-height: 1.18 !important;
    margin-top: 12px !important;
    text-wrap: balance !important;
  }

  /* Eyebrows — tighten and normalize */
  div[style*="letter-spacing: 0.14em"][style*="text-transform: uppercase"],
  div[style*="letter-spacing: .14em"][style*="text-transform: uppercase"],
  div[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"],
  div[style*="letter-spacing: .12em"][style*="text-transform: uppercase"] {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    font-weight: 500 !important;
  }

  /* Lead/body paragraphs — consistent rhythm */
  p[style*="font-size: 19px"] {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-top: 20px !important;
  }
  p[style*="font-size: 17px"] {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-top: 20px !important;
  }
  p[style*="font-size: 16px"] {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Italic pull quotes — never exceed sans paragraph */
  *[style*="font-size: 30px"][style*="Instrument Serif"] {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  *[style*="font-size: 36px"][style*="Instrument Serif"] {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  *[style*="font-size: 42px"][style*="Instrument Serif"] {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  /* === GRIDS — collapse remaining multi-col === */
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }

  /* Hero KPI row stacks */
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-bottom"] > div {
    border-right: none !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-bottom"] > div + div {
    padding-top: 16px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(234,236,224,.10) !important;
  }

  /* Comparison table 3-col → stacked */
  div[style*="grid-template-columns: 1fr 100px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(26,35,43,.10) !important;
  }
  div[style*="grid-template-columns: 1fr 100px 1fr"] > div:nth-child(2) {
    text-align: left !important;
    opacity: 0.55 !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  /* === Inline CTAs (between sections) === */
  .se-inline-cta {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .se-inline-cta > div:last-child { width: 100% !important; }

  /* === COLLAPSED GRIDS — kill desktop column offsets ===
     Cells in repeat(3/4/5, 1fr) grids carry inline paddingLeft/paddingRight/
     borderRight that create staircase indents when grids stack to 1-col on
     mobile. Reset them, then add a uniform top divider between rows. */
  div[style*="grid-template-columns: repeat(3, 1fr)"] > div,
  div[style*="grid-template-columns: repeat(4, 1fr)"] > div,
  div[style*="grid-template-columns: repeat(5, 1fr)"] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
  }
  /* Light-surface dividers (Problems, Platform, manifesto stats) */
  section#problema div[style*="grid-template-columns: repeat(3, 1fr)"] > div + div,
  section#plataforma div[style*="grid-template-columns: repeat(4, 1fr)"] > div + div {
    border-top: 1px solid rgba(26,35,43,.10) !important;
  }
  /* Dark-surface dividers (Method, Manifesto, Transformation) */
  section#metodo div[style*="grid-template-columns: repeat(5, 1fr)"] > div + div,
  section#manifesto div[style*="grid-template-columns: repeat(3, 1fr)"] > div + div {
    border-top: 1px solid rgba(234,236,224,.10) !important;
  }
  /* Fallback for any remaining stacked cells */
  div[style*="grid-template-columns: repeat(3, 1fr)"] > div + div,
  div[style*="grid-template-columns: repeat(4, 1fr)"] > div + div,
  div[style*="grid-template-columns: repeat(5, 1fr)"] > div + div {
    border-top-style: solid;
    border-top-width: 1px;
  }

  /* Hero diagnostic funnel — 4-col stacks, tighten vertical padding */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0px"] > div {
    padding-top: 18px !important;
    padding-bottom: 4px !important;
    border-top: 1px solid rgba(234,236,224,.10) !important;
  }
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0px"] > div:first-child {
    border-top: none !important;
    padding-top: 4px !important;
  }

  /* 2-col grid cells (Transformation antes/depois, hero KPI, etc.) —
     reset inline lateral paddings and borderRight when collapsed */
  div[style*="grid-template-columns: 1fr 1fr"] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
    border-left: none !important;
  }

  /* === BUTTONS / CTAs === */
  /* All BtnPrimary/Ghost variants: min 52px height, 24px horiz, full-width when stacked */
  a[style*="padding: 13px 22px"],
  a[style*="padding: 12px 22px"],
  a[style*="padding: 16px 28px"],
  button[style*="padding: 13px 22px"],
  button[style*="padding: 12px 22px"],
  button[style*="padding: 16px 28px"] {
    min-height: 52px !important;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 15px !important;
  }
  /* CTA button containers — make them stack and align uniformly */
  div[style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  /* But the nav's CTA in header should not be full width — already hidden */

  /* === DATA / METRIC CARDS === */
  /* Big numbers max 3rem — covers all Clash Display sizes ≥ 56 */
  div[style*="Clash Display"][style*="font-size: 88px"],
  div[style*="Clash Display"][style*="font-size: 80px"],
  div[style*="Clash Display"][style*="font-size: 72px"],
  div[style*="Clash Display"][style*="font-size: 64px"],
  div[style*="Clash Display"][style*="font-size: 56px"] {
    font-size: 3rem !important;   /* 48px cap */
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
  }
  div[style*="Clash Display"][style*="font-size: 32px"] {
    font-size: 26px !important;
  }
  div[style*="Clash Display"][style*="font-size: 26px"] {
    font-size: 22px !important;
  }
  div[style*="Clash Display"][style*="font-size: 22px"] {
    font-size: 20px !important;
  }
  /* Metric/card label uppercase 10px */
  div[style*="font-size: 10.5"][style*="text-transform: uppercase"],
  div[style*="font-size: 11"][style*="text-transform: uppercase"] {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  /* Diagnostic panel padding tighten further */
  div[style*="padding: 32px 32px 28px"],
  div[style*="padding: 24px 24px 22px"],
  div[style*="padding: 24px"] {
    padding: 20px !important;
  }

  /* Diagnostic chart svg cap */
  div[style*="border-radius: 14px"][style*="background: rgba(15,21,26"] svg { height: 130px !important; }

  /* Floating WhatsApp */
  a[href*="wa.me"][style*="position: fixed"] {
    right: 16px !important;
    bottom: 16px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    min-height: 0 !important;     /* override the 52px button rule */
    width: auto !important;
  }
  a[href*="wa.me"][style*="position: fixed"] .se-wa-label { display: none !important; }

  /* === NAV === */
  header[style*="position: fixed"][style*="z-index: 50"] {
    padding: 16px 20px !important;
    min-height: 60px !important;
  }
  header[style*="position: fixed"] img[alt="Selenior"] { height: 18px !important; }

  /* Calculator slider blocks */
  div[style*="grid-template-columns: 1.05fr 0.95fr"] { gap: 32px !important; }
  div[style*="grid-template-columns: 1.1fr 0.9fr"] { gap: 32px !important; }

  /* Calculator inner card padding */
  div[style*="padding: 56px"][style*="border-radius: 18"] {
    padding: 28px 20px !important;
  }

  /* Section-header pair tightened */
  div[style*="margin-bottom: 80px"][style*="grid-template-columns"],
  div[style*="margin-bottom: 72px"][style*="grid-template-columns"],
  div[style*="margin-bottom: 64px"][style*="grid-template-columns"] {
    margin-bottom: 32px !important;
  }

  /* Reduce KPI row paddings */
  div[style*="grid-template-columns: 1fr 1fr"][style*="padding-top: 18px"] {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Image cards — restrain shadows that bleed off canvas */
  div[style*="box-shadow"][style*="-24px"] { box-shadow: 0 18px 40px -16px rgba(15,21,26,.45) !important; }
}

/* ---------- iPHONE SE — ≤380px ---------- */
@media (max-width: 380px) {
  section[style*="padding: 140px 56px"] { padding: 56px 18px !important; }
  section[style*="padding: 160px 56px"] { padding: 56px 18px !important; }
  section#top > div[style*="180px 56px 0"] {
    padding: 88px 18px 0 !important;
  }
  footer[style*="padding: 80px 56px 36px"] { padding: 44px 18px 24px !important; }

  h1 { font-size: clamp(1.85rem, 8vw, 2.25rem) !important; }
  h2 { font-size: clamp(1.5rem, 6.2vw, 1.75rem) !important; }
  h3 { font-size: 1.25rem !important; }

  div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- PRINT-SAFE small-screen affordances ---------- */
@media (max-width: 640px) {
  /* Ensure nothing positioned absolutely escapes the viewport in narrow widths */
  *[style*="position: absolute"][style*="right: -"],
  *[style*="position: absolute"][style*="left: -"] {
    display: none !important;
  }
}