/* PCE Certificado Digital
   Figma: desktop 5126:37772 / mobile 5126:38108.
   A página reaproveita os módulos das demais páginas de produto
   (core-hero, core-advantages, coverage-section, clients-section,
   contact-section) e só ajusta o que o design pede de diferente. */

/* 01 — Hero */
.cert-hero {
  height: 100vh;
  min-height: 758px;
}

.cert-hero .core-hero__background {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
    var(--black) url("assets/certificado-digital/hero-desktop@2x.webp") center bottom / cover no-repeat;
}

.cert-hero h1 {
  max-width: 1200px;
}

/* 02 — Modelos de certificado.
   Mesmo card de vantagens das outras páginas de produto, porém sem o tile de
   ícone: no Figma o card traz só imagem, título e descrição. O fundo tem corte
   seco de mist para branco em 69,6%, que é onde a base dos cards termina. */
.cert-models {
  padding: 80px 0;
  /* O corte de mist para branco acompanha a base da imagem do card. Ancorar
     pelo rodapé da seção, e não por porcentagem, porque tudo abaixo desse
     ponto tem altura fixa — texto do card 160 + respiro 60 + CTA 52 +
     padding 80 = 352 — enquanto a altura total varia com a quebra do título. */
  background:
    radial-gradient(circle at 74% 0, rgba(255, 255, 255, 0.94), transparent 33%),
    linear-gradient(to top, var(--white) 352px, var(--mist) 352px);
}

.cert-models .core-advantages__inner {
  gap: 60px;
}

.cert-models .core-heading--center {
  width: min(706px, 100%);
  margin-inline: auto;
}

.cert-models .core-heading h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1.4;
}

.cert-models .core-heading--center > p:not(.corner-tag) {
  width: 100%;
  margin: 20px 0 0;
}

.cert-models .core-advantages__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(540px, auto);
  margin-top: 0;
  padding-top: 8px;
}

/* Texto com piso de 160, não teto: no tablet a descrição quebra em mais linhas. */
.cert-models .core-advantage,
.cert-models .core-advantage:nth-child(3) {
  grid-column: auto;
  grid-template-rows: 380px minmax(160px, auto);
}

.cert-models .core-advantage > img,
.cert-models .core-advantage:nth-child(1) > img,
.cert-models .core-advantage:nth-child(2) > img,
.cert-models .core-advantage:nth-child(3) > img {
  height: 380px;
  object-position: center;
}

/* Sem tile de ícone, o topo do texto volta ao padding simétrico de 20. */
.cert-models .core-advantage__copy {
  min-height: 160px;
  padding: 20px;
}

.cert-models .core-advantage h3 + p {
  margin-top: 8px;
}

.cert-models .core-advantages__cta {
  margin-top: 0;
}

/* 09 — CTA final: a descrição é mais estreita que o título, como no Figma. */
.cert-contact .contact-copy > div > p {
  max-width: 414px;
}

/* No tablet a descrição dos cards quebra em mais linhas e o texto passa dos
   160, então o corte ancorado pela base desce junto. Nessa faixa ele é ancorado
   pelo topo, onde nada muda: topo do grid 401 + padding 8 + imagem 380 = 789. */
@media (max-width: 1199px) and (min-width: 768px) {
  .cert-models {
    background:
      radial-gradient(circle at 74% 0, rgba(255, 255, 255, 0.94), transparent 33%),
      linear-gradient(180deg, var(--mist) 789px, var(--white) 789px);
  }
}

@media (max-width: 767px) {
  .cert-hero {
    min-height: 780px;
  }

  .cert-hero .core-hero__background {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
      var(--black) url("assets/certificado-digital/hero-mobile@2x.webp") center bottom / cover no-repeat;
  }

  /* Mesma lógica do desktop, mas os cards agora estão empilhados: abaixo da
     base da imagem do primeiro card ficam o texto dele 160 + 20 + card 540 +
     20 + card 540 + respiro 28 + CTA 52 + padding 60 = 1420. */
  .cert-models {
    padding: 60px 0;
    background:
      radial-gradient(circle at 74% 0, rgba(255, 255, 255, 0.94), transparent 33%),
      linear-gradient(to top, var(--white) 1420px, var(--mist) 1420px);
  }

  .cert-models .core-advantages__inner {
    gap: 28px;
  }

  .cert-models .core-heading h2 {
    font-size: 24px;
  }

  .cert-models .core-advantages__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 0;
  }

  .cert-models .core-advantage,
  .cert-models .core-advantage:nth-child(3) {
    grid-column: 1;
  }
}