/*
  Cores da marca (28/09/2026), pedido do grupo com as referências da Scarpa (Dogo Maker e Aprende Brasil)
  e o Canva "DESIGN EDITORA SCARPA":
  - paleta oficial nas seções, no lugar do fundo branco/cinza: azul #03ACF1, verde #A6CE38, vermelho #EE1B22, escuro #1D2F40;
  - as ilustrações do Canva (pág. 3 a 6) no fundo de algumas seções, sempre longe dos textos;
  - a foto das Formações numa moldura com o livro do logo (as 3 faixas vermelho, verde e azul).
  Transições entre as seções:
  - Coleções (aprovada): o livro aberto do Canva (pág. 2) entre todas as seções;
  - Home e Quem Somos (2ª versão, a pedido: "diversificar sem sair do tema"): um recurso diferente em cada passagem.
  Só é carregado na Home, no Quem Somos e na página Coleções (<main class="... pg-marca">).
  Textos, ordem das seções e funcionamento continuam iguais. As outras páginas não carregam este arquivo.
  Para voltar: DEV-LOCAL/backup-antes-cores-marca-2026-09-28 (antes de tudo)
  ou DEV-LOCAL/backup-cores-marca-rodada1-2026-09-28 (1ª versão, com o V em todas as seções).
*/

/* ===== Paleta ===== */
main.pg-marca{
  --m-azul:#03ACF1;
  --m-verde:#A6CE38;
  --m-vermelho:#EE1B22;
  --m-escuro:#1D2F40;
  /* o mesmo vermelho, um tom mais fechado onde há texto branco em cima (contraste 4,6:1, padrão AA de leitura) */
  --m-vermelho-fundo:#E71A21;
  /* versões claras das cores da paleta para as seções de leitura (nada de branco puro) */
  --m-azul-claro:#E4F5FD;
  /* texto corrido sobre o escuro */
  --m-texto-escuro:#C3D0DC;
  /* o azul-marinho e o azul do site passam a ser os da paleta oficial nestas páginas */
  --navy:var(--m-escuro);
  --azul:var(--m-azul);
  --fundo:var(--m-azul-claro);
  /* profundidade do "livro" entre uma seção e outra (Coleções), e o respiro até o conteúdo */
  --dobra:clamp(40px,6.4vw,96px);
  --respiro:clamp(24px,3vw,40px);
  /* alturas das outras passagens (Home e Quem Somos): onda leve, arco e corte inclinado */
  --onda:clamp(28px,3.6vw,52px);
  --arco:clamp(28px,4.4vw,64px);
  --inclina:clamp(24px,3.4vw,52px);
  /* altura da "aba" em forma de livro aberto (referência da Dogo Maker, no formato do livro da pág. 2 do Canva) */
  --aba:clamp(28px,3.6vw,52px);
  background:var(--m-azul-claro);
}
/* botões: o azul da paleta com texto escuro (5,3:1). Antes, no Quem Somos e em Coleções, o texto branco no azul-claro
   ficava com pouco contraste */
