/*
  Tema da página da coleção Segurança na Escola ("Aprender para proteger"): sóbrio, como o livro e o catálogo
  (pág. 20): vermelho da capa, grafite, o meio-tom e o círculo azul-claro com hachuras do catálogo.
  O Projeto (ECA) em Direitos e Deveres, a linha do tempo dos marcos citados no texto e no selo da capa,
  e a estudante da capa apresentando o livro (com o balão tracejado da capa).
  Só vale dentro de <main class="tema-seguranca">. Títulos na Anton (como o logo); "O Projeto" em
  Montserrat fina, como a Anona Thin do catálogo. Movimento só o necessário, com calma.
  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-seguranca{
  --se-vermelho:#C8102E;
  --se-vermelho-vivo:#D90F26;
  --se-grafite:#1D1E22;
  --se-texto:#3B3F46;
  --se-azul:#C9E4F1;
  --se-azul-linha:#8DB4CA;
  --se-fundo-azul:#E6F2F8;
  --se-fundo-cinza:#EEF2F6;
  --se-fundo-rosa:#F8EEEF;
  --se-titulo:"Anton", var(--fonte);
}
.tema-seguranca .se-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 na direita e embaixo */
.tema-seguranca .se-pontos{position:absolute;right:0;bottom:0;height:100%;aspect-ratio:560/694;pointer-events:none;background:#7F95AC;opacity:.45;
  -webkit-mask:url(../img/seguranca/pontos.webp) right bottom/contain no-repeat;mask:url(../img/seguranca/pontos.webp) right bottom/contain no-repeat}
