/* Central de Materiais — Lucas Redecker 5511
   Depende de assets/css/brand.css (fontes Effra + tokens --lr-*), carregado antes deste.
   Sistema visual: .superpowers/sdd/2026-08-18-central-materiais/design-notes.md
   Prefixo de classe: mat-  |  Sem sombra, sem gradiente decorativo, cantos retos.

   Assinatura gráfica da página: a "régua corrida" — um toco amarelo de 48x4px
   seguido de uma linha picotada que atravessa a largura toda. Abre cada seção,
   separa o rodapé e é o que enche o lado direito do desktop sem inventar
   conteúdo. Ela entra com um scaleX da esquerda para a direita.

   Movimento: quem esconde é o JS. Toda regra de estado inicial mora sob
   html.mat-anim (classe posta por assets/js/materiais-anim.js). Sem JS,
   nada fica invisível. */

/* --- Tokens desta página ------------------------------------------------- */
/* O brand.css só traz --lr-pad-x: 20px; as media queries do site.css ficam
   fora do :root e não foram copiadas. Redeclaradas aqui. */
:root {
  --mat-sec-y: 56px;
  --mat-hero-top: 40px;
  --mat-hero-bottom: 56px;
  --mat-gap: 16px;

  /* Régua corrida: toco sólido + picote. Recolorido por contexto de fundo. */
  --mat-stub: var(--lr-yellow);
  --mat-tick: rgba(0, 50, 129, 0.18);

  /* Movimento. Uma curva de entrada e uma de varredura, usadas em tudo,
     para a página inteira ter o mesmo compasso. */
  --mat-ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --mat-ease-wipe: cubic-bezier(0.22, 1, 0.36, 1);
  --mat-micro: 200ms;
  --mat-enter: 560ms;
  --mat-step: 70ms;
}

@media (min-width: 768px) {
  :root {
    --lr-pad-x: 32px;
    --mat-sec-y: 72px;
    --mat-hero-bottom: 76px;
    --mat-gap: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --lr-pad-x: 56px;
    --mat-sec-y: 96px;
    --mat-hero-bottom: 96px;
    --mat-gap: 24px;
  }
}

/* --- Reset leve ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #FFFFFF;
  font-family: var(--lr-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--lr-ink-70);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--lr-font-display);
  color: var(--lr-ink);
}

p { margin: 0; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Foco visível -------------------------------------------------------- */
/* Nenhuma regra de hover abaixo pode apagar isto. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--lr-navy);
  outline-offset: 3px;
}

.mat-hero a:focus-visible,
.mat-section--navy a:focus-visible,
.mat-section--navy button:focus-visible,
.mat-section--navy input:focus-visible,
.mat-section--navy textarea:focus-visible,
.mat-footer a:focus-visible {
  outline-color: var(--lr-yellow);
}

/* --- Estrutura ----------------------------------------------------------- */
.mat-container {
  width: 100%;
  max-width: var(--lr-max);
  margin: 0 auto;
  padding-left: var(--lr-pad-x);
  padding-right: var(--lr-pad-x);
}

/* --- Peças de marca ------------------------------------------------------ */
.mat-eyebrow {
  display: inline-block;
  padding: 7px 14px;
  background: var(--lr-navy);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Em fundo azul o eyebrow inverte. Especificidade (0,2,0): qualquer
   modificador de .mat-eyebrow criado depois precisa ser redeclarado
   com o seletor de contexto para sobreviver aqui dentro. */
.mat-hero .mat-eyebrow,
.mat-section--navy .mat-eyebrow {
  background: var(--lr-yellow);
  color: var(--lr-navy);
}

.mat-mark {
  padding: 0 2px;
  background: linear-gradient(180deg, transparent 58%, var(--lr-yellow) 58%);
}

.mat-hero .mat-mark,
.mat-section--navy .mat-mark {
  position: relative;
  padding: 0;
  background: none;
  color: var(--lr-yellow);
}

/* Filete sob a palavra grifada do h1: mesma linguagem do toco de 48x4px,
   na escala do texto. Entra por último na sequência de abertura. */
.mat-hero .mat-mark::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.07em;
  left: 0;
  height: 0.075em;
  background: var(--lr-yellow);
  transform-origin: left center;
}