main.pg-marca .botao:not(.navy){color:var(--m-escuro)}
main.pg-marca .botao:focus-visible{outline:3px solid var(--m-escuro);outline-offset:3px}
/* avisos da prévia (mapa provisório, vídeo a receber) legíveis nos fundos claros da paleta */
main.pg-marca .legenda,
main.pg-marca .placeholder{color:#51647A}

/* ===== Coleções: transição em forma de livro aberto (Canva, pág. 2) entre todas as seções =====
   Toda seção que vem depois de outra ganha, no alto, a "língua" da cor da seção de cima, descendo em V até o meio
   (a lombada do livro). As laterais sobem como as páginas abertas. O conteúdo começa abaixo da ponta do V. */
main.pg-colecoes.pg-marca.pg-marca > section + section{position:relative;padding-top:calc(var(--dobra) + var(--respiro))}
main.pg-colecoes.pg-marca > section + section::before{content:"";position:absolute;left:0;right:0;top:-1px;height:calc(var(--dobra) + 1px);
  background:var(--dobra-cor,var(--m-escuro));pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440C1116 0 864 60 720 100C576 60 324 0 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440C1116 0 864 60 720 100C576 60 324 0 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

/* ===== Home e Quem Somos: a onda leve e o arco =====
   A onda lembra as faixas do logo; o arco, a página do livro que se abre. A cor da seção de cima (--passagem-cor)
   entra na de baixo pela forma escolhida. */
.pg-home.pg-marca #solucoes,
.pg-home.pg-marca #formacoes,
.pg-qs.pg-marca .qs-video,
.pg-qs.pg-marca .qs-video + .secao,
.pg-qs.pg-marca .qs-solucoes{position:relative}
.pg-home.pg-marca #solucoes::before,
.pg-qs.pg-marca .qs-video + .secao::before{content:"";position:absolute;left:0;right:0;top:-1px;height:calc(var(--onda) + 1px);
  background:var(--passagem-cor);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V35C1300 35 1180 85 960 85C760 85 560 20 360 20C200 20 90 50 0 70Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V35C1300 35 1180 85 960 85C760 85 560 20 360 20C200 20 90 50 0 70Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.pg-home.pg-marca #formacoes::before,
.pg-qs.pg-marca .qs-solucoes::before{content:"";position:absolute;left:0;right:0;top:-1px;height:calc(var(--arco) + 1px);
  background:var(--passagem-cor);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V100C1080 0 360 0 0 100Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V100C1080 0 360 0 0 100Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

/* ===== Home e Quem Somos: a aba em forma de livro aberto =====
   A aba no meio da passagem de seção da Dogo Maker (lados retos, cantos arredondados), com o livro do logo no alto:
   as duas páginas descem suavemente até a lombada, no meio. Uma vez em cada página. */
.pg-home.pg-marca #atuacao,
.pg-qs.pg-marca .qs-mvv{position:relative;padding-top:calc(var(--aba) + 64px)}
.pg-home.pg-marca #atuacao::before,
.pg-qs.pg-marca .qs-mvv::before{content:"";position:absolute;left:0;right:0;top:-1px;height:calc(var(--aba) + 1px);
  background:var(--passagem-cor);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V100H1010C984 100 976 92 968 76L940 18C934 8 928 6 916 6C850 6 770 12 720 44C670 12 590 6 524 6C512 6 506 8 500 18L472 76C464 92 456 100 430 100H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V100H1010C984 100 976 92 968 76L940 18C934 8 928 6 916 6C850 6 770 12 720 44C670 12 590 6 524 6C512 6 506 8 500 18L472 76C464 92 456 100 430 100H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
@media (max-width:767px){
  .pg-home.pg-marca #atuacao,
  .pg-qs.pg-marca .qs-mvv{padding-top:calc(var(--aba) + 40px)}
}

/* ilustrações do Canva (pág. 3 a 6), recoloridas na paleta: no máximo uma por seção, sempre fora da área dos textos */
.pg-home.pg-marca #solucoes::after,
.pg-colecoes.pg-marca .col-todas::after,
.pg-qs.pg-marca .qs-video::after,
.pg-home.pg-marca #parceiro::after{content:"";position:absolute;pointer-events:none;background:no-repeat center/contain}
.pg-qs.pg-marca .colecao-topo,
.pg-colecoes.pg-marca .colecao-topo{position:relative;overflow:hidden}
/* o conteúdo dessas seções fica à frente do desenho (só nelas: o z-index isolaria o "multiply" das fotos de fundo branco) */
.pg-qs.pg-marca .colecao-topo .container,
.pg-colecoes.pg-marca .colecao-topo .container,
.pg-home.pg-marca #solucoes .container,
.pg-colecoes.pg-marca .col-todas .container,
.pg-qs.pg-marca .qs-video .container{position:relative;z-index:1}
.pg-home.pg-marca #solucoes,
.pg-colecoes.pg-marca .col-todas,
.pg-qs.pg-marca .qs-video{overflow-x:clip}
/* os livros voando (Canva, pág. 5) dos dois lados do título: à esquerda, dois livros; à direita, o livro aberto grande
   com os que voam em volta. Ficam nas laterais livres e passam por trás dos cartões. */
.pg-home.pg-marca #solucoes::after,
.pg-colecoes.pg-marca .col-todas::after,
.pg-qs.pg-marca .qs-video::after{left:0;right:0;top:calc(var(--dobra) - 4px);height:min(27vw,380px);opacity:.6;
  /* cada lado nunca passa do espaço livre ao lado do título (o título tem no máximo 680px) */
  background:url(../img/marca/livros-voando-esq.webp) no-repeat left max(10px,calc((100% - 1100px) / 2 - 90px)) top 34px/
               min(15vw,220px,calc((100% - 680px) / 2 - max(10px,(100% - 1100px) / 2 - 90px) - 16px)) auto,
             url(../img/marca/livros-voando-dir.webp) no-repeat right max(10px,calc((100% - 1100px) / 2 - 70px)) top 0/
               min(22vw,320px,calc((100% - 680px) / 2 - max(10px,(100% - 1100px) / 2 - 70px) - 16px)) auto}
@media (max-width:1099px){
  .pg-home.pg-marca #solucoes::after,
  .pg-colecoes.pg-marca .col-todas::after,
  .pg-qs.pg-marca .qs-video::after{display:none}
}
/* o menino diante da estante (Canva, pág. 4), em traço branco: "explore nosso catálogo" (Home e Coleções) */
.pg-home.pg-marca #catalogo .secao-topo::after,
.pg-colecoes.pg-marca .col-convite-caixa::before{content:"";display:block;flex:0 0 auto;aspect-ratio:900/835;pointer-events:none;
  background:url(../img/marca/menino-estante.webp) center/contain no-repeat}


/* =====================================================================
   HOME (2ª versão). Cada passagem tem um recurso próprio, todos da identidade:
   banner de ponta a ponta → o cartão verde dos números logo abaixo, no azul-claro → municípios (carrossel) →
   a atuação comercial (escuro, o mapa parado) sobe com a aba em forma de livro, separando os dois carrosséis →
   uma onda leve abre as Soluções (azul, livros voando, carrossel) → o Play Connect é um painel escuro apoiado entre o
   azul e o azul-claro, com o robô saindo por cima → conteúdos em destaque (azul-claro, vídeos da Bett, desde 02/10/2026) → o Parceiro com a foto do estande no fundo e um corte inclinado →
   AvançaEdu (azul-claro) → um arco abre as Formações (escuro, foto na moldura do logo) → depoimentos em vídeo (azul-claro,
   desde 01/10/2026) → catálogo (vermelho, o menino e
   o formulário como uma folha de ponta dobrada) → o rodapé fecha com o livro do logo.
   (28/09/2026: o Parceiro subiu para depois do Play Connect, e a Atuação foi para entre os dois carrosséis.)
   ===================================================================== */

/* banner: fundo escuro só enquanto as artes carregam. Logo abaixo da foto já vem o azul-claro (28/09/2026: a faixa
   escura que sobrava entre a foto e o cartão dos números saiu, a pedido); no celular, a faixinha das setas embaixo da
   foto também fica no azul-claro, com as setas no escuro */
.pg-home.pg-marca .banner{background:var(--m-escuro)}
@media (max-width:767px){
  .pg-home.pg-marca .banner-pontos{background:var(--m-azul-claro)}
  .pg-home.pg-marca .banner-seta{color:var(--m-escuro)}
}
/* banner de ponta a ponta também no computador (28/09/2026, a pedido): antes ficava num cartão na coluna do site.
   A altura vem da proporção das artes (1920×800): os textos fazem parte das imagens e vão quase de uma borda à outra,
   então a arte não é cortada para ficar mais alta. O cartão dos números continua à mesma distância da foto. */
@media (min-width:1025px){
  .pg-home.pg-marca .banner-trilho{width:auto;margin:0;border-radius:0;box-shadow:none}
}
/* artes novas (05/10/2026): cada uma vem num <picture>, com a versão quadrada (800x800) para o celular; o <picture>
   ocupa o slide inteiro, como a imagem antes. No celular (até 767px) o banner fica quadrado, para as artes quadradas
   aparecerem inteiras; a das mãos, que só existe larga, aparece recortada no meio (onde está o texto). */
.pg-home .banner-slide picture{display:block;width:100%;height:100%}
@media (max-width:767px){ .pg-home.pg-marca .banner-trilho{aspect-ratio:1/1} }

/* números: um cartão verde logo abaixo da foto, no azul-claro dos municípios (sem faixa escura entre a foto e o cartão) */
.pg-home.pg-marca .faixa-numeros{background:var(--m-azul-claro);padding-block:24px 8px}
@media (min-width:1025px){ .pg-home.pg-marca .faixa-numeros{padding-top:40px} }
/* a frase acima dos números (29/09/2026): em linhas equilibradas, sem uma palavra sozinha na última */
.pg-home.pg-marca .numeros-frase{max-width:800px}
.pg-home.pg-marca .numeros-frase h2{text-wrap:balance}
.pg-home.pg-marca .faixa-numeros .numeros-grade{width:min(1100px,calc(100% - 40px));max-width:none;padding:30px 12px;border-radius:24px;
  background:var(--m-verde);box-shadow:0 26px 50px -30px rgba(29,47,64,.65)}
.pg-home.pg-marca .numero strong,
.pg-home.pg-marca .numero .sinal,
.pg-home.pg-marca .numero > span{color:var(--m-escuro)}
.pg-home.pg-marca .numero strong::after{background:var(--m-escuro)}
.pg-home.pg-marca .numero + .numero{border-left-color:rgba(29,47,64,.2)}
@media (max-width:767px){
  .pg-home.pg-marca .faixa-numeros{padding-block:6px 4px}
  .pg-home.pg-marca .faixa-numeros .numeros-grade{width:calc(100% - 32px);padding:8px 4px;border-radius:20px}
  .pg-home.pg-marca .numero:nth-child(even){border-left-color:rgba(29,47,64,.2)}
  .pg-home.pg-marca .numero:nth-child(n+3){border-top-color:rgba(29,47,64,.2)}
}
/* (28/09/2026, a pedido: saíram as duas formas orgânicas que ficavam atrás dos cantos do cartão, a vermelha e o
   contorno azul colado no "+250k Alunos"; o cartão fica limpo) */

/* municípios: azul-claro, logo abaixo do cartão */
.pg-home.pg-marca #prefeituras{background:var(--m-azul-claro)}

/* soluções: azul, aberta por uma onda leve que desce do escuro da atuação; os livros voando dos dois lados do título */
.pg-home.pg-marca #solucoes{--passagem-cor:var(--m-escuro);background:var(--m-azul);padding-top:calc(var(--onda) + 44px)}
.pg-home.pg-marca #solucoes::after{top:calc(var(--onda) + 4px)}
.pg-home.pg-marca #solucoes h2::after{background:var(--m-escuro)}

/* carrossel das Soluções (28/09/2026): cada cartão é um livro em 3D (29/09/2026: os cartões da página Coleções
   usam exatamente o mesmo desenho, pelas mesmas regras abaixo). A lombada na cor da coleção (--livro, no HTML),
   o miolo das páginas aparecendo em camadas à direita e embaixo, e uma sombra de profundidade. Ao passar o mouse
   (o carrossel para), o livro gira um pouco, sobe e uma luz passa pela capa.
   O carrossel vai de ponta a ponta da tela: sem o esmaecido nas bordas, que deixava os cartões "leitosos" no azul. */
.pg-home.pg-marca #solucoes .biblioteca{padding-block:18px 44px;-webkit-mask-image:none;mask-image:none}
/* de ponta a ponta (29/09/2026: sempre, porque o carrossel agora anda para todos, também com "menos movimento") */
.pg-home.pg-marca #solucoes .biblioteca{margin-inline:calc(50% - 50vw)}
/* (29/09/2026) o trilho tem o conjunto de cartões e mais duas cópias (antes, uma): uma volta agora é 1/3 do trilho,
   na mesma velocidade de antes. Assim a fila de cartões cobre até telas de ~5.500px, e não só ~2.800px: em monitores
   muito largos, ou com o zoom do navegador reduzido, aparecia um vão vazio no fim de cada volta. */
.pg-home.pg-marca #solucoes .biblioteca-trilho{animation-name:rolar-terco}
@keyframes rolar-terco{from{transform:translateX(0)}to{transform:translateX(calc(-100% / 3))}}
.pg-home.pg-marca #solucoes .biblioteca-trilho a.col-cartao,
.pg-colecoes.pg-marca .col-grade a.col-cartao{position:relative;isolation:isolate;overflow:hidden;
  padding:22px 18px 16px 32px;border-radius:6px 18px 18px 6px;
  background:linear-gradient(90deg,#fff 16px,#E8EDF2 17px,#fff 22px,#fff);
  box-shadow:3px 3px 0 -1px #fff,3px 3px 0 0 #D5DEE8,6px 6px 0 -1px #F7F9FB,6px 6px 0 0 #C9D4DF,9px 9px 0 -1px #F2F5F8,9px 9px 0 0 #BCC8D5,
    0 28px 44px -22px rgba(29,47,64,.62);
  transform:perspective(1000px) rotateY(0) translateY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
/* a lombada: arredondada pela luz (escuro, a cor, um brilho e a cor de novo) */
.pg-home.pg-marca #solucoes a.col-cartao::before,
.pg-colecoes.pg-marca .col-grade a.col-cartao::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--livro) 70%,#000) 0,var(--livro) 34%,color-mix(in srgb,var(--livro) 62%,#fff) 56%,
    var(--livro) 76%,color-mix(in srgb,var(--livro) 78%,#000) 100%)}
/* a luz que atravessa a capa ao passar o mouse */
.pg-home.pg-marca #solucoes a.col-cartao::after,
.pg-colecoes.pg-marca .col-grade a.col-cartao::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%) no-repeat 130% 0/260% 100%;
  transition:background-position .9s ease}
.pg-home.pg-marca #solucoes .biblioteca-trilho a.col-cartao:hover,
.pg-home.pg-marca #solucoes .biblioteca-trilho a.col-cartao:focus-visible,
.pg-colecoes.pg-marca .col-grade a.col-cartao:hover,
.pg-colecoes.pg-marca .col-grade a.col-cartao:focus-visible{transform:perspective(1000px) rotateY(-10deg) translateY(-8px);
  box-shadow:4px 4px 0 -1px #fff,4px 4px 0 0 #D5DEE8,8px 8px 0 -1px #F7F9FB,8px 8px 0 0 #C9D4DF,12px 12px 0 -1px #F2F5F8,12px 12px 0 0 #BCC8D5,
    0 40px 56px -24px rgba(29,47,64,.7)}
.pg-home.pg-marca #solucoes a.col-cartao:hover::after,
.pg-home.pg-marca #solucoes a.col-cartao:focus-visible::after,
.pg-colecoes.pg-marca .col-grade a.col-cartao:hover::after,
.pg-colecoes.pg-marca .col-grade a.col-cartao:focus-visible::after{background-position:-30% 0}
/* o círculo do personagem com um pouco de relevo */
.pg-home.pg-marca #solucoes .col-circulo,
.pg-colecoes.pg-marca .col-grade .col-circulo{box-shadow:0 0 0 5px #fff,0 0 0 7px var(--cor),0 14px 22px -12px rgba(29,47,64,.5)}
@media (max-width:767px){
  .pg-home.pg-marca #solucoes .biblioteca-trilho a.col-cartao,
  .pg-colecoes.pg-marca .col-grade a.col-cartao{padding:18px 14px 14px 26px}
  .pg-home.pg-marca #solucoes a.col-cartao::before,
  .pg-colecoes.pg-marca .col-grade a.col-cartao::before{width:13px}
}
@media (prefers-reduced-motion:reduce){
  .pg-home.pg-marca #solucoes .biblioteca-trilho a.col-cartao,
  .pg-home.pg-marca #solucoes a.col-cartao::after,
  .pg-colecoes.pg-marca .col-grade a.col-cartao,
  .pg-colecoes.pg-marca .col-grade a.col-cartao::after{transition:none}
}
/* setinhas discretas dos lados (criadas pelo marca.js): pequenos círculos no escuro da paleta, nas pontas da tela,
   onde os livros já estão entrando ou saindo cortados (assim não cobrem nenhum livro inteiro), na altura do meio
   dos livros. (Desde 29/09/2026 aparecem também com "menos movimento", porque o carrossel anda para todos.) */
.pg-home.pg-marca #solucoes .biblioteca{position:relative}
.pg-home.pg-marca #solucoes .col-nav{position:absolute;z-index:3;top:calc(50% - 13px);display:grid;place-items:center;
  width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(29,47,64,.82);color:#fff;box-shadow:0 10px 22px -10px rgba(29,47,64,.7);
  transition:background .2s,transform .2s}
.pg-home.pg-marca #solucoes .col-nav-ant{left:16px}
.pg-home.pg-marca #solucoes .col-nav-prox{right:16px}
.pg-home.pg-marca #solucoes .col-nav:hover{background:var(--m-escuro);transform:scale(1.08)}
.pg-home.pg-marca #solucoes .col-nav:active{transform:scale(.94)}
.pg-home.pg-marca #solucoes .col-nav:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px var(--m-escuro)}
.pg-home.pg-marca #solucoes .col-nav svg{display:block}
.pg-home.pg-marca #solucoes .col-nav-ant svg{margin-left:-2px}
.pg-home.pg-marca #solucoes .col-nav-prox svg{margin-right:-2px}
@media (max-width:767px){
  .pg-home.pg-marca #solucoes .col-nav{width:36px;height:36px;margin-top:-18px}
  .pg-home.pg-marca #solucoes .col-nav-ant{left:8px}
  .pg-home.pg-marca #solucoes .col-nav-prox{right:8px}
}

/* Play Connect: um painel escuro de cantos arredondados, apoiado entre o azul das Soluções e o azul-claro de baixo
   (logo depois vem o Parceiro, desde 28/09/2026).
   No computador o robô sai por cima do painel (como o notebook no painel da referência da Dogo Maker). */
.pg-home.pg-marca #tecnologia{background:linear-gradient(var(--m-azul) 0 46%,var(--m-azul-claro) 46% 100%);padding-block:24px}
.pg-home.pg-marca #tecnologia > .container{width:min(1100px,calc(100% - 40px));max-width:none;padding:56px 64px;border-radius:32px;
  background:radial-gradient(560px 340px at 100% 0,rgba(3,172,241,.24),transparent 70%),var(--m-escuro);
  box-shadow:0 40px 70px -40px rgba(29,47,64,.75)}
@media (min-width:1025px){
  .pg-home.pg-marca #tecnologia .robo{align-self:start;margin-top:-116px}
}
@media (max-width:1024px){
  .pg-home.pg-marca #tecnologia > .container{padding:44px 32px;border-radius:28px}
}
@media (max-width:767px){
  .pg-home.pg-marca #tecnologia{padding-block:16px}
  .pg-home.pg-marca #tecnologia > .container{width:calc(100% - 24px);padding:36px 20px 28px;border-radius:24px}
}

/* Plataforma AvançaEdu: azul-claro; os aparelhos sobre um círculo azul suave.
   (28/09/2026: o verde-claro saiu das seções claras; bem claro, o verde-limão da marca parecia amarelo) */
.pg-home.pg-marca #avancaedu{background:var(--m-azul-claro)}
.pg-home.pg-marca .avancaedu-foto{position:relative}
.pg-home.pg-marca .avancaedu-foto::before{content:"";position:absolute;left:50%;top:50%;width:min(96%,520px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(3,172,241,.22),rgba(3,172,241,0));pointer-events:none}
.pg-home.pg-marca .avancaedu-foto img{position:relative}

/* formações: escuro, aberta por um arco suave; a foto numa moldura com o livro do logo: a borda de cima da foto é o
   livro aberto (lombada no meio) e, acima dela, as 3 faixas do logo acompanham a curva, proporcionais à largura da foto */
.pg-home.pg-marca #formacoes{--passagem-cor:var(--m-azul-claro);background:var(--m-escuro);color:var(--m-texto-escuro);
  padding-top:calc(var(--arco) + 56px)}
.pg-home.pg-marca #formacoes .foto-secao{position:relative;padding-top:6.6%}
.pg-home.pg-marca #formacoes .foto-secao::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:100/12;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath fill='%23EE1B22' d='M0 0C22.5 0 40 3.6 50 6C60 3.6 77.5 0 100 0V1.3C77.5 1.3 60 4.9 50 7.3C40 4.9 22.5 1.3 0 1.3Z'/%3E%3Cpath fill='%23A6CE38' d='M0 2.2C22.5 2.2 40 5.8 50 8.2C60 5.8 77.5 2.2 100 2.2V3.5C77.5 3.5 60 7.1 50 9.5C40 7.1 22.5 3.5 0 3.5Z'/%3E%3Cpath fill='%2303ACF1' d='M0 4.4C22.5 4.4 40 8 50 10.4C60 8 77.5 4.4 100 4.4V5.7C77.5 5.7 60 9.3 50 11.7C40 9.3 22.5 5.7 0 5.7Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* a foto (1400×860) com a borda de cima em V: 6% da largura = 9,77% da altura; cantos de baixo arredondados */
.pg-home.pg-marca #formacoes .foto-secao img{border-radius:0 0 16px 16px;box-shadow:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C22.5 0 40 5.86 50 9.77C60 5.86 77.5 0 100 0V100H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C22.5 0 40 5.86 50 9.77C60 5.86 77.5 0 100 0V100H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

/* depoimentos (Prova Social, 01/10/2026; os 5 vídeos em 02/10/2026): azul-claro, entre o escuro das Formações e o
   vermelho do catálogo. Cartões de vídeo em pé (9:16, como os Reels), na ordem numérica:
   - no computador, quantos couberem na linha (os 5, a partir de 1024px), centralizados;
   - no tablet, quebram em duas linhas (4 + 1 ou 3 + 2), também centralizadas;
   - no celular (pedido do Wedson), uma fileira que passa sozinha, um cartão por vez (depoimentos.js); dá para passar
     com o dedo, e ela para enquanto a pessoa mexe ou assiste a um vídeo.
   O botão de play é o mesmo do vídeo do Quem Somos (depoimentos.js, só na Home). */
.pg-home.pg-marca #depoimentos{background:var(--m-azul-claro)}
.pg-home.pg-marca .depoimentos-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:32px 24px}
.pg-home.pg-marca .depoimento{flex:0 0 200px;min-width:0;margin:0}
@media (max-width:1139px){
  .pg-home.pg-marca .depoimentos-lista{gap:28px 20px}
  .pg-home.pg-marca .depoimento{flex-basis:180px}
}
.pg-home.pg-marca :is(.depoimento-video,.conteudo-video){position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:var(--m-escuro);box-shadow:0 26px 46px -28px rgba(29,47,64,.7)}
.pg-home.pg-marca :is(.depoimento-video,.conteudo-video) video{display:block;width:100%;height:100%;object-fit:cover;background:var(--m-escuro)}
.pg-home.pg-marca .depoimento-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;padding:0;border:0;
  border-radius:inherit;background:transparent;cursor:pointer}
.pg-home.pg-marca .depoimento-play svg{display:block;width:60px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  transition:transform .2s ease}
.pg-home.pg-marca .depoimento-play rect{fill:#FF0000}
.pg-home.pg-marca .depoimento-play:hover svg{transform:scale(1.08)}
.pg-home.pg-marca .depoimento-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.pg-home.pg-marca :is(.depoimento-video,.conteudo-video).tocando .depoimento-play{display:none}
.pg-home.pg-marca .depoimento-nome{margin:12px 0 0;text-align:center;font-size:.9rem;font-weight:700;line-height:1.35;color:var(--m-escuro)}
@media (max-width:767px){
  .pg-home.pg-marca .depoimentos-lista{flex-wrap:nowrap;justify-content:flex-start;gap:16px;margin-inline:-20px;padding:4px 20px 18px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pg-home.pg-marca .depoimentos-lista::-webkit-scrollbar{display:none}
  .pg-home.pg-marca .depoimento{flex:0 0 min(64%,260px);scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){ .pg-home.pg-marca .depoimento-play svg{transition:none} }

/* conteúdos em destaque (02/10/2026, pedido do Clube Fiel): os 3 vídeos do estande na Bett Brasil 2026, logo depois do
   Play Connect. Azul-claro, como a parte de baixo do Play Connect, para o corte inclinado do Parceiro (logo abaixo)
   continuar mostrando o mesmo fundo. O mesmo cartão de vídeo em pé dos depoimentos, mas noutro arranjo: o texto e o
   botão do Instagram à esquerda, os vídeos à direita. No tablet e no celular: o texto, os vídeos e o botão, um embaixo
   do outro; no celular, os vídeos numa fileira que passa sozinha, como a dos depoimentos (depoimentos.js; a pedido,
   02/10/2026), e que também dá para passar com o dedo. */
.pg-home.pg-marca #conteudos{background:var(--m-azul-claro);padding-top:48px}
.pg-home.pg-marca .conteudos-grade{display:grid;grid-template-columns:1fr auto;grid-template-areas:"texto lista" "botao lista";
  column-gap:56px;align-items:center}
.pg-home.pg-marca .conteudos-texto{grid-area:texto;align-self:end}
.pg-home.pg-marca .conteudos-texto p:last-child{margin-bottom:0}
/* o azul da paleta tem pouco contraste no azul-claro para um texto pequeno: o rótulo usa um azul mais fechado (5:1) */
.pg-home.pg-marca #conteudos .rotulo{color:#0A6E9C}
.pg-home.pg-marca .conteudos-lista{grid-area:lista;list-style:none;margin:0;padding:0;display:flex;gap:20px}
.pg-home.pg-marca .conteudo{flex:0 0 190px;min-width:0;margin:0}
.pg-home.pg-marca .conteudos-insta{grid-area:botao;justify-self:start;align-self:start;margin-top:24px}
@media (max-width:1024px){
  .pg-home.pg-marca .conteudos-grade{grid-template-columns:1fr;grid-template-areas:"texto" "lista" "botao";row-gap:28px}
  .pg-home.pg-marca .conteudos-texto{max-width:680px}
  .pg-home.pg-marca .conteudos-lista{justify-content:center}
  .pg-home.pg-marca .conteudos-insta{justify-self:center;margin-top:0}
}
@media (max-width:767px){
  .pg-home.pg-marca .conteudos-lista{justify-content:flex-start;gap:16px;margin-inline:-20px;padding:4px 20px 18px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pg-home.pg-marca .conteudos-lista::-webkit-scrollbar{display:none}
  .pg-home.pg-marca .conteudo{flex:0 0 min(64%,260px);scroll-snap-align:center}
}

/* atuação comercial (entre os dois carrosséis desde 28/09/2026): escuro, uma pausa parada entre os municípios e as
   soluções; sobe do azul-claro dos municípios com a aba em forma de livro aberto. O mapa fica como um pôster claro. */
.pg-home.pg-marca #atuacao{--passagem-cor:var(--m-azul-claro);background:var(--m-escuro);color:var(--m-texto-escuro)}
.pg-home.pg-marca #atuacao h2{color:#fff}
.pg-home.pg-marca #atuacao .legenda{color:#A3B2C1}
.pg-home.pg-marca #atuacao .mapa-caixa{box-shadow:0 34px 60px -30px rgba(0,0,0,.7)}

/* parceiro: a foto do estande da Scarpa (Bett Brasil 2026) no fundo, no escuro da paleta, com um corte inclinado no alto.
   As 3 ondas no canto (2ª rodada do layout) dão lugar à foto; a pilha de livros em traço verde (Canva, pág. 6) continua
   de pé no canto de baixo, só na margem livre das telas largas. */
/* a foto aparece de verdade (como na referência da Aprende Brasil): o escuro é mais forte atrás do título e do texto
   (leitura AA) e mais leve atrás dos cartões, que têm o próprio fundo */
.pg-home.pg-marca #parceiro{overflow:visible;padding-top:calc(var(--inclina) + 64px);
  background:linear-gradient(rgba(29,47,64,.9) 0,rgba(29,47,64,.86) 34%,rgba(29,47,64,.66) 100%),url(../img/marca/estande.webp) center 42%/cover no-repeat;
  -webkit-clip-path:polygon(0 var(--inclina),100% 0,100% 100%,0 100%);clip-path:polygon(0 var(--inclina),100% 0,100% 100%,0 100%)}
.pg-home.pg-marca #parceiro::before{content:none}
.pg-home.pg-marca #parceiro .motivo{background:rgba(29,47,64,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pg-home.pg-marca #parceiro::after{left:12px;bottom:0;width:min(260px,calc((100% - 1100px) / 2 - 28px));aspect-ratio:640/879;
  background-image:url(../img/marca/pilha-traco-verde.webp);background-position:left bottom}
@media (max-width:1319px){ .pg-home.pg-marca #parceiro::after{display:none} }

/* catálogo: vermelho, textos em branco, o menino diante da estante logo abaixo do convite;
   o formulário é uma folha com a ponta de cima dobrada (a "orelha" do livro) */
.pg-home.pg-marca #catalogo{background:var(--m-vermelho-fundo);color:#fff}
.pg-home.pg-marca #catalogo h2,
.pg-home.pg-marca #catalogo .rotulo,
.pg-home.pg-marca #catalogo .secao-topo p{color:#fff}
.pg-home.pg-marca #catalogo h2::after{background:#fff}
.pg-home.pg-marca #catalogo .catalogo-convite{border-left-color:#fff}
.pg-home.pg-marca #catalogo .secao-topo::after{width:clamp(200px,21vw,300px);margin-top:26px}
@media (max-width:767px){ .pg-home.pg-marca #catalogo .secao-topo::after{width:190px;margin:22px auto 0} }
.pg-home.pg-marca #catalogo .form-catalogo{--orelha:46px;position:relative;border:0;
  -webkit-clip-path:polygon(0 0,calc(100% - var(--orelha)) 0,100% var(--orelha),100% 100%,0 100%);
  clip-path:polygon(0 0,calc(100% - var(--orelha)) 0,100% var(--orelha),100% 100%,0 100%)}
.pg-home.pg-marca #catalogo .form-catalogo::before{content:"";position:absolute;top:0;right:0;width:var(--orelha);height:var(--orelha);
  border-bottom-left-radius:12px;pointer-events:none;background:linear-gradient(to bottom left,transparent 50%,#EEF2F6 50%,#C7D1DC);
  filter:drop-shadow(-4px 4px 4px rgba(29,47,64,.22))}
@media (max-width:767px){ .pg-home.pg-marca #catalogo .form-catalogo{--orelha:34px} }


/* =====================================================================
   QUEM SOMOS (2ª versão). Também um recurso por passagem, sem repetir os da Home:
   topo escuro (as fotos do estande trocando; até 01/10/2026, a pilha de livros) → o vídeo em evidência, apoiado na passagem do escuro para o azul (livros voando) →
   uma onda leve abre "Educação que Gera Resultados" (azul-claro, a foto sobre uma folha azul deslocada) →
   missão, visão e valores em cartões brancos, cada um com uma das 3 cores do logo → um arco abre as Soluções
   (azul-claro) → a faixa de fotos da Bett passando (azul-claro, desde 05/10/2026) → um corte inclinado abre as
   Formações (verde) → o rodapé fecha com o livro do logo
   ===================================================================== */
.pg-qs.pg-marca .colecao-topo{background:var(--m-escuro)}
.pg-qs.pg-marca .colecao-topo .container > div{max-width:720px}
/* topo (01/10/2026, pedido do Clube Fiel: "fotos dinâmicas, carrossel animado"): 3 fotos do estande na Bett Brasil 2026
   trocando suavemente num quadro à direita do título, no lugar da pilha de livros em traço verde (que continua no
   Parceiro da Home). Cada foto fica 5 s, com 1 s de troca e uma aproximação lenta; para ao passar o mouse.
   Só CSS: cada foto entra no seu tempo (--i, no HTML). O atraso negativo faz a 1ª foto já aparecer inteira ao abrir. */
.pg-qs.pg-marca .qs-fotos{position:relative;width:min(420px,36vw);aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:#2A3F52;box-shadow:0 0 0 6px rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.8)}
.pg-qs.pg-marca .qs-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:qs-foto 15s linear infinite;animation-delay:calc(var(--i) * 5s - 16s)}
.pg-qs.pg-marca .qs-fotos img:first-child{opacity:1}
.pg-qs.pg-marca .qs-fotos:hover img{animation-play-state:paused}
@keyframes qs-foto{
  0%{opacity:0;transform:scale(1)}
  6.667%{opacity:1}
  33.333%{opacity:1}
  40%{opacity:0;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.06)}
}
/* com "menos movimento" no aparelho as fotos continuam trocando (como os carrosséis da Home), só sem a aproximação */
@keyframes qs-foto-suave{0%{opacity:0}6.667%{opacity:1}33.333%{opacity:1}40%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .pg-qs.pg-marca .qs-fotos img{animation-name:qs-foto-suave} }
/* no tablet e no celular, o quadro vem abaixo do texto (o seletor mais longo vence o max-width:720px dos blocos do topo) */
@media (max-width:1024px){ .pg-qs.pg-marca .colecao-topo .container > .qs-fotos{width:100%;max-width:560px} }
@media (max-width:767px){ .pg-qs.pg-marca .qs-fotos{border-radius:14px} }

/* vídeo: o título ainda no escuro do topo; o vídeo fica "apoiado" na passagem para o azul (a linha passa atrás dele,
   mais ou menos na metade: 10px + título ~128px + metade da altura do vídeo 16:9) */
.pg-qs.pg-marca .qs-video{--corte-video:calc(10px + 128px + min(270px,(100vw - 40px) * .28125));padding-top:10px;
  background:linear-gradient(var(--m-escuro) 0 var(--corte-video),var(--m-azul) var(--corte-video) 100%)}
.pg-qs.pg-marca .qs-video h2{color:#fff}
/* o vídeo institucional (29/09/2026) no lugar do espaço reservado: o mesmo quadro 16:9 de até 960px, cantos arredondados */
.pg-qs.pg-marca .qs-video-caixa{border-radius:14px;overflow:hidden;background:var(--m-escuro)}
.pg-qs.pg-marca .qs-video-caixa video{display:block;width:100%;height:100%;object-fit:cover;background:var(--m-escuro)}
/* botão de play grande e vermelho no meio da capa (29/09/2026, pedido: "vermelho igual do YouTube"), criado pelo
   qs-video.js. Cobre a capa inteira (clicar em qualquer ponto dá o play) e some quando o vídeo começa. */
.pg-qs.pg-marca .qs-video-caixa{position:relative}
.pg-qs.pg-marca .qs-video-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;padding:0;border:0;
  border-radius:inherit;background:transparent;cursor:pointer}
.pg-qs.pg-marca .qs-video-play svg{display:block;width:clamp(58px,8vw,84px);height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));transition:transform .2s ease}
.pg-qs.pg-marca .qs-video-play rect{fill:#FF0000}
.pg-qs.pg-marca .qs-video-play:hover svg{transform:scale(1.08)}
.pg-qs.pg-marca .qs-video-play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.pg-qs.pg-marca .qs-video-caixa.tocando .qs-video-play{display:none}
@media (prefers-reduced-motion:reduce){ .pg-qs.pg-marca .qs-video-play svg{transition:none} }
/* os livros voando ficam inteiros dentro do azul, dos dois lados do vídeo (passam por trás dele) */
.pg-qs.pg-marca .qs-video::after{top:calc(var(--corte-video) + 18px);bottom:26px;height:auto;
  background-size:auto 86%,auto 100%;
  background-position:left max(10px,calc((100% - 1100px) / 2 - 90px)) bottom,right max(10px,calc((100% - 1100px) / 2 - 70px)) bottom}
/* fotos no lugar do vídeo (08/10/2026, até chegar o vídeo horizontal): 3 lado a lado, na mesma largura do vídeo (até
   960px); a passagem do escuro para o azul continua na metade da altura delas. No celular, uma embaixo da outra. */
.pg-qs.pg-marca .qs-video-com-fotos{--corte-video:calc(10px + 128px + (min(960px,100vw - 40px) - 32px) / 9)}
.pg-qs.pg-marca .qs-video-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:960px;margin-inline:auto}
.pg-qs.pg-marca .qs-video-fotos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;
  background:var(--m-escuro);box-shadow:0 30px 60px -30px rgba(0,37,73,.35)}
@media (max-width:767px){
  .pg-qs.pg-marca .qs-video-com-fotos{--corte-video:calc(10px + 128px + (100vw - 40px) / 3)}
  .pg-qs.pg-marca .qs-video-fotos{grid-template-columns:1fr}
}

/* educação que gera resultados: azul-claro, aberta por uma onda leve; a foto do estande sobre uma folha azul deslocada */
.pg-qs.pg-marca .qs-video + .secao{--passagem-cor:var(--m-azul);background:var(--m-azul-claro);padding-top:calc(var(--onda) + 52px)}
.pg-qs.pg-marca .qs-video + .secao .foto-secao{position:relative}
.pg-qs.pg-marca .qs-video + .secao .foto-secao::before{content:"";position:absolute;inset:20px -20px -20px 20px;border-radius:18px;
  background:var(--m-azul);pointer-events:none}
.pg-qs.pg-marca .qs-video + .secao .foto-secao img{position:relative}
@media (max-width:767px){ .pg-qs.pg-marca .qs-video + .secao .foto-secao::before{inset:12px -10px -12px 10px} }
/* (01/10/2026, pedido do Clube Fiel: "inserir fotos") a foto do estande em cima e duas da seleção da Bia embaixo,
   paradas, sobre a mesma folha azul */
.pg-qs.pg-marca .qs-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-qs.pg-marca .qs-mosaico img:first-child{grid-column:1 / -1}
.pg-qs.pg-marca .qs-mosaico img + img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:767px){ .pg-qs.pg-marca .qs-mosaico{gap:8px} }

