/* ==========================================================
   Planos (cards de oferta) – substitui as imagens 1POTE/3POTES/5POTES
   ========================================================== */

.planos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1160px;
  margin: 60px auto 30px;
  padding: 0 20px;
}

.plano-wrap { display: flex; flex-direction: column; }

/* Card */
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: #fff;
  border: 3px solid #111;
  border-radius: 16px;
  padding: 44px 16px 0;
  text-align: center;
  color: #111;
}

.plano--destaque { border-color: #ff2e2e; }

/* Selo de desconto */
.plano-selo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  color: #fff;
  font: 700 22px/1 "Open Sans", Arial, sans-serif;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.plano--destaque .plano-selo { background: #ff2e2e; }

/* Títulos */
.plano-titulo {
  font: 800 26px/1.15 "Open Sans", Arial, sans-serif;
  color: #111;
  margin: 0;
}

.plano-sub {
  display: block;
  font: 800 28px/1.15 "Open Sans", Arial, sans-serif;
  color: #ff2e2e;
  margin-top: 4px;
}

.plano-sub--neutro { color: #555; }

/* Imagem dos potes */
.plano-img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 0.9;
  object-fit: contain;
  margin: 16px auto 10px;
}

/* Faixa de frete grátis */
.plano-frete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #1a1a1a;
  color: #fff;
  font: 700 20px/1.1 "Open Sans", Arial, sans-serif;
  padding: 10px 12px;
  border-radius: 6px;
}

.plano-frete svg { flex: 0 0 auto; }

/* Preço */
.plano-parcelas {
  font: 700 22px/1 "Open Sans", Arial, sans-serif;
  margin: 26px 0 4px;
}

.plano-preco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.plano-seta { width: 44px; height: 104px; flex: 0 0 auto; }
.plano-seta--dir { transform: scaleX(-1); }

.plano-valor { display: flex; flex-direction: column; align-items: center; }

.plano-numero {
  display: flex;
  align-items: flex-start;
  color: #ff2e2e;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
}

.plano-numero .moeda   { font-size: 28px; margin-top: 8px; margin-right: 4px; }
.plano-numero .inteiro { font-size: 72px; letter-spacing: -2px; }
.plano-numero .centavos{ font-size: 30px; margin-top: 30px; }

.plano-vista {
  font: 700 13px/1.2 "Open Sans", Arial, sans-serif;
  color: #222;
  margin-top: 6px;
}

/* Botão */
.plano-btn {
  display: block;
  width: 88%;
  margin: 10px auto -26px;
  padding: 12px 10px 14px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #e80000 0%, #ff3a00 55%, #ffb300 100%);
  box-shadow: 0 4px 0 #b80000;
  color: #fff;
  font: italic 800 38px/1 "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
  animation: pulsar 1.5s infinite;
}

.plano:hover .plano-btn { filter: brightness(1.08); }

/* Aviso de parcelamento */
.plano-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 38px;
  font: 400 13px/1 "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: .3px;
  color: #666;
}

@media (prefers-reduced-motion: reduce) {
  .plano-btn { animation: none; }
}

/* Responsivo */
@media (max-width: 1100px) {
  .plano-titulo { font-size: 21px; }
  .plano-sub    { font-size: 23px; }
  .plano-selo   { font-size: 18px; }
  .plano-numero .inteiro { font-size: 60px; }
  .plano-btn    { font-size: 32px; }
}

/* Cards empilham antes de ficarem estreitos demais (era 767px) */
@media (max-width: 959px) {
  .planos {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 56px;
  }
}

/* ==========================================================
   Correção da rolagem lateral
   ========================================================== */

/* Rede de segurança: a página nunca rola para o lado */
html, body { max-width: 100%; overflow-x: clip; }

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Itens de grid podem encolher em vez de empurrar a página */
.planos > *,
.plano,
.grid-2 > *,
.grid-3 > *,
.grid-2-iguais > *,
.topo-grid > *,
.rodape-links .grid > *,
.rodape-selos .grid > * { min-width: 0; }

/* Títulos longos quebram em vez de vazar */
h2, h3, .plano-titulo, .plano-sub { overflow-wrap: break-word; }

/* Preço e setas se ajustam a cards estreitos */
.plano-numero .inteiro { font-size: clamp(48px, 14vw, 72px); }
.plano-seta { width: clamp(28px, 9vw, 44px); height: auto; aspect-ratio: 44 / 104; }

/* Selo de desconto não fica mais largo que o card */
.plano-selo { max-width: 92%; font-size: clamp(15px, 4.5vw, 22px); }

@media (max-width: 400px) {
  .planos { padding: 0 14px; }
  .plano { padding: 40px 10px 0; }
  .plano-btn { font-size: 30px; }
  .plano-frete { font-size: 17px; }
  .plano-aviso { font-size: 11px; }
}