/* Ajustes cirúrgicos da seção de planos da página de vendas.
   Escopo restrito a #planos para não alterar o restante do produto. */
#planos .max-w-5xl > div {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#planos .max-w-5xl > div > h3,
#planos .max-w-5xl > div > p {
  width: 100%;
  text-align: center;
}

#planos .max-w-5xl > div > a {
  margin-top: auto;
}

#planos .max-w-5xl > div:first-child > span {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

#planos .max-w-5xl > div:nth-child(2) > p:nth-of-type(2) {
  max-width: 22rem;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 500;
}

/* Origem: reforça a hierarquia sem alterar a copy nem o restante da página.
   IMPORTANTE: regras escopadas ao root visual da landing para não vazarem
   para as grids do app autenticado. */
[class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:first-child h2 {
  font-size: 0;
  line-height: 1;
  letter-spacing: -0.035em;
}

[class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:first-child h2::before {
  content: "O PREHEAT";
  font-size: clamp(3rem, 4.6vw, 4.9rem);
  line-height: 0.95;
  font-weight: 700;
}

[class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:first-child h2::after {
  content: " nasceu\A de uma necessidade";
  white-space: pre-line;
  font-size: clamp(2rem, 2.9vw, 3.2rem);
  line-height: 1.08;
  font-weight: 600;
}

[class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:first-child::after {
  content: "real.";
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(2.5rem, 3.7vw, 4rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--sales-text);
}

[class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:nth-child(2) > p:last-child {
  font-size: 0;
  line-height: 0;
}

[class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:nth-child(2) > p:last-child::before {
  content: "Menos tempo pensando no que fazer.\A Mais clareza para executar.";
  display: block;
  white-space: pre-line;
  font-size: clamp(1.5rem, 2.25vw, 2.15rem);
  line-height: 1.22;
  font-weight: 700;
}

@media (max-width: 1023px) {
  #planos .max-w-5xl > div {
    min-height: 300px;
  }
}

@media (max-width: 639px) {
  [class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:first-child h2::before {
    display: block;
  }

  [class~="bg-sales-night"][class~="text-sales-text"] > main > section:nth-of-type(3) .grid > div:first-child h2::after {
    content: "nasceu\A de uma necessidade";
    display: block;
    margin-top: 0.35rem;
  }

  /* Remove a reserva extra de 4.5rem do rodapé mobile.
     O CTA continua fixo, mas a página deixa de terminar com um bloco azul vazio. */
  [class~="bg-sales-night"][class~="text-sales-text"] > footer.bg-sales-night {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}