/* missão, visão e valores: no escuro, que sobe para o azul-claro com a aba em forma de livro aberto;
   cartões brancos, cada um com uma das 3 cores do logo no alto */
.pg-qs.pg-marca .qs-mvv{--passagem-cor:var(--m-azul-claro);background:var(--m-escuro)}
.pg-qs.pg-marca .qs-mvv .motivo{background:#fff;border:0;border-top:8px solid var(--faixa);border-radius:18px;padding:28px 26px 26px;
  box-shadow:0 24px 44px -30px rgba(0,0,0,.6)}
.pg-qs.pg-marca .qs-mvv .motivo:nth-child(1){--faixa:var(--m-vermelho)}
.pg-qs.pg-marca .qs-mvv .motivo:nth-child(2){--faixa:var(--m-verde)}
.pg-qs.pg-marca .qs-mvv .motivo:nth-child(3){--faixa:var(--m-azul)}
.pg-qs.pg-marca .qs-mvv .motivo h3{color:var(--m-escuro);font-size:1.15rem}
.pg-qs.pg-marca .qs-mvv .motivo p{color:var(--texto);font-size:.95rem}

/* soluções: azul-claro, aberta por um arco suave (a página do livro) */
.pg-qs.pg-marca .qs-solucoes{--passagem-cor:var(--m-escuro);background:var(--m-azul-claro);padding-top:calc(var(--arco) + 48px)}

