/**
 * paginas.css — estilos das páginas internas do portal.
 * Carregado depois do landing.css, que define os tokens e os componentes comuns.
 *
 * @author Fernando da AiA Soluções
 * @version 6.1
 */

/* ============================ CAPA ============================ */
.capa{background:var(--teal);color:#fff;padding:72px 0 64px;position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;right:-6%;top:-45%;width:500px;height:500px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,127,65,.2),transparent 68%)}
.capa-in{position:relative;z-index:3}
.capa-in h1{max-width:22ch}
.capa h1{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.1rem);font-weight:600;
  letter-spacing:-1.3px;line-height:1.06;margin:16px 0 14px}
.capa h1 em{font-style:italic;color:var(--laranja)}
.capa p{opacity:.88;font-weight:300;font-size:1.04rem;max-width:52ch}

/* A capa ocupava só a altura do texto: em 1920px virava uma faixa de
   quase 6:1 e comia o topo da foto. Com a altura mínima proporcional à
   largura, a pior proporção cai para ~4:1 e sobra imagem. */
.capa-foto{padding:110px 0 96px;min-height:clamp(340px,26vw,480px);
  display:flex;align-items:center}
.capa-foto > .wrap{width:100%}
.capa-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;z-index:0}
.capa-foto::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(1,52,59,.96) 0%,rgba(1,52,59,.8) 42%,rgba(1,52,59,.35) 100%)}

/* ============================ FILTROS ============================ */
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px;
  border:1px solid var(--linha);background:#fff;font-size:.8rem;font-weight:600;
  color:var(--tinta-70);transition:all var(--t)}
.chip:hover{border-color:var(--tinta-45);color:var(--tinta)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip b{font-size:.7rem;font-weight:700;background:var(--papel-3);color:var(--tinta-45);
  padding:1px 7px;border-radius:999px}
.chip.on b{background:rgba(255,255,255,.2);color:#fff}

.filtros-acervo{gap:10px;margin-bottom:18px}
.busca{position:relative;flex:1;min-width:230px;max-width:420px}
.busca svg{position:absolute;left:14px;top:12px;width:16px;height:16px;color:var(--tinta-45)}
.busca input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--linha);
  border-radius:var(--r);font-family:inherit;font-size:.87rem;background:#fff;transition:all var(--t)}
.busca input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,79,89,.1)}

/* ============================ GRADE DE PUBLICAÇÕES ============================ */
.grade-pub{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:26px}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--r-xl);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:all var(--t)}
.cartao:hover,.cartao:focus-visible{transform:translateY(-5px);box-shadow:var(--s2);
  border-color:transparent;outline:none}
