/* Mockups dos entregáveis em destaque (só copy-revisada e succao-macia-enxuta) */

/* Recortes quadrados, colados no produto */
.entrega img[src*="mockup-"] { aspect-ratio: 1 / 1; object-fit: cover; }

/* copy-revisada: no computador, a imagem ganha metade do card */
.card:has(img[src*="mockup-"]) .media { flex-basis: 50%; }
.card:has(img[src*="mockup-"]) .txt { flex-basis: 50%; }

@media (max-width: 760px) {
  /* no celular, a imagem ocupa a largura toda do card, colada nas bordas */
  .card:has(img[src*="mockup-"]) .media {
    margin: -24px -24px 0;
    width: calc(100% + 48px);
  }
  .card .media img[src*="mockup-"] {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  /* card de preço: pacote completo de ponta a ponta */
  .oferta .media:has(img[src*="mockup-"]) {
    margin: -24px -20px 4px;
    width: calc(100% + 40px);
  }
  .oferta .media img[src*="mockup-"] { border-radius: 12px 12px 0 0; }
}

/* Preço riscado nos bônus */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-num); font-weight: 600; font-size: .82rem; line-height: 1;
  padding: 7px 12px; border-radius: 999px;
}
.chip--valor { background: var(--green-soft); color: var(--green-text); }
.chip--valor s { color: #B8837A; font-weight: 500; }

/* Caixa "Estou certa?": foto própria, sem o zoom que recortava a imagem dos pensamentos */
.box-certo .foto img.foto-inteira { transform: none; object-position: 50% 40%; }
/* foto maior: caixa mais larga e foto com quase metade dela no computador */
.box-certo:has(.foto-inteira) { max-width: 780px; gap: 32px; }
.box-certo .foto:has(.foto-inteira) {
  flex: 0 0 48%;
  border: 4px solid rgba(255, 255, 255, .85);
  box-shadow: 0 14px 30px -14px rgba(90, 40, 30, .55);
}
@media (max-width: 620px) {
  /* celular: foto de ponta a ponta no topo da caixa */
  .box-certo .foto:has(.foto-inteira) {
    width: calc(100% + 48px);
    margin: -24px -24px 4px;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: none;
    aspect-ratio: 4 / 3.4;
  }
}

/* Selo de reforço na dobra (igual ao da página enxuta) */
.micro {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: 999px;
  padding: 10px 22px 10px 10px; box-shadow: var(--shadow);
  font-family: var(--f-head); font-weight: 600; color: var(--blue); font-size: 1rem;
}
.micro::before {
  content: ""; flex: 0 0 34px; height: 34px; border-radius: 8px;
  background: var(--green) 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* logo menor na dobra */
.hero .logo { width: min(250px, 62%); }

/* prints de depoimento maiores no celular: sem borda branca larga e ocupando quase a tela toda */
@media (max-width: 620px) {
  .grid-dep { width: calc(100% + 20px); margin-inline: -10px; gap: 14px; }
  .grid-dep figure { padding: 4px; border-radius: 12px; }
  .grid-dep--tag figure { padding: 28px 4px 4px; }
  .grid-dep img { border-radius: 9px; }
}

/* headline em Poppins (teste de leitura) */
.hero h1.h-xl {
  font-family: "Poppins", var(--f-head);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--text);
}
.hero h1.h-xl strong { font-weight: 600; color: var(--blue); }

/* headline: tarja mais fina, só na base do texto */
.hero h1.mark strong {
  background: linear-gradient(transparent 78%, rgba(250, 125, 90, .30) 78%);
}

/* selo "Para aplicar já na próxima mamada": mais respiro, check menor, frase numa linha só */
.hero .micro {
  margin-block: 6px;
  gap: 10px;
  padding: 10px 20px 10px 12px;
  white-space: nowrap;
  font-size: .95rem;
}
.hero .micro::before {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 6px;
  background-size: 13px;
}
/* a letra acompanha a largura da tela, para a frase caber sempre numa linha */
.hero .micro { max-width: 100%; }
@media (max-width: 480px) {
  .hero .micro { font-size: clamp(.76rem, 3.8vw, .95rem); padding: 9px 14px 9px 10px; gap: 8px; }
}