/* --- Botão --------------------------------------------------------------- */
/* O azul do hover entra por varredura (::before em scaleX), não por troca de
   background: só transform, e o texto continua legível sobre o amarelo até
   o azul chegar. isolation + z-index -1 deixam o ::before acima do fundo
   amarelo do botão e abaixo do texto. */
.mat-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  overflow: hidden;
  border: 2px solid var(--lr-yellow);
  background: var(--lr-yellow);
  color: var(--lr-navy);
  font-family: var(--lr-font-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    color var(--mat-micro) var(--mat-ease-out),
    border-color var(--mat-micro) var(--mat-ease-out),
    transform 120ms var(--mat-ease-out);
}

.mat-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--lr-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--mat-ease-wipe);
}

/* Seta em CSS puro (dois lados de borda girados 45°). Decorativa: nasce de
   pseudo-elemento, então nenhum leitor de tela a anuncia. */
.mat-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--mat-micro) var(--mat-ease-out);
}

.mat-btn:focus-visible::before { transform: none; }
.mat-btn:focus-visible {
  border-color: var(--lr-navy);
  color: #FFFFFF;
}

.mat-btn:active { transform: scale(0.985); }

@media (hover: hover) {
  .mat-btn:hover::before { transform: none; }

  .mat-btn:hover {
    border-color: var(--lr-navy);
    color: #FFFFFF;
  }

  .mat-btn:hover::after { transform: translate3d(4px, 0, 0) rotate(45deg); }
}

.mat-cta-row { margin-top: 28px; }

/* --- Hero ---------------------------------------------------------------- */
.mat-hero {
  position: relative;
  overflow: hidden;
  padding: var(--mat-hero-top) 0 var(--mat-hero-bottom);
  background: var(--lr-navy);
  color: #FFFFFF;
}

/* Faixa da campanha: fecha o topo da página. Filete, não bloco chapado. */
.mat-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--lr-yellow);
}

/* Marca d'água 5511: numerais vazados, cortados pela borda inferior direita.
   É o que dá presença ao hero e ocupa o lado direito no desktop.
   Continua sendo a única marca d'água da página. */
.mat-watermark {
  position: absolute;
  right: -0.05em;
  bottom: -0.26em;
  font-family: var(--lr-font-display);
  font-size: clamp(150px, 40vw, 460px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.075);
  pointer-events: none;
  user-select: none;
}

@supports (-webkit-text-stroke: 1px #000) {
  .mat-watermark {
    color: transparent;
    -webkit-text-stroke: clamp(1.5px, 0.3vw, 3px) rgba(255, 255, 255, 0.17);
  }
}

/* Layout em coluna com gap: nenhum filho depende da margem do vizinho,
   então remover qualquer um deles (inclusive a fileira de âncoras)
   não deixa espaço órfão. */
.mat-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: var(--lr-max-hero);
  margin: 0 auto;
  padding-left: var(--lr-pad-x);
  padding-right: var(--lr-pad-x);
}

.mat-hero__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: clamp(12px, 4vw, 32px);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color var(--mat-micro) var(--mat-ease-out);
}

/* Filete de retorno: cresce para a esquerda no hover. Direção = significado. */
.mat-hero__back::before {
  content: "";
  width: 18px;
  height: 1.5px;
  margin-right: 10px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 220ms var(--mat-ease-out);
}

.mat-hero__back:focus-visible { color: var(--lr-yellow); }

@media (hover: hover) {
  .mat-hero__back:hover { color: var(--lr-yellow); }
  .mat-hero__back:hover::before { transform: translate3d(-5px, 0, 0) scaleX(1.28); }
}

.mat-hero__title {
  font-size: clamp(34px, 8.4vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.mat-hero__lead {
  max-width: 46ch;
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* --- Fileira de âncoras do hero -----------------------------------------
   BLOCO REMOVÍVEL. Se o Lucas decidir tirar: apagar este grupo de regras e o
   <nav class="mat-anchors"> do materiais.html. Nada mais depende dele.
   Nunca position: fixed nem sticky — a fileira rola junto com a página. */
/* No celular, 2x2: quatro blocos iguais, sem a linha órfã do flex-wrap. */
.mat-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.mat-anchors a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 1 1 calc(50% - 10px);
  align-items: center;
  min-height: 50px;
  padding: 0 18px 0 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Marca amarela de repouso: o começo da varredura já visível. */
  border-left: 3px solid var(--lr-yellow);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  transition:
    color var(--mat-micro) var(--mat-ease-out),
    border-color var(--mat-micro) var(--mat-ease-out),
    transform 120ms var(--mat-ease-out);
}

.mat-anchors a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--lr-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--mat-ease-wipe);
}

