/* ==========================================================================
   Materiais gratuitos: seção #materiais do catálogo, página de cada guia e
   página de obrigado.

   Complemento do estilo.css, do produtos.css e do formacao.css (de onde vêm
   o cartão do formulário, os campos e os botões). Nada de cor ou raio novo:
   tudo sai das variáveis da marca.
   ========================================================================== */

/* ======================== Seção no catálogo ============================= */

/* A seção vem depois da lista montada pelo produtos-page.js, que é outro
   pai: o espaçamento entre seções do produtos.css não alcança aqui. */
.materiais-secao { margin-top: clamp(34px, 4vw, 52px); scroll-margin-top: 92px; }
.materiais-secao:first-child { margin-top: 0; }

.materiais-apoio {
  margin: -6px 0 18px;
  max-width: 62ch;
  font-size: 15px; line-height: 1.6; color: var(--tinta-2);
}

/* Capa do cartão: o topo do guia de verdade, recortado em 4:3. */
.prod-capa {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: var(--raio-p);
  background: var(--agua-claro);
  border: 1px solid var(--borda);
}
.prod-capa img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.prod-formato { font-size: 13px; font-weight: 600; color: var(--tinta-2); }

/* ============================ Página do guia ============================ */

.mat-trilha { padding-top: clamp(14px, 2vw, 22px); }
.mat-trilha ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--tinta-2); }
.mat-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--borda); }
.mat-trilha a { color: var(--tinta-2); }
.mat-trilha a:hover { color: var(--malva-escuro); }
.mat-trilha [aria-current] { color: var(--tinta); font-weight: 600; }

/* Celular: título, prévia e formulário, nessa ordem, em coluna.
   Desktop: texto e formulário à esquerda, a prévia fixa à direita. */
.mat-topo {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cabeca" "previa" "forma";
  padding: clamp(18px, 3vw, 34px) 0 clamp(36px, 5vw, 64px);
}
.mat-cabeca { grid-area: cabeca; }
.mat-previa { grid-area: previa; }
.mat-forma-caixa { grid-area: forma; }

.mat-titulo {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--tinta);
  max-width: 22ch;
  overflow-wrap: break-word;
}
.mat-resumo { margin-top: 14px; max-width: 52ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--tinta-2); }

.mat-ficha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--tinta-2);
}

/* Prévia: no celular, o topo do guia num recorte 3:4 com o botão de
   ampliar por cima; a imagem inteira abre no zoom. */
.mat-previa { margin: 0; justify-self: center; width: 100%; max-width: 420px; }
.mat-previa-link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--agua-claro);
  box-shadow: var(--sombra);
  cursor: zoom-in;
}
.mat-previa-link img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mat-previa-link::after {
  content: "Ampliar prévia";
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 9px 16px; border-radius: 999px;
  background: rgba(51, 38, 46, .82); color: #fff;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.mat-previa-link:focus-visible { border-radius: var(--raio); }
.mat-previa-legenda { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); text-align: center; }

.mat-forma-caixa { margin: 0; width: 100%; justify-self: center; scroll-margin-top: 92px; }
.mat-forma-titulo { font-size: 20px; font-weight: 700; color: var(--tinta); }
.mat-forma-apoio { margin-top: 6px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }

/* Caixa de novidades: o rótulo inteiro é área de toque, e a caixa nasce
   desmarcada. */
.mat-opcao { display: flex; align-items: flex-start; gap: 12px; }
.mat-opcao input {
  flex: none;
  width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--malva-acao);
  cursor: pointer;
}
.mat-opcao label { font-size: 14px; line-height: 1.5; color: var(--tinta); cursor: pointer; }

.mat-aviso { font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); }
.mat-aviso a { color: var(--malva-escuro); font-weight: 600; }

.mat-forma .fm-forma-falha-texto .fm-btn { margin-top: 10px; }

@media (min-width: 1024px) {
  .mat-topo {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-areas: "cabeca previa" "forma previa";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 72px);
  }
  .mat-forma-caixa { justify-self: start; align-self: start; }
  .mat-previa { position: sticky; top: 100px; align-self: start; }
  .mat-previa-link { aspect-ratio: auto; }
  .mat-previa-link img { height: auto; }
  .mat-previa-link::after { opacity: 0; transition: opacity 260ms var(--curva); }
  .mat-previa-link:hover::after, .mat-previa-link:focus-visible::after { opacity: 1; }
}

