/* Catálogos (07/10/2026): os quatro catálogos em vitrine, os modelos 3D e o formulário de download.
   Vitrine (escolhas do dono: "Tela e celular", "Um por linha"): cada catálogo numa linha, alternando o lado; o
   mockup é um fundo na cor do catálogo (as cores do site, com o canto da marca) e, sobre ele, uma tela de computador
   com as páginas da versão de computador trocando devagar e um celular rolando a versão de celular, parando em cada
   página como quem lê. Tudo medido em cqw (largura do mockup), então a cena é a mesma em qualquer tamanho.
   O formulário entra embaixo do item clicado, sem janela por cima; abaixo de 480 px de largura do lugar dele, um
   campo por linha. */

/* ---------- a vitrine ---------- */
.cat-vitrine { display: grid; gap: clamp(72px, 9vw, 150px); }
.cat-livro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 112px); align-items: center; }
.cat-livro:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cat-livro:nth-child(even) .cat-mock { order: 2; }
.cat-livro-texto h2 { margin: 0 0 14px; font: 500 var(--rf-t-titulo)/1.04 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.cat-livro-texto > p:not(.cat-meta), .cat-modelos-texto > p:not(.cat-meta) { max-width: 40ch; margin: 0; font: var(--rf-t-leitura)/1.6 var(--font-body); }
.cat-meta { margin: 12px 0 0; font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.cat-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 18px; }
.cat-acoes .is-placeholder { opacity: .45; pointer-events: none; }
.cat-acoes .ws-link[aria-expanded="true"] { border-bottom-width: 2px; }

/* ---------- o mockup: o fundo, a tela e o celular ---------- */
.cat-mock { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px 44px 2px 2px; background: var(--chao, var(--areia)); container-type: inline-size; }
/* a tela: moldura escura, vidro 16:9, pé em trapézio e base; a sombra cai no fundo do mockup */
.cat-tela { position: absolute; left: 7cqw; top: 9.5cqw; width: 70cqw; }
.cat-tela-moldura { padding: 1.15cqw; border-radius: 1.6cqw; background: #13120f;
  box-shadow: inset 0 0 0 1px rgba(249, 246, 237, .07), 0 3.2cqw 5.5cqw -2.4cqw rgba(25, 23, 17, .55); }
.cat-tela-vidro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .45cqw; background: #0d0c0a; }
.cat-pag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ws-ease, cubic-bezier(.22, 1, .36, 1)); }
.cat-pag.is-ativa { opacity: 1; }
.cat-tela-pe { position: relative; height: 7.4cqw; }
.cat-tela-pe i { position: absolute; left: 50%; display: block; transform: translateX(-50%); }
.cat-tela-pe i:first-child { top: 0; width: 13cqw; height: 6.4cqw; background: linear-gradient(#2c2b26, #171612 70%); clip-path: polygon(27% 0, 73% 0, 100% 100%, 0 100%); }
.cat-tela-pe i:last-child { bottom: 0; width: 25cqw; height: 1.1cqw; border-radius: .9cqw .9cqw .35cqw .35cqw; background: #1c1b17;
  box-shadow: 0 1.3cqw 2.2cqw -.4cqw rgba(25, 23, 17, .5); }
/* o celular: na frente da tela, à direita; dentro dele, as páginas rolam por baixo da barra de cima */
.cat-celular { position: absolute; right: 8cqw; bottom: 7cqw; width: 21cqw; }
.cat-celular-moldura { padding: .85cqw; border-radius: 3.7cqw; background: #13120f;
  box-shadow: inset 0 0 0 1px rgba(249, 246, 237, .09), -1.2cqw 3.4cqw 5cqw -1.6cqw rgba(25, 23, 17, .6); }
.cat-celular-vidro { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 2.9cqw; background: #0d0c0a; container-type: inline-size; }
.cat-celular-vidro::before { content: ""; position: absolute; z-index: 2; top: 3.4cqw; left: 50%; width: 31cqw; height: 8.6cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.cat-celular-vidro::after { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 15cqw; background: linear-gradient(#0d0c0a 55%, rgba(13, 12, 10, 0)); pointer-events: none; }
.cat-celular-rolo { display: grid; gap: 2.5cqw; padding-top: 14cqw; will-change: transform; animation: cat-rola 17s cubic-bezier(.65, 0, .35, 1) infinite; animation-play-state: paused; }
.cat-celular-rolo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.cat-mock.is-vivo .cat-celular-rolo { animation-play-state: running; }
/* quatro paradas (uma página inteira na tela, como quem lê) e a volta ao começo */
@keyframes cat-rola {
  0%, 12% { transform: translateY(0); }
  18%, 31% { transform: translateY(-127.5cqw); }
  37%, 50% { transform: translateY(-255cqw); }
  56%, 69% { transform: translateY(-382.5cqw); }
  75%, 88% { transform: translateY(-510cqw); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-celular-rolo { animation: none; }
  .cat-pag { transition: none; }
}

/* ---------- os modelos 3D: uma linha, o título à esquerda como nas perguntas ---------- */
.cat-modelos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); padding-top: 0; align-items: start; }
.cat-modelos::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: clamp(48px, 5vw, 80px); background: var(--ws-rule); }
.cat-modelos h2 { margin: 0; font: 500 var(--rf-t-titulo)/1.04 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.cat-modelos-texto { grid-column: 2; }

/* ---------- o formulário ---------- */
.dl-lugar { container-type: inline-size; }
.dl-form { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--ws-rule); }
.dl-form[hidden] { display: none; }
.dl-titulo { margin: 0; font: 500 clamp(19px, 1.45vw, 23px)/1.25 var(--font-display); letter-spacing: -.012em; }
.dl-nota { margin: 6px 0 0; font: var(--rf-t-apoio)/1.55 var(--font-body); opacity: .8; }
.dl-campos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin-top: 24px; }
.dl-campo--email { grid-column: 1 / -1; }
.dl-campo label { display: block; font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.dl-opcional { letter-spacing: .02em; text-transform: none; opacity: .7; }
.dl-campo :is(input, select) {
  display: block; width: 100%; min-height: 48px; margin: 4px 0 0; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--ws-rule); border-radius: 0; background-color: transparent; color: inherit;
  font: 400 17px/1.4 var(--font-body); -webkit-appearance: none; appearance: none; transition: border-color .25s;
}
.dl-campo select { padding-right: 28px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23191711' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center; }
@media (hover: hover) and (pointer: fine) { .dl-campo :is(input, select):hover { border-bottom-color: currentColor; } }
.dl-campo :is(input, select):focus { border-bottom-color: currentColor; }
.dl-campo [aria-invalid="true"] { border-bottom: 2px solid var(--terra); padding-bottom: 9px; }
.dl-erro { margin: 6px 0 0; color: var(--terra); font: 500 13px/1.4 var(--font-body); }
.dl-erro[hidden] { display: none; }
/* a isca anti-robô: fora da tela e fora do teclado */
.dl-isca { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.dl-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.dl-cancelar { min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 15px/1.3 var(--font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.dl-form[aria-busy="true"] .ws-button { opacity: .6; cursor: progress; }
.dl-status { margin: 16px 0 0; font: var(--rf-t-apoio)/1.55 var(--font-body); }
.dl-status:empty { display: none; }
.dl-status a, .dl-ok a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.dl-msgs { display: none; }
.dl-ok { margin: 20px 0 0; font: var(--rf-t-apoio)/1.55 var(--font-body); }
.dl-ok:focus { outline: none; }
@container (max-width: 480px) {
  .dl-campos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- até 991 px: o mockup em cima, o texto embaixo ---------- */
@media (max-width: 991px) {
  .cat-livro, .cat-livro:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .cat-livro:nth-child(even) .cat-mock { order: 0; }
  .cat-mock { max-width: 760px; }
}
/* celular: o mockup mais alto, para o celular da cena caber maior */
@media (max-width: 767px) {
  .cat-mock { aspect-ratio: 4 / 3; border-radius: 2px 28px 2px 2px; }
  .cat-tela { left: 5cqw; top: 8cqw; width: 74cqw; }
  .cat-celular { right: 5cqw; bottom: 6cqw; width: 26cqw; }
  .cat-modelos { grid-template-columns: minmax(0, 1fr); }
  .cat-modelos-texto { grid-column: 1; margin-top: 16px; }
}