.mat-anchors a:focus-visible::before { transform: none; }
.mat-anchors a:focus-visible {
  border-color: var(--lr-yellow);
  color: var(--lr-navy);
}

.mat-anchors a:active { transform: scale(0.975); }

@media (hover: hover) {
  .mat-anchors a:hover::before { transform: none; }

  .mat-anchors a:hover {
    border-color: var(--lr-yellow);
    color: var(--lr-navy);
  }
}

/* A partir do tablet a fileira vira um índice de largura total: quatro blocos
   iguais atravessando o hero, em vez de quatro caixinhas soltas à esquerda. */
@media (min-width: 768px) {
  .mat-anchors {
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 14px;
  }

  .mat-anchors a {
    flex: 1 1 0;
    min-height: 58px;
    padding: 0 20px 0 17px;
    font-size: 15px;
  }
}
/* --- fim do bloco removível --------------------------------------------- */

/* --- Seções -------------------------------------------------------------- */
.mat-section {
  padding: var(--mat-sec-y) 0;
  scroll-margin-top: 24px;
}

.mat-section--light {
  background: #FFFFFF;
  --mat-tick: rgba(0, 50, 129, 0.18);
}

.mat-section--gray {
  background: var(--lr-gray);
  --mat-tick: rgba(0, 50, 129, 0.24);
}

.mat-section--navy {
  background: var(--lr-navy);
  color: #FFFFFF;
  --mat-stub: rgba(255, 255, 255, 0.34);
  --mat-tick: rgba(255, 255, 255, 0.22);
}

/* O cabeçalho ocupa a largura toda para a régua chegar à borda direita.
   Quem segura a medida de leitura são o h2 e o lead, não o cabeçalho. */
.mat-section__head { max-width: none; }

/* Régua corrida: toco sólido de 48x4px + picote de 1px até o fim da linha.
   Marca o início da seção, dispensa divisória e resolve o vazio da direita
   no desktop. Em fundo azul o toco fica branco para o único amarelo chapado
   da seção continuar sendo o chip do eyebrow. */
.mat-section__head::before,
.mat-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-image:
    linear-gradient(var(--mat-stub), var(--mat-stub)),
    repeating-linear-gradient(90deg, var(--mat-tick) 0 3px, transparent 3px 11px);
  background-repeat: no-repeat, no-repeat;
  background-size: 48px 4px, calc(100% - 60px) 1px;
  background-position: 0 0, 60px 2px;
  transform-origin: left center;
}

.mat-section__head::before { margin-bottom: 22px; }

.mat-h2 {
  margin-top: 16px;
  font-size: clamp(26px, 5.4vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lr-ink);
}

.mat-section--navy .mat-h2 { color: #FFFFFF; }

.mat-lead {
  max-width: 58ch;
  margin-top: 14px;
  font-size: clamp(16px, 2.4vw, 18.5px);
  line-height: 1.65;
  color: var(--lr-ink-70);
}

.mat-section--navy .mat-lead { color: rgba(255, 255, 255, 0.8); }

@media (min-width: 768px) {
  /* Medida curta no título: força quebra em duas linhas e dá bloco ao h2. */
  .mat-h2 { max-width: 22ch; }
}

/* --- Subseção: bloco de dobradinhas dentro de #artes ---------------------
   Cabeçalho um degrau menor que o da seção (h3 em vez de h2), com espaço
   acima para separar visualmente da grade geral de artes. A régua corrida
   de .mat-section__head::before continua valendo — marca o início do bloco
   igual às demais seções, só que em escala menor. */
.mat-subsection {
  margin-top: 64px;
}

.mat-section__head--sub::before {
  background-size: 32px 4px, calc(100% - 44px) 1px;
  background-position: 0 0, 44px 2px;
}

.mat-h3 {
  margin-top: 12px;
  font-size: clamp(21px, 4.2vw, 28px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--lr-ink);
}

.mat-section--navy .mat-h3 { color: #FFFFFF; }

@media (min-width: 768px) {
  .mat-subsection { margin-top: 80px; }
}

/* --- Aviso temporário de conteúdo pendente ------------------------------
   Some quando as Sprints 2 a 4 preencherem as seções.
   Tratado como prova de gráfica: hachura fina + tarja amarela na lateral. */
.mat-soon {
  position: relative;
  display: inline-block;
  margin-top: 28px;
  padding: 14px 18px 14px 16px;
  border: 1px solid var(--lr-rule);
  border-left: 4px solid var(--lr-yellow);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 50, 129, 0.05) 0 2px,
    transparent 2px 9px
  );
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lr-ink-70);
}

