/* TexRH, herói com o produto (23/10/2026, rodada Família Tex).
   Substitui o herói de foto de banco (hero-direcao-20260930.css, que fica no disco para o rollback): o que aparece
   agora é o painel do sistema de hoje, capturado da empresa de Demonstração, numa moldura de navegador, com a lista
   de colaboradores do celular por cima. Carrega DEPOIS de site-encaixe-20260930.css e tem a mesma especificidade
   das regras de .heroi de lá, então cada ponto de quebra que muda a grade é repetido aqui. */
.heroi-produto{padding:56px 0 40px;overflow:hidden}
.heroi-produto .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:36px 56px;max-width:1240px}
/* #titulo-heroi tem regra própria em landing-20261001.css (id: tamanho e 17ch); aqui ela é refeita com o id. */
.heroi-produto #titulo-heroi{font-size:clamp(34px,3vw,48px);line-height:1.08;max-width:19ch}
.heroi-produto p.lead{max-width:46ch}
.heroi-produto .vitrine{position:relative;min-width:0;margin:0;padding:0 0 34px}
.device-browser{margin:0;border:1px solid var(--rh-linha-escura);border-radius:14px;overflow:hidden;background:var(--rh-base-2);box-shadow:0 28px 60px -24px rgba(0,0,0,.6)}
.device-browser .barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--rh-base-3);border-bottom:1px solid var(--rh-linha-escura)}
.device-browser .barra i{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(248,250,252,.28)}
.device-browser .barra span{flex:1;min-width:0;max-width:280px;margin-left:10px;height:18px;padding:0 10px;border-radius:9px;background:rgba(12,19,34,.55);color:var(--rh-apoio);font-size:11px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-browser img,.device-phone img{display:block;width:100%;height:auto}
.device-phone{position:absolute;right:-6px;bottom:0;width:24%;min-width:92px;max-width:172px;margin:0;border:5px solid var(--rh-base);border-radius:20px;overflow:hidden;background:var(--rh-base);box-shadow:0 22px 44px -16px rgba(0,0,0,.7)}
.heroi-produto .provas{margin-top:8px}
@media (min-width:921px) and (max-width:1100px){
  .heroi-produto .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
  .heroi-produto #titulo-heroi{font-size:38px}
}
@media (max-width:920px){
  .heroi-produto{padding:36px 0 30px}
  .heroi-produto .wrap{grid-template-columns:1fr;max-width:720px}
  .heroi-produto #titulo-heroi{font-size:clamp(34px,5.4vw,44px);max-width:22ch}
  .heroi-produto .vitrine{padding-bottom:28px;margin-right:10px}
}
@media (max-width:640px){
  .heroi-produto #titulo-heroi{font-size:clamp(28px,8.4vw,36px);max-width:none}
  .device-browser .barra{height:24px}
  .device-browser .barra span{display:none}
  .device-phone{width:27%;border-width:4px;border-radius:14px}
}
@media (min-width:641px) and (max-width:920px) and (max-height:520px){
  .heroi-produto .wrap{grid-template-columns:minmax(0,1fr) 300px;max-width:1120px}
  .heroi-produto .vitrine{grid-row:1;grid-column:2;margin-right:0}
}
/* Guias no fim da página, colados ao rodapé (23/10/2026): mais baixos que uma seção de conteúdo. */
.guias-rodape{padding:48px 0 56px}
.guias-rodape .secao-cabeca{margin-bottom:24px}
/* 13 guias numa grade de 3 (ou de 2 no tablet) deixavam um cartão sozinho na última linha: ele ocupa a linha inteira. */
.guias-rodape .guias li:last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:920px){
  .guias-rodape .guias li:last-child:nth-child(3n+1){grid-column:auto}
  .guias-rodape .guias li:last-child:nth-child(2n+1){grid-column:1/-1}
}
@media (max-width:640px){
  .guias-rodape .guias li:last-child:nth-child(2n+1){grid-column:auto}
}