.cartao-img{aspect-ratio:16/10;overflow:hidden;background:var(--papel-3)}
.cartao-img img{width:100%;height:100%;object-fit:cover;transition:transform 800ms ease}
.cartao:hover .cartao-img img{transform:scale(1.05)}
.cartao-img-vazia{display:grid;place-items:center;color:var(--teal);opacity:.3}
.cartao-img-vazia svg{width:40px;height:40px}
.cartao-in{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.cartao-in h2{font-family:var(--serif);font-size:1.16rem;font-weight:600;line-height:1.3;
  letter-spacing:-.3px}
.cartao-in p{font-size:.87rem;color:var(--tinta-70);font-weight:300;flex:1}
.cartao-evento{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem!important;
  font-weight:600!important;color:var(--tinta)!important}
.cartao-ler{font-size:.8rem;font-weight:700;color:var(--teal);display:inline-flex;
  align-items:center;gap:7px;margin-top:4px}
.cartao:hover .cartao-ler svg{transform:translateX(4px)}
.cartao-ler svg{transition:transform var(--t)}

/* ============================ PAGINAÇÃO ============================ */
.paginacao{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:44px}
.pag-atual{font-size:.82rem;color:var(--tinta-45);font-weight:600}

/* ============================ BLOCOS DE TEXTO ============================ */
.titulo-sec{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;
  letter-spacing:-.8px;line-height:1.14;margin:14px 0 18px}
.texto-corrido{color:var(--tinta-70);font-weight:300;font-size:1rem;margin-bottom:16px;max-width:62ch}
.nota-pendente{font-size:.84rem;color:var(--tinta-45);border-left:3px solid var(--laranja);
  padding-left:14px;margin-top:22px;max-width:56ch}

.dupla{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.dupla-inversa .figura{order:-1}
.figura{margin:0}
.figura img{width:100%;border-radius:var(--r-xl);box-shadow:var(--s2)}
.figura-marca{background:#fff;border-radius:var(--r-xl);padding:48px;box-shadow:var(--s2)}
.figura-marca img{box-shadow:none;border-radius:0}

.sec-escura{background:var(--papel-2)}
.sec-escura .texto-corrido{color:var(--tinta-70)}

/* ============================ VALORES ============================ */
.grade-valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.valor{background:#fff;border:1px solid var(--linha);border-radius:var(--r-xl);padding:28px;
  transition:all var(--t)}
.valor:hover{transform:translateY(-4px);box-shadow:var(--s2);border-color:transparent}
.valor-ic{width:46px;height:46px;border-radius:13px;background:var(--teal-50);color:var(--teal);
  display:grid;place-items:center;margin-bottom:16px}
.valor h3{font-size:1.06rem;font-weight:600;margin-bottom:7px}
.valor p{font-size:.88rem;color:var(--tinta-70);font-weight:300}

/* ============================ ACERVO ============================ */
.lista-acervo{display:grid;gap:12px}
.arquivo{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r-g);padding:18px 22px;
  transition:all var(--t)}
.arquivo:hover{box-shadow:var(--s2);border-color:transparent;transform:translateY(-2px)}
.arq-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.arq-doc{background:var(--teal-50);color:var(--teal)}
.arq-img{background:var(--laranja-50);color:var(--laranja-600)}
.arq-txt{min-width:0}
.arq-txt h3{font-size:.95rem;font-weight:600;margin-bottom:5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.arq-txt p{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78rem;
  color:var(--tinta-45)}
.btn-baixar{flex-shrink:0}

/* ============================ REDES ============================ */
.grade-redes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.rede{background:#fff;border:1px solid var(--linha);border-radius:var(--r-xl);padding:32px;
  display:block;transition:all var(--t);position:relative;overflow:hidden}
.rede::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl);
  border:1.5px solid transparent;transition:border-color var(--t)}
.rede:hover{transform:translateY(-5px);box-shadow:var(--s2)}
.rede:hover::after{border-color:var(--laranja)}
.rede-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  color:#fff;margin-bottom:18px}
.rede-instagram .rede-ic{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888)}
.rede-facebook .rede-ic{background:#1877F2}
.rede-linkedin .rede-ic{background:#0A66C2}
.rede h2{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:-.4px}
.rede-handle{display:block;font-size:.84rem;color:var(--tinta-45);margin:2px 0 12px}
.rede p{font-size:.88rem;color:var(--tinta-70);font-weight:300;margin-bottom:18px}
.rede-ir{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;
  color:var(--teal)}

/* ============================ MOSAICO ============================ */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.mosaico-it{aspect-ratio:1;border-radius:var(--r-g);overflow:hidden;position:relative;
  padding:0;border:none;background:var(--papel-3);cursor:pointer}
.mosaico-it img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.mosaico-it:hover img{transform:scale(1.07)}
.mosaico-it::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 45%,rgba(1,26,30,.92));transition:opacity var(--t)}
.mosaico-txt{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px;color:#fff;
  font-size:.84rem;font-weight:600;text-align:left;line-height:1.35}

/* ============================ PORTAL DE ACESSO ============================ */
.grade-acesso{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.acesso-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-xl);padding:30px;
  display:block;transition:all var(--t);position:relative;overflow:hidden}
.acesso-card::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl);
  border:1.5px solid transparent;transition:border-color var(--t)}
.acesso-card:hover{transform:translateY(-5px);box-shadow:var(--s2)}
.acesso-card:hover::after{border-color:var(--laranja)}
.acesso-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:.92rem;margin-bottom:18px;overflow:hidden}
.acesso-ic-img{background:var(--papel-3)}
.acesso-ic-img img{width:100%;height:100%;object-fit:cover}
.acesso-card h2{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.4px;
  margin-bottom:7px}
.acesso-card p{font-size:.88rem;color:var(--tinta-70);font-weight:300;margin-bottom:18px}
.acesso-ir{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;
  color:var(--teal)}

.aviso-acesso{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--papel-2);
  border-radius:var(--r-xl);padding:26px 30px;margin-top:34px}
.aviso-acesso h3{font-size:1rem;font-weight:600}
.aviso-acesso p{font-size:.86rem;color:var(--tinta-45)}
.aviso-acesso .btn{margin-left:auto}
.aviso-ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--linha);
  display:grid;place-items:center;color:var(--teal);flex-shrink:0}

/* ============================ RESPONSIVO ============================ */
@media(max-width:900px){
  .dupla{grid-template-columns:1fr;gap:34px}
  .dupla-inversa .figura{order:0}
  .figura-marca{padding:32px}
  .arquivo{grid-template-columns:auto 1fr;gap:14px}
  .btn-baixar{grid-column:1/-1;width:100%}
  .aviso-acesso .btn{margin-left:0;width:100%}
}
@media(max-width:820px){
  .capa{padding:48px 0 44px}
  .capa-foto{padding:72px 0 64px}
  .paginacao{flex-wrap:wrap}
}