.mat-soon strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lr-ink);
}

.mat-soon strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  background: var(--lr-yellow);
  vertical-align: 1px;
}

.mat-section--gray .mat-soon {
  border-color: rgba(0, 50, 129, 0.24);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 50, 129, 0.06) 0 2px,
    transparent 2px 9px
  );
}

.mat-section--navy .mat-soon {
  border-color: rgba(255, 255, 255, 0.32);
  border-left-color: var(--lr-yellow);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07) 0 2px,
    transparent 2px 9px
  );
  color: rgba(255, 255, 255, 0.8);
}

.mat-section--navy .mat-soon strong { color: var(--lr-yellow); }

/* --- Moldura de perfil: prévias -------------------------------------------
   Rolagem horizontal no celular com scroll snap. As imagens têm fundo
   transparente, então precisam de background atrás para a moldura ficar
   visível na prévia. */
.mat-frames {
  display: flex;
  gap: var(--mat-gap);
  margin-top: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mat-frames {
    scroll-behavior: auto;
  }
}

.mat-frames li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0, 50, 129, 0.12);
  overflow: hidden;
}

.mat-frames img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .mat-frames {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .mat-frames li {
    width: 180px;
    height: 180px;
  }
}

@media (min-width: 1024px) {
  .mat-frames li {
    width: 200px;
    height: 200px;
  }
}

/* --- Grade de artes: filtros -----------------------------------------------
   Montada por assets/js/materiais.js dentro de #mat-filtros/#mat-grade.
   Nenhum nó aqui usa data-mat-reveal — ver o comentário no topo daquele
   arquivo — então nada abaixo depende de html.mat-anim. */
.mat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mat-chips + .mat-chips { margin-top: 14px; }

#mat-filtros { margin-top: 28px; }

.mat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--lr-rule);
  background: #FFFFFF;
  color: var(--lr-ink-70);
  font-family: var(--lr-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--mat-micro) var(--mat-ease-out),
    border-color var(--mat-micro) var(--mat-ease-out),
    color var(--mat-micro) var(--mat-ease-out);
}

@media (hover: hover) {
  .mat-chip:hover { border-color: var(--lr-navy); color: var(--lr-ink); }
}

/* Destaque de estado: um dos usos legítimos do amarelo chapado (controle
   pequeno, não faixa de fundo de seção). */
.mat-chip[aria-pressed="true"] {
  border-color: var(--lr-yellow);
  background: var(--lr-yellow);
  color: var(--lr-navy);
}

/* --- Grade de artes: cards -------------------------------------------------- */
.mat-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mat-gap);
  margin-top: 32px;
}

@media (min-width: 768px) {
  .mat-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .mat-grade { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .mat-grade { grid-template-columns: repeat(4, 1fr); }
}

.mat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lr-rule);
  background: #FFFFFF;
}

.mat-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--lr-gray);
}

/* Sem thumb utilizável (ex.: o cartão virtual em PDF, que não tem `thumb` e
   cujo `arquivo` é um PDF, não uma imagem): a foto quebra, o onerror do JS
   remove o <img> e marca esta classe. O espaço vira um aviso de gráfica —
   genérico, não específico de PDF, porque qualquer item sem imagem cai aqui —
   em vez de sumir ou mostrar o ícone quebrado do navegador. */
.mat-card.is-sem-imagem::before {
  content: "Sem prévia";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--lr-gray);
  /* --lr-muted sobre --lr-gray dá 3.61:1: abaixo do mínimo AA de 4.5:1
     para este texto (13px/700 não é "texto grande" pelo critério de
     tamanho da WCAG). Achado do audit da Task 14. ink-70 sobre o mesmo
     fundo passa em 7.53:1. */
  color: var(--lr-ink-70);
  font-family: var(--lr-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mat-card__titulo {
  margin: 16px 16px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lr-ink);
}

/* Legenda extra do card de dobradinha: cargo do parceiro (+ slogan, quando
   existir), abaixo do nome+número em .mat-card__titulo. */
