/* Card de preço redesenhado (copy-revisada e succao-macia-enxuta).
   Imagem grande à esquerda + painel escuro à direita, com elementos flutuantes. */

.oferta2 {
  --painel: #2F4B59;
  --painel-texto: #E9F1F4;
  --painel-suave: #A9C2CE;
  --preco: #9BE3AE;
  position: relative;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 28px;
  box-shadow: 0 30px 70px -30px rgba(47, 75, 89, .55);
}

/* ---------- imagem ---------- */
.oferta2-media {
  position: relative;
  border-radius: 28px 0 0 28px;
  overflow: hidden;
  min-height: 100%;
  background: #BC9E94;
}
.oferta2-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* cartão flutuante com a lista do que ela recebe */
.oferta2-lista {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 34px -16px rgba(47, 75, 89, .6);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--f-head);
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue);
  max-width: 300px;
}
.oferta2-lista .rot { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 2px; }
.oferta2-lista span:not(.rot) { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.oferta2-lista span:not(.rot)::before {
  content: "";
  flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* selo de garantia saindo da borda */
.oferta2-garantia {
  position: absolute;
  left: -28px;
  bottom: -26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 18px;
  padding: 10px 16px 10px 10px;
  box-shadow: 0 18px 36px -14px rgba(47, 75, 89, .55);
  max-width: 260px;
}
.oferta2-garantia img { width: 52px; height: 52px; flex: 0 0 52px; }
.oferta2-garantia p { font-size: .82rem; line-height: 1.35; color: var(--text); }
.oferta2-garantia strong { display: block; font-family: var(--f-head); color: var(--blue); font-size: .95rem; }

/* ---------- painel (card de preço original, em branco) ---------- */
.oferta2-painel {
  background: var(--white);
  border-radius: 0 28px 28px 0;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

/* preço à vista em destaque */
.oferta2-painel .parcela-rotulo { font-size: .38em; font-weight: 700; letter-spacing: 0; }
.oferta2-painel .a-vista { font-size: 1.15rem; }

/* garantia com mais peso */
.oferta2-painel .selos { max-width: 400px; }
.garantia--forte {
  gap: 14px;
  padding: 14px 16px;
  background: #F4FAF5;
  border: 1.5px solid var(--check);
  border-radius: var(--radius-md);
}
.garantia--forte img { width: 78px; flex: 0 0 78px; }
.garantia--forte .garantia-titulo {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--green-text);
  text-wrap: balance;
  margin-bottom: 2px;
}
.garantia--forte p { font-size: .9rem; line-height: 1.4; }
.garantia--forte strong { color: var(--blue); }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .oferta2 { grid-template-columns: 1fr; border-radius: 22px; }
  .oferta2-media { border-radius: 22px 22px 0 0; aspect-ratio: 4 / 3; min-height: 0; }
  .oferta2 { background: var(--white); border-radius: 22px; }
  .oferta2-painel { border-radius: 0 0 22px 22px; padding: 30px 20px 26px; }
  /* no celular a lista cobriria o pacote; o selo "3 aulas + 4 bônus" do painel já resume */
  .oferta2-lista { display: none; }
  .garantia--forte { flex-direction: column; text-align: center; padding: 16px 16px 18px; }
  .garantia--forte img { width: 72px; flex-basis: auto; }
  /* celular: selo centralizado sobre a divisa entre a imagem e o painel */
  .oferta2 { display: flex; flex-direction: column; }
  .oferta2-media { order: 1; }
  .oferta2-garantia { order: 2; position: relative; left: auto; bottom: auto; margin: -34px auto -22px; padding: 8px 14px 8px 8px; max-width: 250px; }
  .oferta2-painel { order: 3; padding-top: 40px; }
  .oferta2-garantia img { width: 42px; height: 42px; flex-basis: 42px; }
  .oferta2-garantia p { font-size: .74rem; }
  .oferta2-garantia strong { font-size: .85rem; }
}