/* faixa de fotos do estande na Bett Brasil 2026 (05/10/2026, pedido do Clube Fiel: "carrossel dinâmico"): entre as
   Soluções e as Formações, no mesmo azul-claro das Soluções (o corte inclinado das Formações, logo abaixo, continua
   mostrando o mesmo fundo). As fotos passam sozinhas, devagar (~45 px/s, como os carrosséis da Home), de ponta a ponta,
   e param ao passar o mouse. Andam também com "menos movimento" ligado, como os carrosséis da Home (escolha do usuário).
   O trilho tem as fotos e mais duas cópias: uma volta é 1/3 do trilho, e a fila cobre até telas de ~5.700px. */
.pg-qs.pg-marca .qs-galeria{background:var(--m-azul-claro);padding-block:16px 72px;overflow:hidden}
/* o título e a linha de texto antes das fotos (pedido no mesmo dia), no padrão dos títulos centralizados do Quem Somos */
.pg-qs.pg-marca .qs-galeria .secao-topo{margin-bottom:32px}
.pg-qs.pg-marca .qs-galeria .secao-topo p{margin:0}
.pg-qs.pg-marca .qs-galeria-trilho{display:flex;width:max-content;animation:qs-galeria 64s linear infinite}
.pg-qs.pg-marca .qs-galeria:hover .qs-galeria-trilho{animation-play-state:paused}
.pg-qs.pg-marca .qs-galeria-trilho img{display:block;flex:0 0 auto;width:340px;height:auto;aspect-ratio:4/3;object-fit:cover;
  margin-right:20px;border-radius:16px;box-shadow:0 18px 36px -24px rgba(29,47,64,.6)}