/* ============================== Detalhes ================================ */

.mat-detalhes {
  display: grid; gap: clamp(26px, 3vw, 34px) clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(48px, 6vw, 84px);
  border-top: 1px solid var(--borda);
  padding-top: clamp(30px, 4vw, 48px);
}
@media (min-width: 900px) {
  .mat-detalhes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat-bloco-largo, .mat-voltar { grid-column: 1 / -1; }
}

.mat-bloco-titulo { font-size: 19px; font-weight: 700; color: var(--tinta); margin-bottom: 10px; }
.mat-bloco p { max-width: 64ch; font-size: 15.5px; line-height: 1.65; color: var(--tinta-2); }
.mat-bloco p + p { margin-top: 10px; }

.mat-lista { display: grid; gap: 8px; }
.mat-lista li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: var(--tinta); }
.mat-lista li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--agua);
}

.mat-dados { margin: 0; display: grid; }
.mat-dados div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.mat-dados dt { font-size: 14.5px; color: var(--tinta-2); }
.mat-dados dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--tinta); text-align: right; }

.mat-texto { margin-top: 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--fundo-cartao); }
.mat-texto summary {
  display: flex; align-items: center; min-height: 48px; padding: 12px 18px;
  font-weight: 600; color: var(--malva-escuro); cursor: pointer;
}
.mat-texto summary:focus-visible { border-radius: var(--raio-p); }
.mat-texto-corpo { padding: 4px 18px 20px; }
.mat-texto-corpo h3 { margin: 18px 0 8px; font-size: 16.5px; color: var(--tinta); }
.mat-texto-corpo p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--tinta-2); max-width: 70ch; }
.mat-texto-itens { display: grid; gap: 14px; margin-top: 12px; }
.mat-texto-item-titulo { font-weight: 700; color: var(--tinta) !important; }

.mat-voltar a { font-weight: 600; }

/* ================================ Zoom ==================================
   Tela cheia sobre a página. A imagem abre ajustada à largura; "Ampliar"
   dobra o tamanho e o dedo arrasta para ler cada parte. O pinça do
   navegador continua valendo por cima disso. */

.mat-zoom {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(51, 38, 46, .94);
  color: #fff;
}
.mat-zoom::backdrop { background: rgba(51, 38, 46, .6); }
.mat-zoom-barra {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 10px 12px;
  background: rgba(51, 38, 46, .96);
}
.mat-zoom-barra button {
  min-height: 44px; min-width: 44px; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  background: transparent; color: #fff;
  font: 600 15px/1.2 Montserrat, system-ui, sans-serif;
  cursor: pointer;
}
.mat-zoom-barra button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 999px; }
.mat-zoom-area { height: calc(100dvh - 64px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mat-zoom-area img { width: 100%; max-width: 900px; height: auto; margin: 0 auto; background: #fff; }
.mat-zoom[data-ampliado="true"] .mat-zoom-area img { width: 220%; max-width: none; }
@media (min-width: 900px) {
  .mat-zoom[data-ampliado="true"] .mat-zoom-area img { width: 1600px; }
}

/* ============================== Obrigado ================================ */

.mat-obrigado { padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 8vw, 110px); }
.mat-obrigado-caixa {
  max-width: 640px; margin: 0 auto;
  padding: clamp(26px, 4vw, 44px);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-align: center;
}
.mat-obrigado-caixa .mat-titulo, .mat-obrigado-caixa .mat-resumo { margin-inline: auto; }
.mat-obrigado-acao { margin-top: 24px; }
.mat-baixar { min-height: 52px; padding-inline: 30px; font-size: 16px; }
.mat-arquivo { margin-top: 10px; font-size: 13.5px; color: var(--tinta-2); }
.mat-envio {
  margin: 22px auto 0; max-width: 46ch;
  padding: 14px 16px;
  border-radius: var(--raio-p);
  background: var(--agua-claro);
  font-size: 14.5px; line-height: 1.55; color: var(--tinta);
}
.mat-envio:empty { display: none; }
.mat-obrigado-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 26px; font-size: 14.5px; }
.mat-obrigado-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mat-previa-link::after { transition: none; }
}