/* Keep the block 2 photos at their natural ratio, without fixed-height blank space. */
#secao-2 img[class*="pv-imgh-"] {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 525px;
}
#secao-2 img[class*="pv-imgh-"][width="900"] { max-width: 825px; }
@media (max-width: 768px) {
  #secao-2 img[class*="pv-imgh-"] { max-width: 352.5px; }
  #secao-2 img[class*="pv-imgh-"][width="900"] { max-width: 375px; }
}

/* Let mockups follow their aspect ratio instead of reserving empty vertical space. */
#secao-1 img.pv-imgh-bnk7ra,
#secao-7 img.pv-imgh-1jrslsp,
#secao-9 img.pv-imgh-dvfdev,
#secao-9 img.pv-imgh-1m8z0hs {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  margin-left: auto;
  margin-right: auto;
}
#secao-1 img.pv-imgh-bnk7ra { max-width: 800px; }
#secao-7 img.pv-imgh-1jrslsp { max-width: 570px; margin-top: 16px; }
#secao-9 img.pv-imgh-dvfdev { max-width: 420px; }
#secao-9 img.pv-imgh-1m8z0hs { max-width: 440px; }
@media (max-width: 768px) {
  #secao-1 img.pv-imgh-bnk7ra { max-width: 410px; }
  #secao-7 img.pv-imgh-1jrslsp { max-width: 330px; }
  #secao-9 img.pv-imgh-dvfdev { max-width: 320px; }
  #secao-9 img.pv-imgh-1m8z0hs { max-width: 370px; }
}

/* Savings sit directly below each plan price, matching the reference. */
#secao-9 .text-center.mt-auto > p:last-child:has(strong) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

/* Tighten the carousel-to-heading gap without overlapping either section. */
#secao-2 > section { padding-bottom: 16px; }
#secao-3 > section { padding-top: 24px; }

/* Mobile viewport containment; carousel motion stays inside its own frame. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
#root { min-width: 0; max-width: 100%; }
#root section { min-width: 0; }
#root h1, #root h2, #root h3, #root p, #root a { overflow-wrap: break-word; }
@media (max-width: 480px) {
  #secao-9 .whitespace-nowrap { white-space: normal; text-align: center; max-width: calc(100% - 24px); }
  #secao-9 .grid > div { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mvt-marquee-wrap > div { animation: none !important; }
}