.mat-card__cargo {
  margin: 4px 16px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lr-muted);
}

.mat-card__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 16px 0;
}

.mat-card__aviso {
  margin: 8px 16px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lr-ink-70);
}

.mat-card__aviso:empty { margin: 0 16px 16px; }

/* Modificadores de .mat-btn específicos da grade — a base (tamanho, seta,
   varredura de hover) já vem de .mat-btn acima; aqui só troca de cor. */
.mat-btn--primary {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.mat-btn--ghost {
  min-height: 44px;
  padding: 0 18px;
  border-color: var(--lr-navy);
  background: #FFFFFF;
  color: var(--lr-navy);
  font-size: 14px;
}

.mat-btn--ghost::before { background: var(--lr-navy); }

.mat-btn--ghost:focus-visible,
.mat-btn--ghost:active { color: #FFFFFF; }

@media (hover: hover) {
  .mat-btn--ghost:hover { color: #FFFFFF; border-color: var(--lr-navy); }
}

.mat-btn--link {
  min-height: 44px;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--lr-navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mat-btn--link::before,
.mat-btn--link::after { content: none; }

.mat-btn--link:focus-visible {
  outline-offset: 2px;
  color: var(--lr-navy);
}

@media (hover: hover) {
  .mat-btn--link:hover { color: var(--lr-ink); }
}

.mat-vazio {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--lr-rule);
  border-left: 4px solid var(--lr-yellow);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lr-ink-70);
}

/* --- Catálogo de impressos (#impressos) -----------------------------------
   Montado por assets/js/materiais.js dentro de #mat-impressos-lista. A seção
   inteira é .mat-section--navy (texto branco sobre azul chapado) — o único
   lugar da página com esse fundo fora do hero/rodapé — então os campos de
   formulário (checkbox e quantidade) precisam de fundo claro próprio para
   manter contraste AA; não dá para herdar a cor de texto branca do resto da
   seção. .is-escolhido usa borda amarela — uso aprovado do amarelo chapado
   aqui é só borda, nunca faixa de fundo preenchida.

   Armadilha de especificidade já documentada neste arquivo (ver bloco "Foco
   visível" no topo): a substituição de outline amarelo em contexto navy só
   cobria `a` e `button`, não `input` — corrigido ali mesmo, não aqui, porque
   é a mesma regra compartilhada que vale para qualquer input futuro dentro
   de .mat-section--navy, não só o desta seção. */
.mat-impressos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mat-gap);
  margin-top: 32px;
}

@media (min-width: 768px) {
  .mat-impressos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .mat-impressos { grid-template-columns: repeat(3, 1fr); }
}

/* Grid com áreas nomeadas em vez de depender da ordem dos filhos: o JS
   (assets/js/materiais.js) anexa foto/check/label/desc/qtd nessa ordem por
   causa da ordem de tabulação (check antes de qtd; label e desc não são
   alcançáveis por Tab), não pela ordem visual. grid-area desacopla as duas. */
.mat-impresso {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "foto  foto"
    "check label"
    "desc  desc"
    "qtd   qtd";
  column-gap: 10px;
  row-gap: 10px;
  padding-bottom: 18px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--mat-micro) var(--mat-ease-out);
}

.mat-impresso.is-escolhido {
  border-color: var(--lr-yellow);
}

