/* Mobile optimization layer — desktop layout remains unchanged. */
@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    max-width: 100%;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  /* Keep the mobile page focused: these are duplicate injected versions. */
  #guia-para-ti-section,
  #inversion-section {
    display: none !important;
  }

  /* The original bundle adds the same counter immediately after the
     identified counter. Keep one copy only on phones. */
  #page-counter-badge + div {
    display: none !important;
  }

  /* Use the complete injected table (it includes Bônus 3) and remove the
     older incomplete copy from the mobile flow. */
  section.py-20.bg-black:has(table) {
    display: none !important;
  }

  #inversion-section {
    display: block !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #inversion-section > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #inversion-section > div > div {
    padding: 1.5rem 1rem !important;
    border-radius: 1.25rem !important;
  }

  /* Compact the large desktop rhythm without making the page feel cramped. */
  section.py-24,
  section.py-20,
  section[class*="py-24"],
  section[class*="py-20"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  section[class*="py-16"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  section[class*="py-28"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .container,
  [class*="max-w-"] {
    width: 100% !important;
    max-width: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero: preserve the visual impact while avoiding a tall first screen. */
  section.min-h-screen {
    min-height: 0 !important;
    height: auto !important;
  }

  section.min-h-screen > .relative.z-10 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* The ebook showcase is 340px wide in the desktop bundle; make it fluid
     on the smallest supported phones. */
  section:has(img[src*="ebook-mockup"]) div.relative.mx-auto {
    width: 100% !important;
    max-width: 100% !important;
  }

  section:has(img[src*="ebook-mockup"]) img[src*="ebook-mockup"] {
    width: 100% !important;
    height: auto !important;
  }

  section h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.08 !important;
  }

  section h2 {
    font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
    line-height: 1.15 !important;
  }

  section h3 {
    line-height: 1.2 !important;
  }

  /* Prevent long Portuguese words and price labels from breaking the viewport. */
  p,
  li,
  td,
  th,
  h1,
  h2,
  h3,
  h4,
  a,
  span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Bonus cards: comfortable touch width and tighter vertical density. */
  .premium-bonus-section > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .premium-bonus-section > div > div:first-child {
    margin-bottom: 1.5rem !important;
  }

  .premium-bonus-section > div > div:nth-child(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .bonus-card {
    min-width: 0 !important;
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  .bonus-card img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  .bonus-card p {
    font-size: 0.88rem !important;
  }

  .bonus-card h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Offer card and CTAs. */
  #offer > .container,
  #offer > div[class*="container"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #offer .rounded-3xl,
  #offer [class*="rounded-3xl"] {
    border-radius: 1.25rem !important;
  }

  #offer a[href*="kirvano.com"] {
    display: flex !important;
    width: 100% !important;
    min-height: 3.25rem !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.9rem 1rem !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  .trust-badges-container {
    width: 100% !important;
    margin-top: 1rem !important;
  }

  /* Pricing table: readable two-column layout at 320px and above. */
  section#inversion-section table,
  section[id="inversion-section"] table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 0.78rem !important;
    display: table !important;
  }

  section#inversion-section td,
  section[id="inversion-section"] td {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    vertical-align: top !important;
    display: table-cell !important;
  }

  section#inversion-section tr,
  section[id="inversion-section"] tr {
    display: table-row !important;
  }

  section#inversion-section td:first-child,
  section[id="inversion-section"] td:first-child {
    width: 70% !important;
    padding-right: 0.65rem !important;
  }

  section#inversion-section td:last-child,
  section[id="inversion-section"] td:last-child {
    width: 30% !important;
    white-space: nowrap !important;
    font-size: 0.76rem !important;
  }

  /* FAQ and long-form blocks. */
  section details,
  section [role="button"] {
    max-width: 100% !important;
  }

  /* Keep decorative layers from creating invisible scroll areas. */
  section[class*="overflow-hidden"],
  section[class*="overflow-hidden"] > * {
    max-width: 100vw !important;
  }

  /* Avoid accidental horizontal overflow from third-party badges/icons. */
  .trust-badges-container > div {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}