/*
  Tema da página da coleção Combate à Violência Doméstica ("Entender para combater"). Tema sério:
  grafite quase preto e o laranja do logo, o meio-tom do catálogo (pág. 21) apoiado nas bordas e tons
  claros e quentes nas seções de leitura. O Projeto com os pontos que o livro aborda (trechos do próprio
  texto do catálogo), onde buscar ajuda (canais oficiais e gratuitos) e o lema da capa ao lado do livro.
  Sem imagem de violência e sem personagem; nada pula ou brinca, os blocos só surgem com calma.
  Só vale dentro de <main class="tema-combate">. Títulos na Anton (como o logo); "O Projeto" em
  Montserrat fina, como a Anona Thin do catálogo.
  As animações só ligam com .tm-js no <html> (posta no <head> quando o navegador tem
  IntersectionObserver e a pessoa não pediu "menos movimento").
*/
.tema-combate{
  --cv-preto:#141414;
  --cv-grafite:#1C1C1C;
  --cv-laranja:#E2562E;
  --cv-laranja-escuro:#C2410C;
  --cv-creme:#F4EEE8;
  --cv-creme-2:#EDE5DD;
  --cv-pessego:#FBE9E0;
  --cv-texto:#3A3533;
  --cv-titulo:"Anton", var(--fonte);
}
.tema-combate .cv-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* meio-tom do catálogo: a imagem é só a máscara, a cor vem daqui; apoiado no alto e à esquerda */
.tema-combate .cv-pontos{position:absolute;left:0;top:0;height:100%;aspect-ratio:766/666;pointer-events:none;background:#fff;opacity:.11;
  -webkit-mask:url(../img/combate/pontos.webp) left top/contain no-repeat;mask:url(../img/combate/pontos.webp) left top/contain no-repeat}