.mat-impresso__foto {
  grid-area: foto;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.mat-impresso__check {
  grid-area: check;
  align-self: center;
  justify-self: start;
  width: 22px;
  height: 22px;
  margin-left: 16px;
  accent-color: var(--lr-yellow);
  cursor: pointer;
}

.mat-impresso__label {
  grid-area: label;
  align-self: center;
  margin-right: 16px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  cursor: pointer;
}

.mat-impresso__desc {
  grid-area: desc;
  margin: 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Fundo branco explícito: é o campo de formulário que precisa do contraste
   AA sobre o azul chapado, então não herda cor nenhuma do contexto navy. */
.mat-impresso__qtd {
  grid-area: qtd;
  margin: 0 16px;
  min-height: 46px;
  padding: 0 14px;
  border: 2px solid var(--lr-rule);
  background: #FFFFFF;
  color: var(--lr-ink);
  font-family: var(--lr-font-body);
  font-size: 15px;
  transition:
    opacity var(--mat-micro) var(--mat-ease-out),
    border-color var(--mat-micro) var(--mat-ease-out);
}

/* Nasce desabilitado (JS) até o checkbox irmão ser marcado — opacidade
   reduzida sinaliza visualmente o mesmo estado que o atributo já comunica
   a leitor de tela e navegação por teclado. */
.mat-impresso__qtd:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mat-impresso__qtd:focus-visible {
  border-color: var(--lr-navy);
}

/* --- Rodapé -------------------------------------------------------------- */
/* Sem a régua no topo o rodapé azul encostava direto na seção #impressos,
   também azul, e os dois liam como um bloco só. */
.mat-footer {
  position: relative;
  padding: 48px 0 28px;
  background: var(--lr-navy);
  color: var(--lr-cream);
  --mat-stub: var(--lr-yellow);
  --mat-tick: rgba(255, 255, 255, 0.26);
}

.mat-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.mat-footer__inner { position: relative; }

.mat-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.mat-footer__logo {
  display: block;
  width: 100%;
  max-width: 260px;
  margin-bottom: 20px;
  transition: opacity var(--mat-micro) var(--mat-ease-out);
}

.mat-footer__logo img {
  width: 100%;
  height: auto;
}

@media (hover: hover) {
  .mat-footer__logo:hover { opacity: 0.78; }
}

.mat-footer__heading {
  margin: 0 0 18px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Filete amarelo antes do título de coluna: repete o toco da régua na
   escala do rodapé e amarra as três colunas. */
.mat-footer__heading::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--lr-yellow);
}

.mat-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.mat-footer__link {
  position: relative;
  display: inline-block;
  padding: 3px 0;
  color: rgba(255, 251, 237, 0.72);
  font-size: 14px;
  transition: color var(--mat-micro) var(--mat-ease-out);
}

/* Sublinhado que varre da esquerda. Só transform. */
.mat-footer__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--lr-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--mat-ease-wipe);
}

.mat-footer__link:focus-visible { color: var(--lr-yellow); }
.mat-footer__link:focus-visible::after { transform: none; }

@media (hover: hover) {
  .mat-footer__link:hover { color: var(--lr-yellow); }
  .mat-footer__link:hover::after { transform: none; }
}

.mat-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.mat-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  transition:
    border-color var(--mat-micro) var(--mat-ease-out),
    color var(--mat-micro) var(--mat-ease-out),
    transform 180ms var(--mat-ease-out);
}

.mat-footer__social-link svg { display: block; }

.mat-footer__social-link:focus-visible {
  border-color: var(--lr-yellow);
  color: var(--lr-yellow);
}

.mat-footer__social-link:active { transform: scale(0.94); }

@media (hover: hover) {
  .mat-footer__social-link:hover {
    border-color: var(--lr-yellow);
    color: var(--lr-yellow);
    transform: translate3d(0, -2px, 0);
  }
}

.mat-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 251, 237, 0.6);
}

.mat-footer__legal { margin: 0; }

.mat-footer__legal--cnpj { letter-spacing: 0.01em; }

@media (min-width: 768px) {
  .mat-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .mat-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .mat-footer { padding: 72px 0 32px; }

  .mat-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    gap: 44px;
  }
}

/* --- Seletor de grupo por cidade ------------------------------------------
   #grupos já chega com cabeçalho de seção pronto (eyebrow/h2/lead) no HTML;
   o widget só acrescenta campo, sugestões e resultado, sem repetir título.
   Montado por assets/js/grupos-widget.js dentro de #grupo-widget. Nada
   aqui usa data-mat-reveal — ver o comentário no topo do JS. */
.mat-grupo { margin-top: 28px; }

.mat-autocomplete {
  position: relative;
  max-width: 420px;
}

.mat-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-ink);
}

.mat-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--lr-rule);
  background: #FFFFFF;
  font-family: var(--lr-font-body);
  font-size: 16px;
  color: var(--lr-ink);
  transition: border-color var(--mat-micro) var(--mat-ease-out);
}

.mat-input::placeholder { color: var(--lr-muted); }

.mat-input:focus-visible { border-color: var(--lr-navy); }

/* role="listbox" flutua sob o campo. z-index acima do resto da seção,
   sombra própria porque aqui, diferente do resto da página, o conteúdo
   precisa parecer "por cima", não encaixado no fluxo. */
.mat-suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  margin: 0;
  overflow-y: auto;
  border: 2px solid var(--lr-navy);
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(0, 20, 60, 0.16);
}

