/*
  Layout da Home (26/09/2026), com base na apresentação da moderna.com.br/escola-publica.
  2ª rodada no mesmo dia: cartões de coleção com personagens (H4) e as cores do logo como assinatura (fim do arquivo).
  A versão anterior está em DEV-LOCAL/backup-antes-home-moderna-2026-09-26/scarpa-versao-1.zip.
  SÓ LAYOUT: textos, ordem das seções e conteúdo continuam iguais.
  Este arquivo só é carregado na Home (<main class="pg-home">), junto com home-layout.js.
  Para desfazer tudo: em gerar.py → home(), tirar os dois arquivos e a classe "pg-home" e rodar gerar.py
  (ou restaurar DEV-LOCAL/backup-antes-layout-home-2026-09-26).
*/

/* ===== H1 · Banner ===== */
/* arrastar para o lado no banner troca o slide (home-layout.js), em vez de virar o gesto "voltar" do navegador;
   rolar a página e o zoom com dois dedos continuam normais */
.pg-home .banner-trilho{touch-action:pan-y pinch-zoom}
/* computador: o banner fica alinhado à coluna do site (a mesma do logo, do menu e das seções), como um cartão
   de cantos arredondados. A arte encolhe por igual (mesma proporção 1920×800): não distorce e não corta nada.
   No tablet e no celular continua de ponta a ponta (lá a largura toda ajuda a ler o texto das artes). */