@keyframes qs-galeria{from{transform:translateX(0)}to{transform:translateX(calc(-100% / 3))}}
/* setinhas dos lados (05/10/2026, pedido do Wedson), criadas pelo qs-galeria.js: as mesmas do carrossel das coleções na
   Home (pequenos círculos no escuro da paleta, nas pontas da tela, na altura do meio das fotos) */
.pg-qs.pg-marca .qs-galeria-faixa{position:relative}
.pg-qs.pg-marca .qs-galeria .col-nav{position:absolute;z-index:3;top:50%;display:grid;place-items:center;
  width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(29,47,64,.82);color:#fff;box-shadow:0 10px 22px -10px rgba(29,47,64,.7);
  transition:background .2s,transform .2s}
.pg-qs.pg-marca .qs-galeria .col-nav-ant{left:16px}
.pg-qs.pg-marca .qs-galeria .col-nav-prox{right:16px}
.pg-qs.pg-marca .qs-galeria .col-nav:hover{background:var(--m-escuro);transform:scale(1.08)}
.pg-qs.pg-marca .qs-galeria .col-nav:active{transform:scale(.94)}
.pg-qs.pg-marca .qs-galeria .col-nav:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px var(--m-escuro)}
.pg-qs.pg-marca .qs-galeria .col-nav svg{display:block}
.pg-qs.pg-marca .qs-galeria .col-nav-ant svg{margin-left:-2px}
.pg-qs.pg-marca .qs-galeria .col-nav-prox svg{margin-right:-2px}
@media (max-width:767px){
  .pg-qs.pg-marca .qs-galeria{padding-block:8px 48px}
  .pg-qs.pg-marca .qs-galeria .secao-topo{margin-bottom:24px}
  .pg-qs.pg-marca .qs-galeria-trilho{animation-duration:50s}
  .pg-qs.pg-marca .qs-galeria-trilho img{width:240px;margin-right:14px;border-radius:12px}
  .pg-qs.pg-marca .qs-galeria .col-nav{width:36px;height:36px;margin-top:-18px}
  .pg-qs.pg-marca .qs-galeria .col-nav-ant{left:8px}
  .pg-qs.pg-marca .qs-galeria .col-nav-prox{right:8px}
}