.mat-suggestions__item {
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--lr-ink-70);
  cursor: pointer;
}

.mat-suggestions__item + .mat-suggestions__item { border-top: 1px solid var(--lr-rule-soft); }

.mat-suggestions__item.is-active {
  background: var(--lr-gray);
  color: var(--lr-ink);
}

@media (hover: hover) {
  .mat-suggestions__item:hover {
    background: var(--lr-gray);
    color: var(--lr-ink);
  }
}

.mat-suggestions__empty {
  margin-top: 10px;
  font-size: 14px;
  color: var(--lr-muted);
}

.mat-grupo__privacidade {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lr-muted);
}

/* Padrão sr-only: some visualmente, continua audível para leitor de tela. */
.mat-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mat-grupo__resultado {
  max-width: 420px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--lr-rule);
  border-left: 4px solid var(--lr-whatsapp);
  background: var(--lr-gray);
}

.mat-grupo__texto {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lr-ink-70);
}

.mat-grupo__texto strong { color: var(--lr-ink); }

/* --lr-whatsapp (#12A150) com texto branco dá só 3.37:1 — abaixo do
   mínimo AA de 4.5:1 para este texto (15.5px/700 não é "texto grande").
   Achado do audit da Task 14: o botão usa um verde mais escuro que o
   token de marca só aqui, especificamente por causa do texto branco em
   cima. #0C7A3D passa em 5.43:1. */
.mat-btn--wa {
  border-color: #0C7A3D;
  background: #0C7A3D;
  color: #FFFFFF;
}

