/* =========================
   HOTFIX MOBILE: impedir overflow
   ========================= */

/* 1) Segurança global contra scroll horizontal */
html, body {
  overflow-x: hidden !important;
  width: 100%;
}

/* 2) Nada pode exceder a viewport por acidente */
img, svg, video, canvas, iframe {
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* 3) Quebra de palavras longas (URLs/IDs) em qualquer texto */
h1, h2, h3, h4, h5, h6,
p, li, .subtitle, .faq-a, .price-list, .check span, .demo-tile, .badge, .btn {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Filhos flex e grid não podem forçar largura */
.container, .nav-inner, .actions, .brand,
.features, .pricing, .faq, .arch-grid, .hero-grid, .demo-grid,
footer .container {
  min-width: 0 !important; /* permite encolher */
}

/* 5) Header: permitir quebra e truncar textos compridos */
header.nav .nav-inner {
  flex-wrap: wrap;
  gap: 10px;
}

.brand, .actions {
  min-width: 0;
}

.brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.actions .badge, .actions .btn {
  max-width: 100%;
}

@media (max-width: 420px) {
  /* some o 2º selo em telas bem pequenas para evitar espremimento */
  .actions .badge:nth-of-type(2) { display: none; }
  .actions .btn { width: 100%; text-align: center; }
}

/* 6) HERO: impedir que o "glow" gere largura extra */
.hero { overflow: hidden; } /* já tinha, reforço */
.glow {
  position: absolute;
  top: -20vh;
  left: 50%;
  right: auto;               /* remove "right:0" implícito do inset */
  transform: translateX(-50%);
  width: min(90vw, 900px);
  height: min(70vh, 700px);
  pointer-events: none;
}

/* 7) Grids fluidos com minmax para não esmagar cartões */
.features,
.pricing,
.faq,
.demo-grid {
  display: grid;
  grid-template-columns: 1fr;          /* base mobile */
  gap: 16px;
}

@media (min-width: 580px) {
  .features    { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .pricing     { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .faq         { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .demo-grid   { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* 8) Arquitetura: mesma ideia de minmax para evitar espremidos */
.arch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px) {
  .arch-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* 9) Cartões: padding elástico não estoura */
.card, .price-card, .faq-card, .arch-card, .demo-card {
  padding: clamp(12px, 3.5vw, 24px);
  border-radius: clamp(12px, 3vw, 24px);
}

/* 10) Tipografia elástica segura */
.title {
  font-size: clamp(24px, 6vw, 36px);
}
.price-card .price-value {
  font-size: clamp(20px, 6vw, 28px);
}

/* 11) CTAs em largura total no mobile */
@media (max-width: 480px) {
  .price-cta, .btn { width: 100%; text-align: center; }
}

/* 12) Footer: quebra suave e sem empurrar a largura */
footer .container {
  flex-wrap: wrap;
  gap: 12px;
}
footer p {
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
}

/* 13) Safe areas (iOS) */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  header.nav .nav-inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}