@media (min-width:1025px){
  .pg-home .banner{background:transparent}
  .pg-home .banner-trilho{width:min(calc(100% - 40px),1100px);margin:24px auto;border-radius:20px;overflow:hidden;
    box-shadow:0 24px 48px -32px rgba(0,37,73,.55)}
}
/* pontinhos: mesma aparência, área de toque maior (28px) */
.pg-home .banner-pontos{gap:2px;padding:8px 0}
.pg-home .banner-pontos button{position:relative;width:28px;height:28px;background:transparent;border-radius:50%}
.pg-home .banner-pontos button::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#C9D3DD;transition:background .2s}
.pg-home .banner-pontos button.ativo{background:transparent}
.pg-home .banner-pontos button.ativo::before{background:var(--navy)}
.pg-home .banner-pontos button:focus-visible{outline:2px solid #009CDE;outline-offset:0}
/* celular: as setas saem de cima da arte e ficam na faixa dos pontinhos, abaixo do banner */
@media (max-width:767px){
  .pg-home .banner-pontos{padding:0;height:48px;align-items:center;background:var(--fundo)}
  .pg-home .banner-seta{top:auto;bottom:-48px;transform:none;width:48px;height:48px;font-size:30px;color:var(--navy);text-shadow:none}
  .pg-home .banner-seta.anterior{left:calc(50% - 56px)}
  .pg-home .banner-seta.proxima{right:calc(50% - 56px)}
}
/* sem os pontinhos abaixo do banner (26/09/2026): a troca continua pelas setas, pelo arrastar no celular e sozinha
   a cada 6 s. Os botões continuam no HTML (o carrossel depende deles), só ficam escondidos.
   No celular a faixa fica, porque é onde estão as setas; no tablet e no computador ela sai. */
.pg-home .banner-pontos button{display:none}
@media (min-width:768px){ .pg-home .banner-pontos{display:none} }

/* ===== H2 · Botões: um padrão só, com contraste correto (texto marinho no mesmo azul: 5,7:1) ===== */
.pg-home .botao{border-radius:8px}
.pg-home .botao:not(.navy){color:var(--navy)}

/* ===== H3 · Municípios: o logo de cada prefeitura num cartão igual (pedido em 26/09/2026) ===== */
/* os logos já vêm padronizados (mesma tela 160×75, mesmo peso visual); o cartão só enquadra.
   O espaço fica em cada cartão (e não no "gap") para o loop não dar pulo. */
.pg-home .faixa-cidades{background:transparent;box-shadow:none;border-radius:0;padding-block:10px 24px}
.pg-home .faixa-cidades .faixa-logos-trilho{animation-duration:301s} /* mesma velocidade de antes (~46,5 px/s) */
.pg-home .faixa-cidades .cidade{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:184px;height:96px;margin-right:16px;
  padding:10px 12px;background:#fff;border-radius:16px;box-shadow:0 12px 26px -18px rgba(0,37,73,.55),0 0 0 1px rgba(0,37,73,.06)}
.pg-home .faixa-cidades .cidade img{display:block;width:160px;height:75px;object-fit:contain}
/* município sem logo: o nome, no mesmo cartão */
.pg-home .faixa-cidades .cidade-nome{font-weight:700;font-size:1.05rem;color:var(--navy);text-align:center;line-height:1.2;white-space:normal}
@media (max-width:767px){
  .pg-home .faixa-cidades .cidade{width:150px;height:80px;margin-right:12px;padding:8px 10px;border-radius:14px}
  .pg-home .faixa-cidades .cidade img{width:130px;height:61px}
  .pg-home .faixa-cidades .faixa-logos-trilho{animation-duration:244s}
}
/* (29/09/2026, a pedido) os carrosséis andam para todos, também com "menos movimento" / animações desligadas no
   aparelho. Antes, nesse caso, viravam uma grade parada com todos os logos, e parecia que o site estava quebrado.
   Continuam parando ao passar o mouse. Aqui só se desfaz, na Home, o que o estilo.css faz com "menos movimento". */
@media (prefers-reduced-motion:reduce){
  .pg-home .faixa-logos-trilho,
  .pg-home .biblioteca-trilho{animation-name:rolar;animation-timing-function:linear;animation-iteration-count:infinite}
  .pg-home .faixa-cidades{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .pg-home .faixa-cidades .faixa-logos-trilho{flex-wrap:nowrap;justify-content:flex-start;flex-shrink:0}
  .pg-home .faixa-cidades .cidade[aria-hidden="true"]{display:flex}
}

/* ===== H4 · Soluções: um cartão por coleção, no estilo da Moderna (2ª rodada, 26/09/2026) =====
   personagem do livro num círculo com a cor do tema + logo + seta; o cartão inteiro leva à coleção.
   Continua carrossel (pedido do Mudanças.md), na mesma velocidade de antes (~40 px/s).
   O espaço fica em cada cartão (e não no "gap") para o loop não dar pulo. */
.pg-home .biblioteca{padding-block:18px 34px}
.pg-home .biblioteca:focus-within .biblioteca-trilho{animation-play-state:paused} /* para quem navega pelo teclado */
/* 13/10/2026: 76s com 12 coleções (eram 70s com 11), para manter a mesma velocidade com a Mova-se */
.pg-home .biblioteca-trilho{gap:0;align-items:stretch;animation-duration:76s}
.pg-home .biblioteca-trilho a.col-cartao{display:flex;flex-direction:column;align-items:center;gap:12px;width:232px;margin-right:22px;
  padding:22px 18px 16px;border-radius:22px;background:#fff;text-decoration:none;
  box-shadow:0 18px 36px -26px rgba(0,37,73,.5),0 0 0 1px rgba(0,37,73,.07);transition:transform .25s ease,box-shadow .25s ease}
.pg-home .biblioteca-trilho a.col-cartao:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(0,37,73,.55),0 0 0 1px rgba(0,37,73,.09)}
.pg-home .biblioteca-trilho a.col-cartao:focus-visible{outline:3px solid #009CDE;outline-offset:3px}
/* círculo na cor do tema, com um anel fino (como os retratos da Moderna) */
.pg-home .col-circulo{display:block;flex:0 0 auto;width:132px;height:132px;border-radius:50%;overflow:hidden;background:var(--cor);
  box-shadow:0 0 0 5px #fff,0 0 0 7px var(--cor)}
.pg-home .col-circulo img{display:block;width:100%;height:100%}
/* logo: 10 dos 11 já trazem um cartão branco desenhado; o recorte tira a borda fina dele */
.pg-home .biblioteca-trilho a.col-cartao > img{display:block;width:176px;height:auto;clip-path:inset(2px round 10px)}
.pg-home .biblioteca-trilho a.col-cartao[href$="play-connect.html"] > img{padding:6px 14px;clip-path:none}
.pg-home .col-seta{display:grid;place-items:center;width:34px;height:34px;margin-top:auto;border-radius:50%;color:var(--navy);
  border:1.5px solid rgba(0,37,73,.25);transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.pg-home .biblioteca-trilho a.col-cartao:hover .col-seta{transform:translateX(4px);background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:767px){
  .pg-home .biblioteca-trilho{animation-duration:63s} /* 58s com 11 coleções */
  .pg-home .biblioteca-trilho a.col-cartao{width:196px;margin-right:14px;padding:18px 14px 14px;border-radius:18px}
  .pg-home .col-circulo{width:112px;height:112px}
  .pg-home .biblioteca-trilho a.col-cartao > img{width:150px}
}

/* ===== H5 · "Por que ser um parceiro Scarpa?": um ícone redondo em cada cartão ===== */
.pg-home #parceiro .motivo::before{content:"";display:block;width:52px;height:52px;margin-bottom:16px;border-radius:50%;
  border:1px solid rgba(143,211,255,.3);background:rgba(143,211,255,.12) center/26px 26px no-repeat}
.pg-home #parceiro .motivo:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5C4.6 4 8 4 12 6c4-2 7.4-2 10-.5V19c-2.6-1.5-6-1.5-10 .5-4-2-7.4-2-10-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E")} /* Portfolio em constante atualização (livro aberto) */
.pg-home #parceiro .motivo:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")} /* Inovação que Transforma (lâmpada) */
.pg-home #parceiro .motivo:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E")} /* Expansão constante (seta subindo) */
.pg-home #parceiro .motivo:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.5a3.5 3.5 0 0 0-3.5-3.5h-5A3.5 3.5 0 0 0 4 18.5V20'/%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M20 20v-1.5a3.5 3.5 0 0 0-2.6-3.4'/%3E%3Cpath d='M15.5 4.6a3.5 3.5 0 0 1 0 6.8'/%3E%3C/svg%3E")} /* Parceria próxima (pessoas) */
.pg-home #parceiro .motivo:nth-child(5)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 16v-4'/%3E%3Cpath d='M12 16V8'/%3E%3Cpath d='M17 16V5'/%3E%3C/svg%3E")} /* Negócios que Geram Valor (gráfico) */
.pg-home #parceiro .motivo:nth-child(6)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2z'/%3E%3Cpath d='M13 10h4.5l3.5 3.5V16h-8'/%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17' cy='17.5' r='2'/%3E%3C/svg%3E")} /* Estrutura para Entregar (caminhão) */

/* ===== H6 · Cartões: cantos de 16px e texto dos cartões um pouco maior ===== */
.pg-home #parceiro .motivo{border-radius:16px;padding:26px 24px}
.pg-home #parceiro .motivo p{font-size:.95rem}
.pg-home .form-catalogo{border-radius:16px}
.pg-home #formacoes .foto-secao img,.pg-home .mapa-caixa{border-radius:16px}

/* ===== H7 · Tablet e celular: mapa e robô com tamanho limitado ===== */
@media (max-width:1024px){
  .pg-home .mapa-caixa,.pg-home #atuacao .legenda{max-width:560px;margin-inline:auto}
  .pg-home .robo{max-width:300px}
  .pg-home .robo.robo-scarplay{max-width:230px}
}

/* ===== 2ª rodada (26/09/2026) · as cores do logo Scarpa como assinatura na Home ===== */
/* Parceiro: as 3 ondas do logo (vermelho, verde, azul) no canto de cima, apoiadas nas bordas e longe dos textos.
   Só em telas largas, onde sobra espaço ao lado do título; no tablet e no celular ficaria perto do texto. */
.pg-home #parceiro{position:relative;overflow:hidden}
.pg-home #parceiro .container{position:relative;z-index:1}
@media (min-width:1280px){
  .pg-home #parceiro::before{content:"";position:absolute;left:0;top:0;width:min(22%,440px);aspect-ratio:440/200;pointer-events:none;opacity:.5;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 200' fill='none' stroke-width='14' stroke-linecap='round'%3E%3Cpath stroke='%23ED1B22' d='M-20 40C60 0 120 80 200 40S330 0 400 30'/%3E%3Cpath stroke='%23A6CD38' d='M-20 80C60 40 120 120 200 80S330 40 400 70'/%3E%3Cpath stroke='%2300ADEE' d='M-20 120C60 80 120 160 200 120S330 80 400 110'/%3E%3C/svg%3E") left top/contain no-repeat}
}
/* títulos das seções: um pouco maiores e com a barrinha nas 3 cores do logo (a mesma assinatura do rodapé) */
.pg-home h2{font-size:clamp(1.7rem,3.3vw,2.5rem);letter-spacing:-.012em;line-height:1.18}
.pg-home h2::after{content:"";display:block;width:56px;height:4px;margin-top:14px;border-radius:2px;
  background:linear-gradient(90deg,#ED1B22 0 33.34%,#A6CD38 33.34% 66.67%,#00ADEE 66.67%)}
.pg-home .secao-topo.centro h2::after{margin-inline:auto}

/* ===== Fundos (26/09/2026): o cinza-claro no lugar do branco em todas as seções claras (regra em estilo.css,
   .pg-institucional). O ritmo vem das faixas escuras: números, Play Connect, Parceiro e rodapé. ===== */

/* ===== Plataforma AvançaEdu: o mesmo texto e a mesma imagem da página do Avança Mais ===== */
.pg-home .avancaedu-foto img{display:block;width:100%;height:auto;max-width:560px;margin-inline:auto}
@media (max-width:1024px){ .pg-home .avancaedu-foto img{max-width:480px} }

/* ===== Azul único na Home (26/09/2026): todas as faixas escuras no mesmo azul-marinho do Parceiro e do rodapé (#002549) =====
   Números, Parceiro e rodapé já usavam esse azul; o Play Connect usava um degradê mais escuro e passa para o mesmo. */
.pg-home .secao-tecnologia{background:var(--navy)}

/* ===== Formações (Home): fundo azul-marinho e a foto do lado direito (26/09/2026) =====
   Com o fundo escuro, título, subtítulo e texto passam para as mesmas cores claras do Parceiro.
   No computador: rótulo, título e texto à esquerda e a foto à direita, inteira (sem corte) e centralizada.
   No tablet e no celular a ordem continua a mesma de antes (título, foto, texto). */
.pg-home #formacoes{background:var(--navy);color:#B9CBE0}
.pg-home #formacoes h2,.pg-home #formacoes .subtitulo-bloco{color:#fff}
.pg-home #formacoes .rotulo{color:#8FD3FF}
@media (min-width:1025px){
  .pg-home #formacoes .formacoes-grade{grid-template-areas:"rotulo foto" "titulo foto" "texto foto";grid-template-rows:auto auto 1fr;row-gap:0;align-items:start}
  .pg-home #formacoes .formacoes-esq{display:contents}
  .pg-home #formacoes .formacoes-esq > .rotulo{grid-area:rotulo}
  .pg-home #formacoes .formacoes-esq > h2{grid-area:titulo}
  .pg-home #formacoes .formacoes-esq > .foto-secao{grid-area:foto;align-self:center;min-height:0}
  .pg-home #formacoes .formacoes-esq > .foto-secao img{height:auto}
  .pg-home #formacoes .formacoes-grade > div:last-child{grid-area:texto}
}

/* ===== Nossa atuação comercial (Home): o mapa do lado esquerdo (26/09/2026), só no computador ===== */
@media (min-width:1025px){
  .pg-home #atuacao .duas-colunas > div:last-child{order:-1}
}