.tema-combate .secao-topo h2{font-family:var(--cv-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;
  font-size:clamp(2rem,3.8vw,2.8rem);color:var(--cv-preto)}
.tema-combate .secao-topo h2::after{content:"";display:block;width:56px;height:4px;margin-top:12px;border-radius:2px;background:var(--cv-laranja)}
.tema-combate .secao-topo.centro h2::after{margin-inline:auto}

/* ===== topo: grafite, meio-tom no canto e uma luz discreta, como a janela da capa ===== */
.tema-combate .colecao-topo{position:relative;overflow:hidden;padding-block:64px 72px;background:var(--cv-preto)}
.tema-combate .colecao-topo .container{position:relative;z-index:1}
.tema-combate .cv-luz{position:absolute;top:-40%;right:-6%;width:min(60%,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,222,.10),rgba(255,236,222,0))}
/* rótulo na caixa laranja, como "ENTENDER PARA COMBATER" no logo */
.tema-combate .colecao-topo .rotulo{display:inline-block;background:var(--cv-laranja-escuro);color:#fff;padding:5px 12px;letter-spacing:.16em}
.tema-combate .colecao-topo h1{font-family:var(--cv-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  color:#fff;font-size:clamp(2.4rem,4.8vw,3.9rem);margin-top:12px}
.tema-combate .colecao-tagline{color:#CFC8C3;font-weight:500}
.tema-combate .colecao-logo{border-radius:16px;box-shadow:0 22px 44px -22px rgba(0,0,0,.7)}

/* ===== descrição + o livro ===== */
.tema-combate .secao-descricao{background:var(--cv-creme);padding-bottom:84px}
.tema-combate .cv-duas{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.tema-combate .cv-cartao{max-width:none;margin:0;background:#fff;border-radius:20px;padding:40px 42px 28px;box-shadow:0 24px 48px -34px rgba(20,20,20,.4)}
.tema-combate .cv-cartao::before{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--cv-laranja);margin-bottom:22px}
.tema-combate .cv-cartao p{color:var(--cv-texto)}
.tema-combate .cv-livro{max-width:520px;justify-self:center;width:100%;text-align:center}
.tema-combate .cv-livro img{display:block;width:100%;height:auto}
/* a capa plana no lugar do livro 3D (14/10/2026): em pé, com a mesma borda e sombra das capas da seção "Capas da coleção" */
.tema-combate .cv-livro .cv-capa{width:min(100%,360px);margin:0 auto 18px;border-radius:3px 8px 8px 3px;box-shadow:0 30px 44px -24px rgba(20,20,20,.6)}
/* o selo da capa */
.tema-combate .cv-selo{display:inline-block;margin:6px 0 0;padding:9px 16px;border:1.5px solid currentColor;border-radius:999px;color:#B23A0B;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}

/* ===== O Projeto (grafite): o texto do catálogo e o que o livro aborda ===== */
.tema-combate .cv-projeto{position:relative;overflow:hidden;background:var(--cv-grafite);color:#D9D4CF}
.tema-combate .cv-projeto .container{position:relative;z-index:1}
/* meio-tom espelhado, apoiado no alto e à direita */
.tema-combate .cv-pontos-projeto{left:auto;right:0;height:auto;width:min(36%,460px);opacity:.06;transform:scaleX(-1)}
.tema-combate .cv-projeto-topo{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start;margin-bottom:48px}
.tema-combate .cv-fino{margin:0;font-family:var(--fonte);font-weight:300;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1.05;color:#fff;letter-spacing:-.01em}
.tema-combate .cv-fino::after{content:"";display:block;width:56px;height:4px;margin-top:16px;border-radius:2px;background:var(--cv-laranja)}
.tema-combate .cv-projeto-topo p{margin:0;font-size:1.08rem;line-height:1.8;color:#D9D4CF}
.tema-combate .cv-temas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tema-combate .cv-tema{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px 24px;background:rgba(255,255,255,.035)}
.tema-combate .cv-icone{display:block;width:36px;height:36px;color:var(--cv-laranja);margin-bottom:16px}
.tema-combate .cv-tema p{margin:0;color:#F2EEEA;font-weight:600;font-size:1rem;line-height:1.5}

/* ===== onde buscar ajuda ===== */
.tema-combate .cv-ajuda{background:var(--cv-pessego)}
.tema-combate .cv-ajuda .secao-topo p{color:var(--cv-texto);font-weight:500;margin-top:14px}
.tema-combate .cv-canais{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tema-combate .cv-canal{display:flex;flex-direction:column;gap:8px;height:100%;background:#fff;border-radius:20px;padding:28px 26px;
  text-decoration:none;color:var(--cv-texto);box-shadow:0 22px 40px -32px rgba(20,20,20,.45)}
.tema-combate .cv-numero{font-family:var(--cv-titulo);font-size:3.4rem;line-height:1;color:var(--cv-laranja-escuro);letter-spacing:.02em}
.tema-combate .cv-canal strong{font-size:1.04rem;color:var(--cv-preto);text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s}
.tema-combate .cv-canal-nota{font-size:.9rem;line-height:1.5;color:#6A625E}
.tema-combate .cv-canal:hover strong{text-decoration-color:var(--cv-laranja)}
.tema-combate .cv-canal:focus-visible{outline:3px solid var(--cv-laranja-escuro);outline-offset:3px}

/* ===== demonstração: o lema da capa ao lado do livro ===== */
.tema-combate .secao-demonstracao{background:var(--cv-creme);padding-top:72px}
.tema-combate .cv-palco{display:flex;align-items:stretch;gap:28px}
.tema-combate .cv-lema{position:relative;overflow:hidden;flex:0 0 clamp(210px,24vw,300px);margin:0;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:8px;padding:34px 30px;border-radius:20px;background:var(--cv-preto);color:#fff;font-family:var(--cv-titulo);
  text-transform:uppercase;line-height:.95;font-size:clamp(2.3rem,3.6vw,3.3rem);letter-spacing:.01em}
/* meio-tom apoiado no canto do cartão */
.tema-combate .cv-lema::before{content:"";position:absolute;left:0;top:0;width:90%;aspect-ratio:766/666;background:#fff;opacity:.09;
  -webkit-mask:url(../img/combate/pontos.webp) left top/contain no-repeat;mask:url(../img/combate/pontos.webp) left top/contain no-repeat}
.tema-combate .cv-lema span{position:relative;display:block}
.tema-combate .cv-lema span:nth-child(2){font-size:.55em;color:#CFC8C3}
.tema-combate .cv-lema-caixa{background:var(--cv-laranja-escuro);padding:6px 10px 4px}
.tema-combate .cv-palco > :last-child{flex:1;min-width:0}
.tema-combate .placeholder-flipbook{min-height:420px;background:#fff;border-color:#D2C5B9;color:#7A6E66}
.tema-combate .flipbook-caixa{background:#fff}

/* ===== capa (volume único), no centro ===== */
.tema-combate .secao.fundo{background:var(--cv-creme-2)}
.tema-combate .secao.fundo .secao-topo{margin-inline:auto;text-align:center}
.tema-combate .secao.fundo .secao-topo h2::after{margin-inline:auto}
.tema-combate .grade-capas{grid-template-columns:minmax(0,280px);justify-content:center}
.tema-combate .capa-ampliar{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:3px 8px 8px 3px;box-shadow:0 22px 36px -20px rgba(20,20,20,.6);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-combate .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-combate .capa-ampliar::before{content:"";position:absolute;inset:0 auto 0 0;width:6%;border-radius:3px 0 0 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12) 45%,rgba(0,0,0,.05))}
.tema-combate .capa-ampliar:focus-visible{outline:3px solid var(--cv-preto);outline-offset:4px}
@media (hover:hover){
  .tema-combate .capa-ampliar:hover{transform:perspective(900px) rotateY(-8deg) translateY(-6px);box-shadow:14px 26px 34px -18px rgba(20,20,20,.6)}
}
/* capa ampliada: janela por cima da página (não sai dela) */
.tema-combate .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-combate .tm-ampliada::backdrop{background:rgba(12,12,12,.88)}
.tema-combate .tm-ampliada img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:4px 10px 10px 4px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tema-combate .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--cv-preto);font-family:var(--fonte);font-size:1.15rem;font-weight:800;line-height:1;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.tema-combate .tm-fechar:focus-visible{outline:3px solid var(--cv-laranja);outline-offset:2px}

/* ===== botão final: grafite com o meio-tom no canto ===== */
.tema-combate .colecao-cta{position:relative;overflow:hidden;padding-block:88px;background:var(--cv-preto)}
.tema-combate .colecao-cta .container{position:relative;z-index:1}
/* o meio-tom girado, apoiado embaixo e à direita */
.tema-combate .cv-pontos-cta{left:auto;top:auto;right:0;bottom:0;transform:rotate(180deg)}
.tema-combate .botao-colecao{background:var(--cv-laranja-escuro);color:#fff}

/* ===== animações (só com .tm-js): só surgem, com calma ===== */
@keyframes cv-zoom{from{opacity:0;transform:scale(.96)}}
.tm-js .tema-combate .cv-cartao p,
.tm-js .tema-combate .capa,
.tm-js .tema-combate .tm-revela{opacity:0;translate:0 16px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-combate .cv-cartao p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-combate .cv-cartao p:nth-of-type(3){transition-delay:.24s}
.tm-js .tema-combate .cv-tema:nth-child(3n+2){transition-delay:.1s}
.tm-js .tema-combate .cv-tema:nth-child(3n){transition-delay:.2s}
.tm-js .tema-combate .cv-canais li:nth-child(2) .cv-canal{transition-delay:.1s}
.tm-js .tema-combate .cv-canais li:nth-child(3) .cv-canal{transition-delay:.2s}
.tm-js .tema-combate .cv-cartao p.tm-visivel,
.tm-js .tema-combate .capa.tm-visivel,
.tm-js .tema-combate .tm-revela.tm-visivel{opacity:1;translate:0 0}
@media (prefers-reduced-motion:no-preference){
  .tema-combate .tm-ampliada[open]{animation:cv-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-combate .capa-ampliar,.tema-combate .cv-canal strong{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-combate .cv-duas{grid-template-columns:1fr;gap:34px}
  .tema-combate .cv-livro{max-width:440px}
  .tema-combate .cv-projeto-topo{grid-template-columns:1fr;gap:22px}
  .tema-combate .cv-temas{grid-template-columns:1fr 1fr}
  .tema-combate .colecao-topo .cv-pontos{height:auto;width:min(46%,340px)}
}
@media (max-width:767px){
  .tema-combate .colecao-topo{padding-block:44px 56px}
  .tema-combate .cv-cartao{padding:30px 20px 22px;border-radius:18px}
  .tema-combate .secao-descricao{padding-bottom:56px}
  .tema-combate .cv-temas{grid-template-columns:1fr;gap:12px}
  .tema-combate .cv-tema{display:flex;gap:16px;align-items:flex-start;padding:20px 18px}
  .tema-combate .cv-icone{flex:0 0 auto;margin:0}
  .tema-combate .cv-canais{grid-template-columns:1fr;gap:14px}
  .tema-combate .cv-canal{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:4px;align-items:center;padding:22px 20px}
  .tema-combate .cv-numero{grid-row:span 2;font-size:2.8rem}
  .tema-combate .cv-palco{flex-direction:column;gap:14px}
  .tema-combate .cv-lema{flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:6px;padding:20px 22px;font-size:2rem}
  .tema-combate .cv-lema span:nth-child(2){font-size:.7em}
  .tema-combate .placeholder-flipbook{min-height:260px}
  .tema-combate .grade-capas{grid-template-columns:minmax(0,230px)}
  .tema-combate .cv-livro .cv-capa{width:min(100%,280px)}
}

/* rodapé desta coleção: o grafite do livro (o resto do rodapé é o mesmo do site) */
.tema-combate ~ .site-footer{--cor-rodape:#1C1C1C}