/* formações: verde, aberta por um corte inclinado (ao contrário do Parceiro da Home) */
.pg-qs.pg-marca .qs-formacoes{background:var(--m-verde);padding-top:calc(var(--inclina) + 60px);
  -webkit-clip-path:polygon(0 0,100% var(--inclina),100% 100%,0 100%);clip-path:polygon(0 0,100% var(--inclina),100% 100%,0 100%)}
.pg-qs.pg-marca .qs-formacoes .botao{background:var(--m-escuro);color:#fff}


/* =====================================================================
   COLEÇÕES (aprovada em 28/09/2026: não mexer, fora o que o cliente pedir)
   Ritmo: foto (topo) · azul-claro (a história) · azul (todas as coleções) · vermelho (convite) · rodapé
   ===================================================================== */
/* topo (01/10/2026, pedido do Clube Fiel: "foto cheia dos livros e títulos sobrepostos, remover pilha de livros"):
   as prateleiras cheias de livros do estande na Bett Brasil 2026 (seleção da Bia), de ponta a ponta, com o título por
   cima. Antes: fundo verde com a pilha colorida do Canva. O escuro da paleta fica mais forte atrás do texto (até onde
   ele vai: 280px depois do meio da tela; contraste de pelo menos 4,5:1 em qualquer largura),
   e no pé da foto, de onde desce o "V" da seção seguinte (que antes descia verde). */
.pg-colecoes.pg-marca .colecao-topo{padding-block:88px;color:#fff;
  background:linear-gradient(rgba(29,47,64,0) 62%,var(--m-escuro) 100%),
    linear-gradient(90deg,rgba(29,47,64,.92) 0,rgba(29,47,64,.84) calc(50% + 280px),rgba(29,47,64,.3) 100%),
    url(../img/fotos/colecoes-topo.webp) center 42%/cover no-repeat var(--m-escuro)}
.pg-colecoes.pg-marca .colecao-topo h1,
.pg-colecoes.pg-marca .colecao-topo .colecao-tagline{color:#fff}
.pg-colecoes.pg-marca .colecao-topo .rotulo{color:rgba(255,255,255,.85)}
/* no tablet e no celular o texto ocupa quase a largura toda: o escuro fica por igual sobre a foto */
@media (max-width:1024px){
  .pg-colecoes.pg-marca .colecao-topo{padding-block:72px;
    background:linear-gradient(rgba(29,47,64,.8),rgba(29,47,64,.8)),url(../img/fotos/colecoes-topo.webp) center/cover no-repeat var(--m-escuro)}
}
@media (max-width:767px){ .pg-colecoes.pg-marca .colecao-topo{padding-block:56px} }
.pg-colecoes.pg-marca .col-historia{--dobra-cor:var(--m-escuro);background:var(--m-azul-claro)}
.pg-colecoes.pg-marca .col-todas{--dobra-cor:var(--m-azul-claro);background:var(--m-azul)}
.pg-colecoes.pg-marca .col-todas h2::after{background:var(--m-escuro)}
.pg-colecoes.pg-marca .col-convite{--dobra-cor:var(--m-azul);background:var(--m-vermelho-fundo);color:#fff}
.pg-colecoes.pg-marca .col-convite-caixa{background:transparent;box-shadow:none}
.pg-colecoes.pg-marca .col-convite-caixa h2,
.pg-colecoes.pg-marca .col-convite-caixa p{color:#fff}
.pg-colecoes.pg-marca .col-convite-caixa .botao{background:var(--m-escuro);color:#fff}
.pg-colecoes.pg-marca .colecao-topo .container > div{max-width:760px}
/* convite: o menino diante da estante (Canva, pág. 4) à esquerda do texto; no celular, acima dele */
.pg-colecoes.pg-marca .col-convite-caixa{max-width:980px}
.pg-colecoes.pg-marca .col-convite-caixa::before{width:clamp(150px,17vw,230px)}
@media (max-width:767px){ .pg-colecoes.pg-marca .col-convite-caixa::before{width:160px} }


/* =====================================================================
   RODAPÉ destas três páginas: o escuro da paleta e, no alto, a última seção descendo em V
   com as 3 faixas do logo por baixo (vermelho, verde e azul), como o livro aberto do logo.
   ===================================================================== */
main.pg-marca ~ .site-footer{--cor-rodape:#1D2F40;--rodape-base:#A3B2C1;--dobra:clamp(40px,6.4vw,96px);
  padding-top:calc(var(--dobra) * 1.48 + 40px)}
main.pg-home.pg-marca ~ .site-footer,
main.pg-colecoes.pg-marca ~ .site-footer{--dobra-cor:#E71A21}
main.pg-qs.pg-marca ~ .site-footer{--dobra-cor:#A6CE38}
main.pg-marca ~ .site-footer::before{top:-1px;height:calc(var(--dobra) + 1px);background:var(--dobra-cor);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440C1116 0 864 60 720 100C576 60 324 0 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440C1116 0 864 60 720 100C576 60 324 0 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
main.pg-marca ~ .site-footer::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--dobra) * 1.48);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 148' preserveAspectRatio='none'%3E%3Cpath fill='%23EE1B22' d='M0 10C324 10 576 70 720 110C864 70 1116 10 1440 10V19C1116 19 864 79 720 119C576 79 324 19 0 19Z'/%3E%3Cpath fill='%23A6CE38' d='M0 24C324 24 576 84 720 124C864 84 1116 24 1440 24V33C1116 33 864 93 720 133C576 93 324 33 0 33Z'/%3E%3Cpath fill='%2303ACF1' d='M0 38C324 38 576 98 720 138C864 98 1116 38 1440 38V47C1116 47 864 107 720 147C576 107 324 47 0 47Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}