.tema-seguranca .se-circulo{position:absolute;border-radius:50%;background:var(--se-azul);pointer-events:none}
.tema-seguranca .se-hachura{position:absolute;border-radius:50%;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--se-azul-linha) 0 1.5px,transparent 1.5px 8px)}
.tema-seguranca .secao-topo h2{font-family:var(--se-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;
  font-size:clamp(2rem,3.8vw,2.8rem);color:var(--se-grafite)}
.tema-seguranca .secao-topo h2::after{content:"";display:block;width:56px;height:4px;margin-top:12px;border-radius:2px;background:var(--se-vermelho)}
.tema-seguranca .secao-topo.centro h2::after{margin-inline:auto}
/* "O Projeto" fino, como no catálogo */
.tema-seguranca .secao-topo h2.se-fino{font-family:var(--fonte);font-weight:300;text-transform:none;letter-spacing:-.01em;font-size:clamp(2.3rem,4.2vw,3.2rem)}

/* ===== topo: cinza-azulado, meio-tom à direita e o círculo azul-claro atrás do logo ===== */
.tema-seguranca .colecao-topo{position:relative;overflow:hidden;padding-block:64px 72px;background:var(--se-fundo-cinza)}
.tema-seguranca .colecao-topo .container{position:relative;z-index:1}
.tema-seguranca .colecao-topo .rotulo{display:inline-flex;align-items:center;gap:10px;color:var(--se-grafite);letter-spacing:.16em}
.tema-seguranca .colecao-topo .rotulo::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--se-vermelho)}
.tema-seguranca .colecao-topo h1{font-family:var(--se-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  color:var(--se-vermelho);font-size:clamp(2.5rem,5vw,4rem);margin-top:8px}
.tema-seguranca .se-circulo-topo{width:230px;aspect-ratio:1;top:50%;translate:0 -46%;right:calc(max(20px,(100% - var(--container))/2 + 20px) + 150px)}
.tema-seguranca .se-hachura-topo{width:120px;aspect-ratio:1;top:50%;translate:0 6%;right:calc(max(20px,(100% - var(--container))/2 + 20px) + 330px)}
.tema-seguranca .colecao-logo{position:relative;border-radius:16px;box-shadow:0 22px 44px -24px rgba(29,30,34,.45)}

/* ===== descrição + o livro (como na pág. 20: círculo azul-claro e hachuras atrás) ===== */
.tema-seguranca .secao-descricao{background:var(--se-fundo-azul);padding-bottom:84px}
.tema-seguranca .se-duas{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.tema-seguranca .se-cartao{max-width:none;margin:0;background:#fff;border-radius:20px;padding:40px 42px 28px;box-shadow:0 24px 48px -34px rgba(29,30,34,.4)}
.tema-seguranca .se-cartao::before{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--se-vermelho);margin-bottom:22px}
.tema-seguranca .se-cartao p{color:var(--se-texto)}
.tema-seguranca .se-livro{position:relative;max-width:520px;justify-self:center;width:100%}
.tema-seguranca .se-livro .se-circulo{left:2%;bottom:0;width:62%;aspect-ratio:1}
.tema-seguranca .se-livro .se-hachura{left:-4%;bottom:-6%;width:30%;aspect-ratio:1;opacity:.8}
.tema-seguranca .se-livro img{position:relative;display:block;width:100%;height:auto}

/* ===== O Projeto: Direitos e Deveres ===== */
.tema-seguranca .se-projeto{background:var(--se-fundo-rosa)}
.tema-seguranca .se-lados{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tema-seguranca .se-lado{background:#fff;border-radius:20px;padding:34px 36px 30px;box-shadow:0 24px 44px -34px rgba(29,30,34,.35)}
.tema-seguranca .se-icone{display:block;width:64px;height:64px;padding:15px;border-radius:50%;background:#FBE3E6;color:var(--se-vermelho)}
.tema-seguranca .se-lado h3{font-family:var(--se-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.7rem;line-height:1;
  color:var(--se-grafite);margin:18px 0 12px}
.tema-seguranca .se-lado p{margin:0;color:var(--se-texto);line-height:1.75}

/* ===== linha do tempo (grafite): os marcos do texto e o selo da capa ===== */
.tema-seguranca .se-tempo{position:relative;overflow:hidden;background:var(--se-grafite)}
.tema-seguranca .se-tempo .container{position:relative;z-index:1}
.tema-seguranca .se-tempo .secao-topo h2{color:#fff}
/* meio-tom apoiado na esquerda e embaixo (espelhado) */
.tema-seguranca .se-pontos-tempo{right:auto;left:0;height:auto;width:min(30%,380px);background:#fff;opacity:.07;transform:scaleX(-1)}
.tema-seguranca .se-linha{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tema-seguranca .se-marco{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:56px;color:#B7BCC6}
/* o marco (bolinha) e a ligação até o próximo: de 1979 a 1988 cinza tracejada, a partir da Constituição, vermelha */
.tema-seguranca .se-marco::before{content:"";position:absolute;z-index:1;top:12px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:var(--se-grafite);border:3px solid var(--se-vermelho-vivo);box-shadow:0 0 0 6px rgba(217,15,38,.16)}
.tema-seguranca .se-marco:not(:last-child)::after{content:"";position:absolute;top:21px;left:50%;width:calc(100% + 24px);height:2px;
  background:var(--se-vermelho-vivo);transform-origin:left center}
.tema-seguranca .se-passado::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px) !important}
.tema-seguranca .se-passado::before{border-color:#7C818B;box-shadow:none}
.tema-seguranca .se-ano{font-family:var(--se-titulo);font-size:2.4rem;line-height:1;color:#fff;letter-spacing:.02em}
.tema-seguranca .se-passado .se-ano{color:#9CA1AB}
.tema-seguranca .se-marco strong{display:block;margin-top:10px;color:#fff;font-size:1rem;line-height:1.35}
.tema-seguranca .se-nota{display:block;margin-top:6px;font-size:.9rem;line-height:1.45}
/* o último marco é o selo da capa */
.tema-seguranca .se-marco-selo strong{display:inline-block;margin-top:12px;padding:9px 14px;border-radius:999px;background:#fff;color:var(--se-grafite);
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;max-width:220px}

/* ===== demonstração: a estudante da capa apresenta o livro ===== */
.tema-seguranca .secao-demonstracao{background:var(--se-fundo-azul);padding-top:72px}
.tema-seguranca .tm-palco{display:flex;align-items:center;gap:32px}
.tema-seguranca .se-retrato{position:relative;flex:0 0 auto;width:clamp(180px,20vw,260px);padding-top:74px}
.tema-seguranca .tm-personagem{position:relative;display:block;width:100%;height:auto;border-radius:50%;border:7px solid #fff;
  outline:2px solid var(--se-vermelho);outline-offset:6px;box-shadow:0 22px 36px -22px rgba(29,30,34,.55)}
/* o balão tracejado da capa, subindo para o livro */
.tema-seguranca .se-balao{position:absolute;top:0;right:-6px;width:120px;height:auto;color:var(--se-vermelho);opacity:.85}
.tema-seguranca .se-rastro{stroke-dasharray:2 6}
.tema-seguranca .tm-palco > :last-child{flex:1;min-width:0}
.tema-seguranca .placeholder-flipbook{min-height:420px;background:#fff;border-color:#AFC3D3}
.tema-seguranca .flipbook-caixa{background:#fff}

/* ===== capa (volume único), no centro ===== */
.tema-seguranca .secao.fundo{background:var(--se-fundo-cinza)}
.tema-seguranca .secao.fundo .secao-topo{margin-inline:auto;text-align:center}
.tema-seguranca .secao.fundo .secao-topo h2::after{margin-inline:auto}
.tema-seguranca .grade-capas{grid-template-columns:minmax(0,280px);justify-content:center}
.tema-seguranca .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(29,30,34,.55);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-seguranca .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-seguranca .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,.25),rgba(255,255,255,.2) 45%,rgba(0,0,0,.05))}
.tema-seguranca .capa-ampliar:focus-visible{outline:3px solid var(--se-grafite);outline-offset:4px}
@media (hover:hover){
  .tema-seguranca .capa-ampliar:hover{transform:perspective(900px) rotateY(-8deg) translateY(-6px);box-shadow:14px 26px 34px -18px rgba(29,30,34,.55)}
}
/* capa ampliada: janela por cima da página (não sai dela) */
.tema-seguranca .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-seguranca .tm-ampliada::backdrop{background:rgba(20,21,24,.86)}
.tema-seguranca .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-seguranca .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--se-vermelho);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-seguranca .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: faixa vermelha com o meio-tom e as hachuras ===== */
.tema-seguranca .colecao-cta{position:relative;overflow:hidden;padding-block:88px;background:var(--se-vermelho-vivo)}
.tema-seguranca .colecao-cta .container{position:relative;z-index:1}
.tema-seguranca .se-pontos-cta{background:#fff;opacity:.2}
.tema-seguranca .se-hachura-cta{width:110px;aspect-ratio:1;left:7%;top:50%;translate:0 -50%;opacity:.35;
  background:repeating-linear-gradient(135deg,#fff 0 1.5px,transparent 1.5px 8px)}
.tema-seguranca .botao-colecao{background:#fff;color:var(--se-vermelho)}

/* ===== animações (só com .tm-js), calmas ===== */
@keyframes se-flutua{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes se-zoom{from{opacity:0;transform:scale(.94)}}
.tm-js .tema-seguranca .se-cartao p,
.tm-js .tema-seguranca .capa,
.tm-js .tema-seguranca .tm-revela{opacity:0;translate:0 20px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-seguranca .se-cartao p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-seguranca .se-cartao p:nth-of-type(3){transition-delay:.24s}
.tm-js .tema-seguranca .se-lado:nth-child(2){transition-delay:.15s}
.tm-js .tema-seguranca .se-cartao p.tm-visivel,
.tm-js .tema-seguranca .capa.tm-visivel,
.tm-js .tema-seguranca .tm-revela.tm-visivel{opacity:1;translate:0 0}
/* linha do tempo: os marcos aparecem na ordem e cada ligação avança até o próximo */
.tm-js .tema-seguranca .se-linha.tm-revela{opacity:1;translate:0 0}
.tm-js .tema-seguranca .se-marco{opacity:0;translate:0 14px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-seguranca .se-marco:not(:last-child)::after{transform:scaleX(0);transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.tm-js .tema-seguranca .se-linha.tm-visivel .se-marco{opacity:1;translate:0 0}
.tm-js .tema-seguranca .se-linha.tm-visivel .se-marco::after{transform:scaleX(1)}
.tm-js .tema-seguranca .se-marco:nth-child(1)::after{transition-delay:.25s}
.tm-js .tema-seguranca .se-marco:nth-child(2){transition-delay:.45s}
.tm-js .tema-seguranca .se-marco:nth-child(2)::after{transition-delay:.7s}
.tm-js .tema-seguranca .se-marco:nth-child(3){transition-delay:.9s}
.tm-js .tema-seguranca .se-marco:nth-child(3)::after{transition-delay:1.15s}
.tm-js .tema-seguranca .se-marco:nth-child(4){transition-delay:1.35s}
.tm-js .tema-seguranca .tm-personagem{opacity:0;translate:-24px 0;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-seguranca .tm-personagem.tm-visivel{opacity:1;translate:0 0}
.tm-js .tema-seguranca .se-balao-g{animation:se-flutua 5s ease-in-out infinite}
@media (prefers-reduced-motion:no-preference){
  .tema-seguranca .tm-ampliada[open]{animation:se-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-seguranca .capa-ampliar{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-seguranca .se-duas{grid-template-columns:1fr;gap:34px}
  .tema-seguranca .se-livro{max-width:440px}
  .tema-seguranca .se-circulo-topo,.tema-seguranca .se-hachura-topo{display:none}
  .tema-seguranca .colecao-topo .se-pontos{height:auto;width:min(40%,300px)}
}
@media (max-width:900px){
  .tema-seguranca .se-lados{grid-template-columns:1fr}
}
@media (max-width:767px){
  .tema-seguranca .colecao-topo{padding-block:44px 56px}
  .tema-seguranca .se-cartao{padding:30px 20px 22px;border-radius:18px}
  .tema-seguranca .secao-descricao{padding-bottom:56px}
  .tema-seguranca .se-lado{padding:26px 22px 24px}
  /* linha do tempo na vertical */
  .tema-seguranca .se-linha{grid-template-columns:1fr;gap:28px;max-width:440px}
  .tema-seguranca .se-marco{align-items:flex-start;text-align:left;padding:0 0 0 58px}
  .tema-seguranca .se-marco::before{top:4px;left:21px}
  .tema-seguranca .se-marco:not(:last-child)::after{top:14px;left:20px;width:2px;height:calc(100% + 28px);transform-origin:center top}
  .tema-seguranca .se-passado::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px) !important}
  .tm-js .tema-seguranca .se-marco:not(:last-child)::after{transform:scaleY(0)}
  .tm-js .tema-seguranca .se-linha.tm-visivel .se-marco::after{transform:scaleY(1)}
  .tema-seguranca .se-ano{font-size:2rem}
  .tema-seguranca .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-seguranca .se-retrato{align-self:flex-start;width:150px;margin:0 0 20px 14px;padding-top:62px}
  .tema-seguranca .se-balao{width:96px;right:-60px}
  .tema-seguranca .placeholder-flipbook{min-height:260px}
  .tema-seguranca .grade-capas{grid-template-columns:minmax(0,230px)}
  .tema-seguranca .se-hachura-cta{width:80px;left:5%;top:18px;translate:none}
}

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