.mat-btn--wa::before { background: #095C2E; }

.mat-btn--wa:focus-visible,
.mat-btn--wa:hover { border-color: #095C2E; color: #FFFFFF; }

/* Armadilha conhecida (já aconteceu no avatar.css): .mat-btn é
   display:inline-flex, que vence o [hidden] do user agent. Reforçar aqui
   para o resultado nunca ficar visível fora da hora. */
.mat-btn[hidden] { display: none !important; }

@media (min-width: 768px) {
  .mat-grupo { margin-top: 36px; }
}

/* --- Formulário de pedido (#mat-pedido-form) ------------------------------
   Montado estático em materiais.html (Task 12), ligado por
   assets/js/materiais.js. Fica dentro de #impressos, que é
   .mat-section--navy — mesma armadilha de contraste já documentada acima do
   bloco .mat-impressos: label, "opcional", nota final e título precisam de
   cor clara própria, e o campo de erro precisa de um tom de vermelho mais
   claro que --lr-red para continuar em AA sobre azul chapado (o vermelho de
   marca puro só passa em ~2.7:1 nesse fundo). O campo de cidade reaproveita
   .mat-autocomplete/.mat-input/.mat-suggestions* já usados em #grupos —
   mesmo componente, mesma aparência, sem duplicar regra. */
.mat-form {
  max-width: 480px;
  margin-top: 40px;
}

.mat-section--navy .mat-form { color: #FFFFFF; }

.mat-field {
  margin-top: 20px;
}

.mat-form .mat-h3 { margin-top: 0; }

.mat-section--navy .mat-label { color: #FFFFFF; }

/* Achado do review da Task 12: .mat-suggestions__empty (mensagem "não
   encontramos" do autocomplete de cidade) só existia com --lr-muted, correto
   em #grupos (fundo claro, 4,59:1) mas insuficiente em #impressos/
   .mat-section--navy (2,57:1, abaixo do mínimo AA de 4,5:1) — o campo
   #ped-cidade desta task é a segunda instância dessa classe na página, agora
   dentro do fundo navy. Mesmo padrão de .mat-opcional/.mat-form__nota logo
   abaixo. */
.mat-section--navy .mat-suggestions__empty { color: rgba(255, 255, 255, 0.7); }

.mat-input--area {
  min-height: 96px;
  padding: 14px 16px;
  resize: vertical;
}

.mat-opcional {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lr-muted);
}

.mat-section--navy .mat-opcional { color: rgba(255, 255, 255, 0.7); }

.mat-erro {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #C81730;
}

.mat-erro:empty { display: none; }

.mat-section--navy .mat-erro { color: #FF8A99; }

/* Anel vermelho sutil, além da mensagem ao lado — reforça o campo inválido
   para quem não lê a mensagem de erro por perto. */
.mat-input[aria-invalid="true"] { border-color: #C81730; }

.mat-section--navy .mat-input[aria-invalid="true"] { border-color: #FF8A99; }

.mat-btn--bloco {
  display: flex;
  width: 100%;
  margin-top: 24px;
}

.mat-form__nota {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lr-muted);
}

.mat-section--navy .mat-form__nota { color: rgba(255, 255, 255, 0.7); }

/* --- Entrada ao rolar ----------------------------------------------------
   TUDO aqui é condicionado a html.mat-anim, e quem coloca essa classe é o
   assets/js/materiais-anim.js. Sem JS, com JS bloqueado ou com JS quebrado
   a classe não existe e nada abaixo se aplica: a página nasce visível.
   Nunca mova estas regras para fora do html.mat-anim. */

html.mat-anim [data-mat-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--mat-enter) var(--mat-ease-out),
    transform var(--mat-enter) var(--mat-ease-out);
}

html.mat-anim [data-mat-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Contêiner em cascata: ele mesmo não se move, os filhos diretos sobem
   em sequência. Cada alvo entra uma vez só por carregamento. */
html.mat-anim [data-mat-reveal="stagger"] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.mat-anim [data-mat-reveal="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--mat-enter) var(--mat-ease-out),
    transform var(--mat-enter) var(--mat-ease-out);
}

html.mat-anim [data-mat-reveal="stagger"].is-in > * {
  opacity: 1;
  transform: none;
}

html.mat-anim [data-mat-reveal="stagger"].is-in > *:nth-child(1) { transition-delay: 0ms; }
html.mat-anim [data-mat-reveal="stagger"].is-in > *:nth-child(2) { transition-delay: var(--mat-step); }
html.mat-anim [data-mat-reveal="stagger"].is-in > *:nth-child(3) { transition-delay: calc(var(--mat-step) * 2); }
html.mat-anim [data-mat-reveal="stagger"].is-in > *:nth-child(4) { transition-delay: calc(var(--mat-step) * 3); }
html.mat-anim [data-mat-reveal="stagger"].is-in > *:nth-child(5) { transition-delay: calc(var(--mat-step) * 4); }
html.mat-anim [data-mat-reveal="stagger"].is-in > *:nth-child(n + 6) { transition-delay: calc(var(--mat-step) * 5); }

/* A régua corrida varre da esquerda, mais lenta que o texto: é ela que
   dá o tempo da seção. */
html.mat-anim .mat-section__head[data-mat-reveal]::before {
  transform: scaleX(0);
  transition: transform 760ms var(--mat-ease-wipe) 60ms;
}

html.mat-anim .mat-section__head[data-mat-reveal].is-in::before { transform: none; }

/* Marca d'água: deriva da direita, devagar, e sozinha. */
html.mat-anim .mat-watermark {
  transform: translate3d(28px, 0, 0);
  transition:
    opacity 900ms var(--mat-ease-out) 160ms,
    transform 900ms var(--mat-ease-out) 160ms;
}

/* Filete da palavra grifada: último movimento da abertura. */
html.mat-anim .mat-hero .mat-mark::after {
  transform: scaleX(0);
  transition: transform 520ms var(--mat-ease-wipe) 620ms;
}

html.mat-anim .mat-hero__inner.is-in .mat-mark::after { transform: none; }

/* Impressão: a folha não rola, então nada dispara o observer. Sem esta trava
   o papel sairia com metade da página em branco. */
@media print {
  html.mat-anim [data-mat-reveal],
  html.mat-anim [data-mat-reveal="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  html.mat-anim .mat-section__head[data-mat-reveal]::before,
  html.mat-anim .mat-hero .mat-mark::after {
    transform: none !important;
  }
}

/* --- Movimento reduzido -------------------------------------------------- */
/* O JS já desiste de rodar quando a preferência está ligada. Este bloco é a
   segunda trava: cobre o caso de o usuário trocar a preferência com a página
   já aberta, com a classe mat-anim no lugar. Conteúdo sempre visível. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html.mat-anim [data-mat-reveal],
  html.mat-anim [data-mat-reveal] > *,
  html.mat-anim [data-mat-reveal="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  html.mat-anim .mat-section__head[data-mat-reveal]::before,
  html.mat-anim .mat-hero .mat-mark::after,
  html.mat-anim .mat-watermark {
    opacity: 1 !important;
    transform: none !important;
  }
}