/* ==========================================================================
   Material rico (modelo "Guia de Tendências SIPAT 2027"): título e formulário de download,
   capa e conteúdo do material, manifesto com os números da Weex e chamada final.
   Os campos do formulário reaproveitam .campo / .campo__controle (components.css)
   ========================================================================== */

/* A chamada final leva ao formulário (#baixar) com rolagem suave */
@media (prefers-reduced-motion: no-preference) {
  html:has(.material-hero) {
    scroll-behavior: smooth;
  }
}

/* ---------- Hero: texto e formulário ---------- */

.material-hero {
  position: relative;
  isolation: isolate;
  max-width: 1300px;
  margin: 0 auto;
  padding: clamp(48px, 5vw, 80px) 24px clamp(72px, 7vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "texto formulario";
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Degradê de fundo de ponta a ponta, atrás do conteúdo (o mesmo do hero da home) */
.material-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFE7FA 45%, #E4D6F7 100%);
  pointer-events: none;
}

.material-hero__texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.material-hero__selo {
  align-self: flex-start;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--roxo);
  background: var(--branco);
  border: 1px solid var(--lilas-borda);
  border-radius: 999px;
  padding: 8px 16px;
}
.material-hero__titulo {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--roxo);
}
.material-hero__destaque {
  display: inline-block;
  margin-top: .1em;
  background: var(--gradiente-amarelo);
  border-radius: 999px;
  padding: 0 .28em .04em;
  line-height: 1.1;
}
.material-hero__descricao {
  margin: 0;
  max-width: 540px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--roxo-escuro);
  text-wrap: pretty;
}
.material-hero__descricao strong {
  font-weight: 700;
  color: var(--roxo);
}
.material-hero__pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.material-hero__pilulas li {
  font-size: 14px;
  font-weight: 500;
  background: var(--roxo);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--branco);
}
.material-hero__pilulas .material-hero__pilula-destaque {
  background: var(--branco);
  border: 1px solid var(--lilas-borda);
  padding: 8px 17px;
  color: var(--roxo);
}

/* ---------- Formulário de cadastro (caixa amarela, como o contato da home) ---------- */

.material-cadastro {
  grid-area: formulario;
  scroll-margin-top: 24px;
  background: var(--amarelo);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(65, 23, 135, .18);
}
.material-cadastro__topo {
  background: var(--roxo);
  padding: 26px clamp(24px, 3vw, 36px);
}
.material-cadastro__titulo {
  margin: 0;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--branco);
}
.material-cadastro__subtitulo {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
}

.material-formulario {
  padding: clamp(24px, 3vw, 36px);
}
.material-formulario__campos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.material-formulario__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px 14px;
}
.material-formulario__enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 18px 32px;
  background: var(--roxo);
  color: var(--branco);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.material-formulario__enviar:hover {
  background: #35126E;
}
.material-formulario__enviar:focus-visible,
.material-formulario__baixar:focus-visible,
.material-chamada__botao:focus-visible {
  outline: 2px solid var(--roxo);
  outline-offset: 3px;
}
.material-formulario__aviso {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--roxo-escuro);
}
.material-formulario__aviso a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Confirmação, no lugar dos campos, com o link do PDF */
.material-formulario__sucesso {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--branco);
  border-radius: 28px;
  padding: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--roxo-escuro);
  outline: none;
}
.material-formulario__sucesso p {
  margin: 0;
}
.material-formulario__sucesso .material-formulario__sucesso-titulo {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--roxo);
}
.material-formulario__baixar {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  border-radius: 999px;
  padding: 16px 28px;
  background: var(--roxo);
  color: var(--branco);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* :hover junto, para vencer o a:hover do base.css (que deixaria o texto roxo) */
.material-formulario__baixar:hover {
  background: #35126E;
  color: var(--branco);
}

/* ---------- Conteúdo: os quatro pilares ---------- */

.material-conteudo {
  max-width: 1300px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 120px) 24px;
}
/* Capa do guia no tablet à esquerda; título e descrição à direita */
.material-conteudo__cabecalho {
  max-width: 1000px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.material-conteudo__capa img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 36px rgba(65, 23, 135, .22));
}
.material-conteudo__chamada {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.material-conteudo__intro {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--roxo-escuro);
  text-wrap: pretty;
}

.material-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
/* Cada card ocupa 4 linhas da grade (número, título, texto e tendências) com subgrid: assim as partes
   ficam alinhadas entre os cards lado a lado, mesmo com textos de alturas diferentes */
