/* Página /assinar: cartão da oferta, recursos e passos. O resto vem do
   /estilo.css da página principal. */
.oferta-hero .hero-grade { align-items: start; }
@media (min-width: 60rem) { .oferta-hero .hero-grade { grid-template-columns: 1.1fr .9fr; } }
.oferta-selos { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; font-weight: 700; color: var(--tinta-2); }

.cartao-oferta {
  position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 24px;
  padding: 24px 22px; display: grid; gap: 12px;
  box-shadow: 0 2px 4px rgb(15 23 42 / .05), 0 30px 60px -28px rgb(15 23 42 / .35);
}
.cartao-oferta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, var(--azul) 0 25%, var(--vermelho) 25% 50%, var(--amarelo) 50% 75%, var(--verde) 75%);
}
.oferta-rotulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--marca-600); }
.oferta-nome { font-size: 24px; }
.oferta-preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oferta-valor { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.oferta-periodo { color: var(--tinta-3); font-weight: 700; }
.oferta-parcelas { color: var(--tinta-2); font-size: 15px; margin-top: -6px; }
.oferta-em-breve { background: #fef7e0; color: #7a4a00; border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.oferta-teste { text-align: center; font-size: 15px; font-weight: 700; color: var(--marca-600); text-decoration: none; }
.oferta-teste:hover { text-decoration: underline; }
.oferta-inclui { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--linha); padding-top: 14px; }
.oferta-inclui li { position: relative; padding-left: 28px; color: var(--tinta-2); }
.oferta-inclui li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 99px;
  background: var(--verde) center / 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.oferta-garantia { font-weight: 700; }
.oferta-email { font-size: 14px; color: var(--tinta-3); }

.recursos { display: grid; gap: 16px; }
@media (min-width: 42rem) { .recursos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .recursos { grid-template-columns: repeat(4, 1fr); } }
.recurso { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; display: grid; gap: 8px; align-content: start; }
.recurso-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--cor) 13%, #fff); }
.recurso h3 { font-size: 17px; }
.recurso p { color: var(--tinta-2); font-size: 15px; }

.passos-assinatura { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.passos-assinatura li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.passos-assinatura b { display: block; font-size: 17px; }
.passos-assinatura small { display: block; color: var(--tinta-2); font-size: 15px; margin-top: 2px; }

/* No celular estreito o botão do topo não cabe ao lado da marca (e o CSS da
   página principal esconde o texto dele, deixando um botão vazio): some, e a
   ação fica no cartão da oferta e na barra de baixo. */
@media (max-width: 26rem) {
  .pagina-assinar .topo .botao { display: none; }
}