/* Página: especialidades (índice das 12 especialidades). Carregado por último, depois de base, layout, components e responsive.
   As classes .hub-* formam um índice editorial genérico (navegação por seções, grupos, grade de itens com foto e resumo);
   se outra página de listagem passar a usá-las, mover este bloco para components.css. */

/* hero: texto curto à esquerda, fotografia real à direita (mesma forma de gota dos heros de Contato e Empresas) */
.hub-hero{padding:28px 0 64px;}
.hub-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;}
.hub-hero .breadcrumb{padding:0;margin-bottom:22px;}
.hub-hero h1{font-size:clamp(2.5rem,4.8vw,3.6rem);line-height:1.04;letter-spacing:-.025em;}
.hub-lead{margin-top:18px;font-size:1.125rem;line-height:1.6;color:var(--tinta-2);max-width:40ch;}
.hub-hero .btn{margin-top:30px;}
.hub-hero-foto{height:clamp(380px,40vw,480px);border-radius:var(--folha-g);overflow:hidden;background:var(--nevoa);}
.hub-hero-foto picture{display:block;height:100%;}
.hub-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:58% 62%;display:block;}

/* navegação pelas frentes: fixa logo abaixo do cabeçalho enquanto a lista está na tela
   (top e --hub-topo acompanham a altura real do cabeçalho: 85,75px acima de 1140px e 84px abaixo) */
.hub-corpo{--hub-topo:138px;}
.hub-frentes{position:sticky;top:85px;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--linha-leve);border-bottom:1px solid var(--linha-leve);}
.hub-frentes ul{position:relative;display:flex;gap:44px;list-style:none;margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.hub-frentes ul::-webkit-scrollbar{display:none;}
.hub-frentes li{flex:none;}
.hub-frentes a{position:relative;display:block;padding:17px 0 16px;font-size:15px;line-height:1.2;font-weight:500;color:var(--tinta-2);white-space:nowrap;transition:color .2s ease;}
.hub-frentes a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ciano);transform:scaleX(0);transform-origin:left center;transition:transform .3s ease;}
.hub-frentes a:hover{color:var(--noite);}
.hub-frentes a:focus-visible{outline-offset:-3px;}
.hub-frentes a[aria-current="true"]{color:var(--ciano-escuro);-webkit-text-stroke:.3px currentColor;}
.hub-frentes a[aria-current="true"]::after{transform:scaleX(1);}

/* grupos e especialidades */
.hub-lista{background:var(--branco);border-bottom:1px solid var(--linha-leve);}
.hub-grupo{--respiro:80px;padding:var(--respiro) 0 80px;scroll-margin-top:calc(var(--hub-topo) - var(--respiro) + 28px);}
.hub-grupo:first-child{--respiro:64px;}
.hub-grupo + .hub-grupo{border-top:1px solid var(--linha-leve);}
.hub-grupo-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:12px 80px;align-items:end;margin-bottom:44px;}
.hub-grupo-head p{color:var(--tinta-2);max-width:52ch;}
.hub-grupo h2[tabindex="-1"]:focus{outline:none;}
.hub-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 36px;list-style:none;margin:0;padding:0;}
.hub-item{position:relative;display:flex;flex-direction:column;}
.hub-foto{width:100%;flex:none;overflow:hidden;border-radius:24px 24px 24px 10px;aspect-ratio:3/2;background:var(--nevoa);}
.hub-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.hub-item h3{margin-top:22px;font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:1.375rem;line-height:1.22;letter-spacing:-.005em;text-wrap:balance;}
.hub-item h3 a{color:var(--noite);transition:color .25s ease;}
.hub-item h3 a::after{content:"";position:absolute;inset:0;border-radius:24px 24px 24px 10px;}
.hub-item h3 a:focus-visible{outline:none;}
.hub-item h3 a:focus-visible::after{outline:3px solid var(--ciano);outline-offset:8px;}
.hub-item p{margin-top:10px;font-size:15px;line-height:1.62;color:var(--tinta-2);}
.hub-cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;align-self:flex-start;font-size:14px;font-weight:600;color:var(--ciano-escuro);}
.hub-cta svg{width:15px;height:15px;transition:transform .3s ease;}

/* no desktop, nome, resumo e chamada de cada cartão ficam alinhados com os cartões vizinhos */
@supports (grid-template-rows:subgrid){
  @media (min-width:921px){
    .hub-grade{row-gap:0;}
    .hub-item{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;}
    .hub-item:nth-child(n+4){margin-top:52px;}
    .hub-item h3{align-self:end;}
    .hub-cta{margin-top:0;}
  }
}

/* microinterações: só com ponteiro real e sem movimento reduzido; o foco pelo teclado recebe o mesmo retorno */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hub-item:hover .hub-foto img{transform:scale(1.03);}
  .hub-item:hover h3 a{color:var(--ciano-escuro);}
  .hub-item:hover .hub-cta svg{transform:translateX(3px);}
}
@media (prefers-reduced-motion:no-preference){
  .hub-item:has(h3 a:focus-visible) .hub-foto img{transform:scale(1.03);}
  .hub-item:has(h3 a:focus-visible) .hub-cta svg{transform:translateX(3px);}
}

/* integração entre as áreas */
.hub-integracao{background:var(--nevoa);padding:88px 0;}
.hub-integracao-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px 80px;align-items:start;}
.hub-integracao h2{max-width:16ch;}
.hub-integracao p{max-width:56ch;}
.hub-integracao p + p{margin-top:16px;}
.hub-integracao p a{color:var(--indigo);font-weight:600;text-decoration:underline;text-decoration-color:rgba(33,159,203,.5);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .18s ease;}
.hub-integracao p a:hover{text-decoration-color:var(--ciano);}

@media (max-width:1140px){
  .hub-frentes{top:83px;}
  .hub-corpo{--hub-topo:136px;}
  .hub-frentes ul{gap:32px;}
  .hub-hero-grid,.hub-grupo-head,.hub-integracao-grid{column-gap:56px;}
  .hub-grade{column-gap:28px;}
}
@media (max-width:920px){
  .hub-hero{padding:20px 0 52px;}
  .hub-hero-grid,.hub-grupo-head,.hub-integracao-grid{grid-template-columns:1fr;}
  .hub-hero-grid{gap:36px;}
  .hub-hero-foto{height:340px;border-radius:var(--folha-m);}
  .hub-corpo{--hub-topo:129px;}
  .hub-frentes .wrap{padding:0;}
  .hub-frentes ul{gap:28px;padding:0 28px;scroll-padding-inline:28px;}
  .hub-frentes a{padding:14px 0 13px;font-size:14.5px;}
  .hub-grupo{--respiro:60px;padding-bottom:60px;}
  .hub-grupo:first-child{--respiro:48px;}
  .hub-grupo-head{margin-bottom:32px;}
  .hub-grade{grid-template-columns:1fr;gap:40px;}
  .hub-item{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;column-gap:28px;align-items:start;}
  .hub-foto{grid-row:1 / span 3;}
  .hub-item h3,.hub-item p,.hub-cta{grid-column:2;}
  .hub-item h3{margin-top:0;}
  .hub-cta{margin-top:0;padding-top:14px;}
  .hub-integracao{padding:72px 0;}
}
@media (max-width:560px){
  .hub-hero-foto{height:auto;aspect-ratio:4/3;border-radius:110px 110px 110px 20px;}
  .hub-item{display:block;}
  .hub-item h3{margin-top:18px;font-size:1.3rem;}
  .hub-cta{margin-top:0;}
  .hub-grade{gap:48px;}
}