.material-pilar {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 32px;
  padding: 28px 26px 30px;
  box-shadow: 0 10px 30px rgba(65, 23, 135, .08);
}
.material-pilar__numero {
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradiente-amarelo);
  color: var(--roxo);
  font-size: 16px;
  font-weight: 700;
}
.material-pilar__titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--roxo);
}
.material-pilar__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--roxo-escuro);
}
.material-pilar__tendencias {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--lilas-borda);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.material-pilar__rotulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A6A99;
}
.material-pilar__tendencias ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.material-pilar__tendencias li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--preto);
}
.material-pilar__tendencias li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--roxo);
}

/* Outras partes do guia */
.material-extras {
  margin-top: 20px;
  background: var(--lilas);
  border-radius: 32px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.material-extras__titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--roxo);
}
.material-extras__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px 32px;
}
.material-extras__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.material-extras__item strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--roxo);
}
.material-extras__item span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--roxo-escuro);
}

/* ---------- Manifesto e números (caixa roxa, como a newsletter da home) ---------- */

.material-manifesto {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px clamp(72px, 8vw, 120px);
}
.material-manifesto__caixa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--roxo);
  border-radius: 48px;
  padding: clamp(40px, 5.5vw, 72px) clamp(28px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  box-shadow: 0 30px 60px rgba(65, 23, 135, .22);
}
/* Círculos decorativos */
.material-manifesto__circulo {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
}
.material-manifesto__circulo--1 {
  right: -12%;
  top: -70%;
  width: 62%;
  border: 1px solid rgba(255, 255, 255, .14);
}
.material-manifesto__circulo--2 {
  right: -4%;
  top: -45%;
  width: 46%;
  border: 1px solid rgba(255, 255, 255, .1);
}
.material-manifesto__circulo--3 {
  left: -10%;
  bottom: -80%;
  width: 50%;
  background: radial-gradient(circle, rgba(89, 38, 183, .9) 0%, rgba(89, 38, 183, 0) 70%);
}

.material-manifesto__texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.material-manifesto__selo {
  align-self: flex-start;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amarelo);
  border: 1px solid rgba(251, 176, 59, .6);
  border-radius: 999px;
  padding: 8px 16px;
}
.material-manifesto__titulo {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--branco);
  text-wrap: balance;
}
.material-manifesto__titulo span {
  display: block;
  margin-top: .4em;
  font-weight: 400;
  color: var(--amarelo);
}

.material-manifesto__numeros {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.material-manifesto__numeros li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 16px;
  color: var(--branco);
}
.material-manifesto__numeros strong {
  flex: none;
  min-width: 4.4em;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amarelo);
}

/* ---------- Chamada final (faixa amarela de ponta a ponta, encostada no rodapé) ---------- */

.material-chamada__caixa {
  background: var(--amarelo);
  padding: clamp(64px, 8vw, 112px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.material-chamada__titulo {
  max-width: 900px;
}
.material-chamada__texto {
  margin: 0;
  max-width: 620px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--roxo-escuro);
  text-wrap: pretty;
}
.material-chamada__botao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  border-radius: 999px;
  padding: 18px 32px;
  background: var(--roxo);
  color: var(--branco);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.material-chamada__botao:hover {
  background: #35126E;
  color: var(--branco);
}

/* ---------- Telas menores ---------- */

/* Uma coluna: texto e formulário, nessa ordem */
@media (max-width: 960px) {
  .material-hero {
    grid-template-columns: minmax(0, 640px);
    grid-template-areas:
      "texto"
      "formulario";
    justify-content: center;
  }
}

/* Capa acima do título, tudo centralizado */
@media (max-width: 720px) {
  .material-conteudo__cabecalho {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .material-conteudo__capa {
    width: min(240px, 70%);
  }
}

@media (max-width: 768px) {
  .material-hero {
    padding-top: 30px;
    padding-bottom: 64px;
  }
  .material-cadastro {
    border-radius: 30px;
  }
  .material-formulario__baixar {
    align-self: stretch;
    justify-content: center;
  }
  .material-pilar {
    border-radius: 28px;
  }
  .material-extras {
    border-radius: 28px;
  }
  .material-manifesto__caixa {
    border-radius: 30px;
  }
  .material-manifesto__numeros li {
    padding: 16px 20px;
  }
  .material-manifesto__numeros strong {
    min-width: 0;
  }
}