/* ============================ PÁGINA DE PUBLICAÇÃO ============================ */
.artigo{padding-bottom:20px}
.artigo-topo{padding:38px 0 30px}
.migalhas{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--tinta-45);
  margin-bottom:24px;flex-wrap:wrap}
.migalhas a:hover{color:var(--teal);text-decoration:underline}
.migalhas .atual{color:var(--tinta)}
.artigo-topo h1{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.9rem);font-weight:600;
  letter-spacing:-1.2px;line-height:1.1;margin:14px 0 0;max-width:24ch}
.artigo-resumo{font-size:1.1rem;color:var(--tinta-70);font-weight:300;margin-top:16px;max-width:60ch}
.artigo-evento{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:.88rem;font-weight:600}
.artigo-evento span{display:inline-flex;align-items:center;gap:7px}
.artigo-evento svg{color:var(--laranja)}

.artigo-capa{margin:8px 0 40px}
.artigo-capa img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--r-xl);
  box-shadow:var(--s2)}

/* Coluna editorial única: topo, capa, corpo e navegação na mesma medida,
   senão o título fica à esquerda e o texto centralizado. */
.artigo-topo .wrap,
.artigo-capa .wrap,
.artigo-corpo,
.artigo-nav-in{max-width:840px}
.artigo-texto{font-size:1.04rem;line-height:1.75;color:var(--tinta-70);font-weight:300}
.artigo-texto p{margin-bottom:20px}
.artigo-texto h2,.artigo-texto h3{font-family:var(--serif);color:var(--tinta);font-weight:600;
  letter-spacing:-.5px;margin:34px 0 14px}
.artigo-texto h2{font-size:1.5rem}
.artigo-texto h3{font-size:1.24rem}
.artigo-texto ul,.artigo-texto ol{padding-left:24px;margin-bottom:20px}
.artigo-texto li{margin-bottom:8px}
.artigo-texto a{color:var(--azul);text-decoration:underline}
.artigo-texto blockquote{border-left:3px solid var(--laranja);padding-left:20px;margin:26px 0;
  font-style:italic;color:var(--tinta)}
.artigo-texto strong{color:var(--tinta);font-weight:600}
.artigo-texto hr{border:none;border-top:1px solid var(--linha);margin:34px 0}

.artigo-anexos{margin-top:44px;border-top:1px solid var(--linha);padding-top:30px}
.artigo-anexos h2,.artigo-share h2{font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--tinta-45);margin-bottom:14px;font-weight:700}
.artigo-anexos ul{list-style:none;display:grid;gap:10px}
.artigo-anexos a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linha);
  border-radius:var(--r-g);padding:14px 18px;transition:all var(--t)}
.artigo-anexos a:hover{border-color:var(--teal);box-shadow:var(--s1);transform:translateY(-2px)}
.arq-nome{flex:1;min-width:0}
.arq-nome strong{display:block;font-size:.9rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.arq-nome small{font-size:.76rem;color:var(--tinta-45)}
.artigo-anexos a > svg:last-child{color:var(--teal)}

.artigo-share{margin-top:34px;border-top:1px solid var(--linha);padding-top:30px}
.share-btns{display:flex;gap:9px;flex-wrap:wrap}
.share{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--linha);background:#fff;font-family:inherit;font-size:.82rem;
  font-weight:600;color:var(--tinta-70);cursor:pointer;transition:all var(--t)}
.share:hover{border-color:var(--teal);color:var(--teal)}
.share-ok{background:var(--teal);border-color:var(--teal);color:#fff}

.artigo-nav{border-top:1px solid var(--linha);margin-top:56px;padding-top:34px}
.artigo-nav-in{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.nav-pub{display:block;padding:22px 24px;border:1px solid var(--linha);border-radius:var(--r-xl);
  transition:all var(--t)}
.nav-pub:hover{border-color:var(--teal);box-shadow:var(--s1);transform:translateY(-2px)}
.nav-pub-dir{text-align:right}
.nav-rot{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;color:var(--laranja);margin-bottom:8px}
.nav-pub-dir .nav-rot{flex-direction:row}
.nav-pub strong{display:block;font-size:.96rem;font-weight:600;line-height:1.35}

.erro-404{padding:70px 24px}
.erro-404 h1{font-family:var(--serif);font-size:1.7rem;font-weight:600;margin-bottom:10px;color:var(--tinta)}
.erro-404 p{margin-bottom:22px}

@media(max-width:820px){
  .artigo-nav-in{grid-template-columns:1fr}
  .nav-pub-dir{text-align:left}
  .artigo-capa img{max-height:280px}
}

/* Celular: o respiro de 110/96px deixava a capa alta demais para a
   largura, fechando o recorte. Menos padding, mais foto visível. */
@media (max-width:640px){
  .capa-foto{padding:64px 0 56px;min-height:0}
}