/* =========================================================
   União Jovem — Santo Estêvão · v5
   Fiel à proposta de identidade e direção visual do cliente:
   creme, azul, marinho e amarelo; grotesca pesada e compacta
   nos títulos; etiquetas em caixa alta bem espaçada; capa azul
   de ponta a ponta com o monograma UJ cortado pela borda e um
   círculo de linha fina; fios claros separando as seções.

   Escrito mobile primeiro. Pontos de quebra: 40em, 48em e 64em.
   Amarelo: ação, estado e monograma. Nada de borda grossa,
   caixa tracejada ou moldura em volta da página.
   ========================================================= */

:root{
  --azul:#143DCF;
  --marinho:#071D49;
  --marinho-2:#0C2658;
  --marinho-3:#11306B;
  --amarelo:#FFD447;
  --amarelo-claro:#FFE07A;
  --creme:#F5F3EC;
  --branco:#FFFFFF;
  --tinta:#071D49;
  --tinta-2:#4B5673;
  --fio:#DDD9CE;
  --fio-escuro:rgba(255,255,255,.16);

  --fonte:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --largura:1280px;
  --calha:clamp(20px,5vw,72px);
  --gap:clamp(20px,2.4vw,36px);
  --secao:clamp(4rem,8.5vw,8rem);
  --topo:76px;
  --raio:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:64em){ :root{ --topo:104px } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 8px)}
body{
  margin:0;background:var(--creme);color:var(--tinta);
  font-family:var(--fonte);font-size:1.0625rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
a{color:inherit}
b,strong{font-weight:600}
button{font:inherit;color:inherit}
::selection{background:var(--amarelo);color:var(--marinho)}
html.menu-aberto{overflow:hidden}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--largura) + 2 * var(--calha));margin-inline:auto;padding-inline:var(--calha)}
.ico{display:inline-block;flex:none;width:1em;height:1em;vertical-align:middle}
.visualmente-oculto{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pular{position:absolute;left:1rem;top:-200px;z-index:200;padding:.875rem 1.25rem;background:var(--marinho);color:var(--branco);font-weight:600;text-decoration:none;border-radius:var(--raio)}
.pular:focus{top:1rem}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.tema-escuro :focus-visible{outline-color:var(--amarelo)}

/* ---------- tipografia ---------- */
.d1,.d2{font-weight:850;font-stretch:96%;color:var(--marinho);text-wrap:balance}
.d1{font-size:clamp(2.55rem,8.2vw,7.5rem);line-height:.92;letter-spacing:-.052em}
.d2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:.96;letter-spacing:-.05em}
.olho{
  display:block;margin-bottom:1.25rem;
  font-size:.6875rem;font-weight:700;line-height:1.3;letter-spacing:.28em;text-transform:uppercase;
  color:var(--azul);
}
.tema-escuro .olho,.olho--amarelo{color:var(--amarelo)}
.corpo{font-size:1.0625rem;line-height:1.65;color:var(--tinta-2);max-width:34em}
.corpo + .corpo{margin-top:1em}
.corpo strong{color:var(--marinho)}
.lead{font-size:clamp(1.25rem,2vw,1.625rem);line-height:1.4;letter-spacing:-.018em;color:var(--marinho);max-width:24em}

/* ---------- ações ----------
   Um sistema só: altura 50, raio 4, texto 15/600, ícone 15, seta que anda no hover,
   leve afundamento ao pressionar e foco visível. Amarelo sobre escuro, marinho sobre claro. */
.btn{
  --btn-bg:var(--amarelo);--btn-fg:var(--marinho);--btn-bg-h:var(--amarelo-claro);--btn-borda:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:50px;padding:0 1.25rem 0 1.375rem;border:0;border-radius:var(--raio);
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 0 0 1px var(--btn-borda),inset 0 -2px 0 rgba(7,29,73,.14);
  font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease);
}
.btn .ico{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover{background:var(--btn-bg-h)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--btn-borda)}
.btn:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.tema-escuro .btn:focus-visible{outline-color:var(--amarelo)}
.btn--escuro{--btn-bg:var(--marinho);--btn-fg:var(--branco);--btn-bg-h:var(--azul)}
.btn--contorno{--btn-bg:transparent;--btn-fg:var(--branco);--btn-bg-h:rgba(255,255,255,.08);--btn-borda:rgba(255,255,255,.5)}
.btn--contorno:hover{--btn-borda:var(--branco)}
.btn--bloco{display:flex;width:100%;justify-content:space-between;white-space:normal}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem}

.link{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  color:var(--marinho);font-size:.9375rem;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.34em;
  transition:color .2s var(--ease);
}
.link .ico{width:15px;height:15px;transition:transform .3s var(--ease)}
.link:hover{color:var(--azul)}
.link--claro{color:var(--branco)}
.link--claro:hover{color:var(--amarelo)}
.link--p{font-size:.875rem}
.btn:hover .ico-seta,.link:hover .ico-seta{transform:translateX(3px)}
.btn:hover .ico-ext,.link:hover .ico-ext{transform:translate(2px,-2px)}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo{position:sticky;top:0;z-index:50;background:var(--creme);transition:box-shadow .3s var(--ease)}
.topo.is-rolado{box-shadow:0 1px 0 var(--fio)}
.topo__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--topo)}

.marca{display:inline-flex;align-items:center;gap:.55rem;color:var(--marinho);text-decoration:none;--uj-u:var(--azul);--uj-f:var(--amarelo);--uj-j:var(--marinho)}
.marca__uj{width:54px;height:50px;flex:none}
.marca__nome{display:grid;gap:.4rem}
.marca__w{font-size:1.5rem;font-weight:900;font-stretch:96%;line-height:.78;letter-spacing:-.06em}
.marca__l{padding-left:.08em;font-size:.4375rem;font-weight:700;line-height:1;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.marca--claro{color:var(--branco);--uj-u:var(--branco);--uj-f:var(--branco);--uj-j:var(--branco)}
.uj-u{fill:var(--uj-u,#143DCF)}
.uj-f{fill:var(--uj-f,#FFD447)}
.uj-j{fill:var(--uj-j,#071D49)}

.menu{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--marinho);cursor:pointer}
.menu__barras{display:grid;gap:5px;width:22px}
.menu__barras span{display:block;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.menu[aria-expanded="true"] .menu__barras span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] .menu__barras span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .menu__barras span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav{
  position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--topo));
  display:flex;flex-direction:column;gap:2rem;
  padding:.5rem var(--calha) calc(2rem + env(safe-area-inset-bottom));
  background:var(--creme);border-top:1px solid var(--fio);overflow-y:auto;
  visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}
.nav.is-aberto{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.nav__lista a{
  display:flex;align-items:center;min-height:64px;border-bottom:1px solid var(--fio);
  font-size:1.75rem;font-weight:800;font-stretch:96%;letter-spacing:-.045em;color:var(--marinho);text-decoration:none;
}
.pilula{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;align-self:flex-start;
  min-height:44px;padding:0 1.25rem;border:1.5px solid var(--marinho);border-radius:999px;
  color:var(--marinho);font-size:.9375rem;font-weight:600;text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.pilula .ico{width:14px;height:14px}
.pilula:hover{background:var(--marinho);color:var(--branco)}

@media (min-width:64em){
  .marca__uj{width:70px;height:65px}
  .marca__w{font-size:2rem}
  .marca__l{font-size:.5625rem}
  .menu{display:none}
  .nav{
    position:static;height:auto;flex-direction:row;align-items:center;gap:2.25rem;
    padding:0;border:0;background:none;overflow:visible;
    visibility:visible;opacity:1;transform:none;transition:none;
  }
  .nav__lista{display:flex;gap:2.5rem}
  .nav__lista a{position:relative;min-height:44px;border:0;font-size:1.0625rem;font-weight:500;font-stretch:100%;letter-spacing:0}
  .nav__lista a::after{
    content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:var(--azul);
    transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);
  }
  .nav__lista a:hover::after,.nav__lista a.is-aqui::after,.nav__lista a[aria-current]::after{transform:scaleX(1);transform-origin:left}
  .pilula{min-height:52px;padding:0 1.625rem;font-size:1.0625rem}
}

/* =========================================================
   CAPA — azul de ponta a ponta, monograma cortado pela borda
   ========================================================= */
.capa{position:relative;overflow:hidden;background:var(--azul);color:var(--branco);isolation:isolate}
.capa__in{position:relative;display:flex;flex-direction:column;padding-top:clamp(2.25rem,7vw,4.5rem);padding-bottom:4.75rem}
.capa__txt{position:relative;z-index:2}
.capa .d1{color:var(--branco);font-size:clamp(2.55rem,12.2vw,4.5rem)}
.capa .l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;white-space:nowrap}
.capa .l > span{display:block}
.capa__lead{margin-top:.875rem;font-size:clamp(.8125rem,3.5vw,1.3125rem);line-height:1.45;color:rgba(255,255,255,.92);max-width:28em}
.capa__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;margin-top:1.75rem}
.capa__acoes .link{display:none}

/* celular (como no mockup): o UJ fica ao lado do botão, cortado pela borda e pela base,
   com o índice embaixo à esquerda; nada empurra a capa para baixo */
.capa__base{position:absolute;inset:0;pointer-events:none}
.capa__indice{
  position:absolute;left:var(--calha);bottom:1.5rem;z-index:2;display:flex;align-items:center;gap:.875rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.capa__indice::before{content:"";width:34px;height:1px;background:currentColor}
.capa__arte{position:absolute;right:0;bottom:0;z-index:1;height:clamp(150px,47vw,300px);aspect-ratio:1;transform:translate(13%,12%)}
.capa__svg{display:block;width:100%;height:100%;overflow:visible}
.capa__anel{fill:none;stroke:rgba(255,255,255,.75);stroke-width:.55}
.capa__u,.capa__j{fill:var(--amarelo)}

@media (min-width:40em){
  .capa__acoes .link{display:inline-flex}
  .capa__arte{height:clamp(220px,40vw,340px)}
}
@media (min-width:64em){
  .capa__in{min-height:clamp(460px,33.5vw,560px);padding-block:clamp(2.5rem,3vw,3.25rem);justify-content:center}
  .capa .olho{font-size:.8125rem;letter-spacing:.3em;margin-bottom:1.5rem}
  .capa__lead{font-size:clamp(1.25rem,1.65vw,1.5rem);margin-top:1rem}
  .capa__acoes{margin-top:1.75rem}
  .capa .btn{min-height:58px;padding:0 1.625rem 0 1.75rem;font-size:1.0625rem}
  .capa .link{font-size:1.0625rem}
  .capa__indice{font-size:.6875rem}
  .capa__indice::before{width:44px}
  .capa__txt{max-width:none}
  .capa .l{white-space:nowrap}
  .capa__indice{top:2.25rem;right:var(--calha);left:auto;bottom:auto}
  .capa .d1{font-size:clamp(2.55rem,8.2vw,7.5rem)}
  /* como na referência: o J ocupa a altura da capa, encosta na borda direita e na base */
  .capa__arte{width:auto;height:102%;transform:translate(4%,3.7%)}
}

/* entrada: o círculo se desenha, U sobe, J desce, o título sobe linha a linha */
@media (prefers-reduced-motion:no-preference){
  .js .capa__anel{stroke-dasharray:1;stroke-dashoffset:1;animation:uj-traco 1.8s var(--ease) .1s forwards}
  .js .capa__u{opacity:0;transform:translateY(10px);animation:uj-entra 1s var(--ease) .3s forwards}
  .js .capa__j{opacity:0;transform:translateY(-10px);animation:uj-entra 1s var(--ease) .45s forwards}
  .js .capa .l > span{transform:translateY(105%);animation:sobe .9s var(--ease) .05s forwards}
  .js .capa .l:nth-child(2) > span{animation-delay:.14s}
  .js .capa .olho,.js .capa__lead,.js .capa__acoes,.js .capa__indice{opacity:0;animation:aparece .8s var(--ease) .35s forwards}
}
@keyframes uj-traco{to{stroke-dashoffset:0}}
@keyframes uj-entra{to{opacity:1;transform:none}}
@keyframes sobe{to{transform:none}}
@keyframes aparece{to{opacity:1}}

/* ---------- faixa de identificação ---------- */
.ficha{display:none;border-bottom:1px solid var(--fio)}
.ficha__lista{display:grid}
.ficha__lista li{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:.5rem 0;
  font-size:.9375rem;color:var(--marinho);text-align:center;
}
.ficha__lista li + li{border-top:1px solid var(--fio)}
.ficha__lista a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.ficha__lista a:hover{color:var(--azul);text-decoration:underline;text-underline-offset:.3em}
@media (min-width:40em){
  .ficha{display:block}
  .ficha__lista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ficha__lista li{min-height:68px}
  .ficha__lista li + li{border-top:0}
  .ficha__lista li + li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--fio)}
}

/* =========================================================
   SEÇÕES — pouco texto por bloco; listas longas viram carrossel lateral
   ========================================================= */
.secao{padding-block:var(--secao);border-top:1px solid var(--fio)}
.ficha + .secao{border-top:0}
.cab{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.cab__txt .corpo{margin-top:.875rem}
.cab__acoes{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
@media (min-width:40em){
  .cab{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:2rem}
}

/* ---------- carrossel lateral ---------- */
.carrossel{position:relative}
.carrossel__trilho{
  display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:var(--gap);
  margin:0 calc(-1 * var(--calha));padding:0 var(--calha) .25rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--calha);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__trilho > li{scroll-snap-align:start;display:flex}
.carrossel__trilho:focus-visible{outline-offset:-2px}
@media (min-width:90em){ .carrossel__trilho:focus-visible{outline-offset:6px} }
@media (min-width:40em){ .carrossel__trilho{grid-auto-columns:calc((100% - 2 * var(--calha) - var(--gap)) / 2)} }
@media (min-width:64em){ .carrossel__trilho{grid-auto-columns:calc((100% - 2 * var(--calha) - 2 * var(--gap)) / 3)} }
@media (min-width:90em){ .carrossel__trilho{margin:0;padding:0 0 .25rem;scroll-padding-inline:0;grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)} }

.setas{display:flex;gap:.625rem}
.seta{
  display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--marinho);border:1.5px solid var(--marinho);
  transition:background-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease),transform .12s var(--ease);
}
.seta .ico{width:18px;height:18px}
.seta:hover:not(:disabled){background:var(--marinho);color:var(--branco)}
.seta:active:not(:disabled){transform:scale(.96)}
.seta:disabled{opacity:.3;cursor:default}
.tema-escuro .seta{color:var(--branco);border-color:rgba(255,255,255,.6)}
.tema-escuro .seta:hover:not(:disabled){background:var(--branco);color:var(--marinho);border-color:var(--branco)}
.carrossel__pos{font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.tema-escuro .carrossel__pos{color:rgba(255,255,255,.72)}

/* ---------- sobre ---------- */
.sobre__grade{display:grid;gap:2.5rem}
.sobre .d2{margin-bottom:1.25rem}
.sobre .link{margin-top:1rem}
.nota{display:flex;gap:.625rem;margin-top:1rem;font-size:.9375rem;line-height:1.55;color:var(--tinta-2);max-width:34em}
.nota::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--amarelo);box-shadow:inset 0 0 0 1.5px var(--marinho)}
.tema-escuro .nota{color:rgba(255,255,255,.82)}
.tema-escuro .nota::before{box-shadow:none}
.figura img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;background:var(--marinho)}
.figura figcaption{margin-top:.75rem;font-size:.8125rem;line-height:1.5;color:var(--tinta-2)}
.figura figcaption b{color:var(--marinho)}
.dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem var(--gap);margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.25rem;border-top:1px solid var(--fio)}
.dados dt{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2)}
.dados dd{margin-top:.35rem;font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--marinho);overflow-wrap:anywhere}
.dados a{color:var(--azul);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.dados > div:nth-child(2){grid-column:1 / -1;order:3}
@media (min-width:40em){
  .dados{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dados > div:nth-child(2){grid-column:auto;order:0}
}
@media (min-width:64em){
  .sobre__grade{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:center}
  .dados dd{font-size:1rem}
}

/* ---------- atividades: como na referência, número + título + seta ---------- */
.frentes{border-top:1px solid var(--fio)}
.frente{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr) 40px;column-gap:1rem;row-gap:.375rem;align-items:center;
  padding:1.25rem 0;border-bottom:1px solid var(--fio);color:var(--marinho);text-decoration:none;
}
.frente__n{grid-row:1 / span 2;font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums}
.frente__t{font-size:1.125rem;font-weight:500;line-height:1.3;letter-spacing:-.012em;transition:color .2s var(--ease)}
.frente__e{grid-column:2}
.frente__seta{
  grid-column:3;grid-row:1 / span 2;display:grid;place-items:center;width:40px;height:40px;
  border:1.5px solid var(--marinho);border-radius:50%;color:var(--marinho);
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .3s var(--ease);
}
.frente__seta .ico{width:16px;height:16px}
.frente:hover .frente__t{color:var(--azul)}
.frente:hover .frente__seta{background:var(--marinho);color:var(--branco);transform:translateX(3px)}
.estado{display:inline-flex;align-items:center;gap:.5rem;font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.estado--destaque{color:var(--marinho)}
.estado--destaque::before{background:var(--amarelo);box-shadow:inset 0 0 0 1.5px var(--marinho)}
@media (min-width:48em){
  .frente{grid-template-columns:3.5rem minmax(0,1fr) auto 40px;column-gap:var(--gap);padding:1.5rem 0}
  .frente__n,.frente__t,.frente__e,.frente__seta{grid-row:1}
  .frente__t{grid-column:2;font-size:1.25rem}
  .frente__e{grid-column:3}
  .frente__seta{grid-column:4}
}

/* faixa amarela: quebra a sequência de blocos creme entre Sobre e Histórico,
   repetindo o marinho sobre amarelo do cartão grande do logotipo na referência */
.atividades{background:var(--amarelo);border-top:0}
.atividades + .secao{border-top:0}
.atividades .olho,.atividades .d2,.atividades .link{color:var(--marinho)}
.atividades .link:hover{color:var(--marinho);text-decoration-thickness:2.5px}
.atividades :focus-visible{outline-color:var(--marinho)}
.atividades .frentes{border-top-color:rgba(7,29,73,.28)}
.atividades .frente{border-bottom-color:rgba(7,29,73,.28)}
.atividades .frente__n{color:var(--marinho)}
.atividades .frente:hover .frente__t{color:var(--marinho);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.atividades .frente:hover .frente__seta{background:var(--marinho);color:var(--amarelo)}
.atividades .estado{color:var(--marinho)}
.atividades .estado--destaque::before{background:var(--marinho);box-shadow:none}

/* ---------- histórico: cartões no carrossel ---------- */
.registro{
  display:flex;flex-direction:column;gap:.75rem;width:100%;padding:1.5rem;
  background:var(--branco);border:1px solid var(--fio);border-radius:var(--raio);
}
.registro__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.registro time{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--azul)}
.registro h3{font-size:1.3125rem;font-weight:800;font-stretch:96%;line-height:1.15;letter-spacing:-.03em;color:var(--marinho)}
.registro p{font-size:.9375rem;line-height:1.55;color:var(--tinta-2)}
.registro .link{margin-top:auto;align-self:flex-start;font-size:.875rem}
.tipo{
  display:inline-block;padding:.3rem .5rem;border-radius:2px;background:rgba(7,29,73,.07);
  font-size:.5625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);white-space:nowrap;
}

/* ---------- equipe: texto curto + ilustração das mãos ---------- */
.equipe__grade{display:grid;gap:2rem;align-items:center}
.equipe .d2{margin-bottom:1.25rem}
.equipe .link{margin-top:1rem}
.ilustra{position:relative;margin:0;overflow:hidden;border-radius:var(--raio);background:#011A4D}
.ilustra img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 78%}
.ilustra figcaption{
  position:absolute;left:.75rem;bottom:.75rem;padding:.3rem .5rem;border-radius:2px;background:rgba(1,26,77,.72);
  font-size:.5625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);
}
@media (min-width:64em){
  .equipe__grade{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(48px,6vw,96px)}
  .ilustra img{aspect-ratio:5/4}
}

/* =========================================================
   PROPOSTAS — marinho, separado do institucional
   ========================================================= */
.propostas{padding-block:var(--secao);background:var(--marinho);color:var(--branco)}
.propostas .d2{color:var(--branco)}
.propostas__nota{margin-top:1rem;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.8);max-width:40em}
.propostas__nota strong{color:var(--branco)}
.propostas__pdf{margin-top:1.25rem}

.eixo{width:100%}
.eixo__a{
  position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--raio);
  background:var(--marinho);color:var(--branco);text-decoration:none;
}
/* fio fino por cima da capa e do corpo: a capa tem o mesmo marinho do fundo */
.eixo__a::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.16);border-radius:inherit;transition:border-color .3s var(--ease);
}
.eixo__a:hover::after{border-color:rgba(255,255,255,.42)}
.eixo__capa{aspect-ratio:3/2;overflow:hidden;background:var(--marinho)}
.eixo__capa img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.eixo__a:hover .eixo__capa img{transform:scale(1.035)}
.eixo__corpo{display:flex;flex-direction:column;flex:1;gap:.625rem;padding:1.25rem 1.25rem 1.375rem}
.eixo__meta{display:flex;justify-content:space-between;gap:1rem;font-size:.5625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.eixo__t{margin-bottom:.75rem;font-size:1.5rem;font-weight:800;font-stretch:96%;line-height:1.05;letter-spacing:-.04em;color:var(--branco)}
.eixo__cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;
  min-height:50px;padding:.75rem 1.125rem .75rem 1.25rem;border-radius:var(--raio);
  background:var(--amarelo);color:var(--marinho);box-shadow:inset 0 -2px 0 rgba(7,29,73,.14);
  font-size:.9375rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;
  transition:background-color .2s var(--ease),transform .12s var(--ease);
}
.eixo__cta .ico{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.eixo__a:active .eixo__cta{transform:translateY(1px)}
.eixo__a:hover .eixo__cta{background:var(--amarelo-claro)}
.eixo__a:hover .eixo__cta .ico{transform:translateX(3px)}

/* ---------- contato: painel com a ilustração ao fundo ---------- */
.contato__painel{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:620px;padding:clamp(2rem,5vw,4rem) clamp(1.5rem,5vw,4rem);border-radius:var(--raio);
  background:#011A4D;color:var(--branco);
}
/* a ilustração ocupa só a parte de baixo (celular) ou a metade direita (desktop); o texto fica no marinho liso */
.contato__painel{min-height:clamp(640px,180vw,780px)}
.contato__painel > img{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%;height:52%;object-fit:cover;object-position:50% 100%}
.contato__painel .d2{color:var(--branco);margin-bottom:1rem}
.contato__painel .corpo{color:rgba(255,255,255,.86)}
.contato__painel .acoes{margin-top:1.5rem}
.contato__rot{
  position:absolute;right:.75rem;bottom:.75rem;padding:.3rem .5rem;border-radius:2px;background:rgba(1,26,77,.72);
  font-size:.5625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);
}
@media (min-width:64em){
  .contato__painel{min-height:520px;justify-content:center}
  .contato__painel > img{left:auto;top:0;width:50%;height:100%;object-position:50% 100%}
  .contato__txt{max-width:44%}
}

/* =========================================================
   TELA DE CARREGAMENTO — UJ se montando sobre o azul da capa
   ========================================================= */
.intro-tela{display:none}
html.intro{overflow:hidden}
.intro .intro-tela{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:var(--azul);color:var(--branco);
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
  animation:intro-some .4s var(--ease) 3s forwards;
}
.intro-tela--saindo{opacity:0;visibility:hidden}
.intro-tela__marca{display:flex;align-items:center;gap:clamp(.75rem,2.5vw,1.25rem)}
.intro-tela__uj{width:clamp(96px,26vw,148px);height:auto;overflow:visible}
.intro-tela__u,.intro-tela__f,.intro-tela__j{fill:var(--amarelo)}
.intro-tela__u{animation:intro-u .55s var(--ease) both}
.intro-tela__f{animation:intro-f .4s var(--ease) .25s both}
.intro-tela__j{animation:intro-j .55s var(--ease) .1s both}
.intro-tela__nome{display:grid;gap:.5rem;margin:0;animation:intro-nome .45s var(--ease) .3s both}
.intro-tela__w{font-size:clamp(2rem,7vw,3.25rem);font-weight:900;font-stretch:96%;line-height:.78;letter-spacing:-.06em}
.intro-tela__l{font-size:clamp(.5rem,1.6vw,.6875rem);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.intro-tela__barra{
  position:absolute;left:50%;bottom:clamp(2.5rem,8vh,4rem);width:min(160px,40vw);height:2px;
  transform:translateX(-50%);background:rgba(255,255,255,.25);overflow:hidden;
}
.intro-tela__barra::after{
  content:"";position:absolute;inset:0;background:var(--amarelo);
  transform-origin:left;animation:intro-barra 1.1s var(--ease) both;
}
/* a capa só anima depois que a tela sai; o script do head tira a classe em 3,4 s mesmo sem main.js */
html.intro .capa *{animation-play-state:paused!important}
html.intro .pular:focus{top:-200px}
@keyframes intro-u{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes intro-j{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
@keyframes intro-f{from{opacity:0;transform:scale(.6);transform-origin:160px 150px}to{opacity:1;transform:none}}
@keyframes intro-nome{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes intro-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-some{to{opacity:0;visibility:hidden}}

/* =========================================================
   RODAPÉ — marinho
   ========================================================= */
.rodape{background:var(--marinho);color:rgba(255,255,255,.8)}
.rodape__in{display:grid;gap:1.75rem;padding-block:2.5rem 2rem}
.rodape .marca__uj{width:52px;height:52px}
.rodape .marca__w{font-size:1.5625rem}
.rodape .marca__l{font-size:.5rem}
.rodape__acoes{display:grid;gap:1rem;justify-items:start}
.rodape__end{font-size:.8125rem;line-height:1.65;color:rgba(255,255,255,.84)}
.rodape__end a{display:inline-flex;min-height:44px;align-items:center;color:var(--branco);text-decoration:none}
.rodape__end a:hover{text-decoration:underline;text-underline-offset:.25em}
.rodape__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 2rem;padding-block:.75rem 1rem;font-size:.75rem;line-height:1.55;color:rgba(255,255,255,.68)}
.rodape__base::before{content:"";flex-basis:100%;height:1px;margin-bottom:.75rem;background:var(--fio-escuro)}
.rodape__links{display:flex;flex-wrap:wrap;gap:0 1.75rem}
.rodape__cima{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--branco);text-decoration:none}
.rodape__cima:hover{color:var(--amarelo)}
@media (min-width:48em){
  .rodape__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:2.75rem 2.25rem}
  .rodape__acoes{grid-auto-flow:column;align-items:center;gap:0}
  .rodape__acoes .link{margin-right:2.25rem;padding-right:2.25rem;border-right:1px solid var(--fio-escuro)}
}
@media (min-width:64em){
  .rodape .marca__uj{width:60px;height:60px}
  .rodape .marca__w{font-size:1.8125rem}
}

/* =========================================================
   PÁGINA DE EIXO (propostas/*.html)
   ========================================================= */
.pp-capa{padding-bottom:clamp(3rem,6vw,5rem);background:var(--marinho);color:var(--branco)}
.migalhas{padding-top:.75rem}
.migalhas ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:.625rem;font-size:.8125rem;color:rgba(255,255,255,.74)}
.migalhas li{display:inline-flex;align-items:center;gap:.625rem}
.migalhas li + li::before{content:"/";color:rgba(255,255,255,.4)}
.migalhas a{display:inline-flex;align-items:center;min-height:44px;color:var(--branco);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:.3em}
.migalhas a:hover{text-decoration-color:currentColor}
.pp-capa__grade{display:grid;gap:2.5rem;margin-top:clamp(1.25rem,3.5vw,2.75rem)}
.pp-capa__t{color:var(--branco);font-size:clamp(2.55rem,6.2vw,5.25rem)}
.pp-capa__lead{margin-top:1.25rem;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:rgba(255,255,255,.86);max-width:32em}
.pp-dados{display:flex;flex-wrap:wrap;gap:1.25rem 3rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--fio-escuro)}
.pp-dados dt{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pp-dados dd{margin-top:.4rem;font-size:1.875rem;font-weight:850;font-stretch:96%;line-height:1;letter-spacing:-.045em;color:var(--branco);font-variant-numeric:tabular-nums}
.pp-capa__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--raio);background:var(--marinho-2)}
@media (min-width:64em){
  .pp-capa__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,5vw,80px);align-items:center}
  .pp-capa__grade--sem-figura{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
}

.pp-aviso{background:var(--azul);color:var(--branco)}
.pp-aviso p{padding-block:1rem;font-size:.875rem;line-height:1.55;max-width:70em}
.pp-aviso strong{color:var(--amarelo);font-weight:700}

.pp-corpo{padding-block:clamp(3.5rem,7vw,6rem)}
.pp-corpo__grade{display:grid;gap:3.5rem}
@media (min-width:64em){
  .pp-corpo__grade{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .pp-lado__in{position:sticky;top:calc(var(--topo) + 2rem)}
}

.grupo + .grupo{margin-top:clamp(2.75rem,5vw,4rem)}
.grupo__cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.875rem;border-bottom:1.5px solid var(--marinho)}
.grupo__t{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:800;font-stretch:96%;line-height:1.1;letter-spacing:-.04em;color:var(--marinho)}
.grupo__n{font-size:.5625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);white-space:nowrap}
.item{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:.75rem;row-gap:.75rem;padding:1.25rem 0;border-bottom:1px solid var(--fio)}
.item__n{grid-row:1 / span 2;padding-top:.2rem;font-size:.8125rem;font-weight:500;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.item__t{font-size:1.0625rem;line-height:1.6;color:var(--marinho)}
.item__f{display:flex;flex-wrap:wrap;gap:.5rem}
.fonte{
  display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:0 .75rem;border-radius:999px;
  background:rgba(7,29,73,.07);color:var(--tinta-2);font-size:.75rem;font-weight:500;text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.fonte .ico{width:12px;height:12px}
.fonte:hover{background:var(--marinho);color:var(--branco)}
@media (min-width:40em){ .item{grid-template-columns:3rem minmax(0,1fr)} }

.pp-nota{display:grid;gap:.75rem;margin-top:2.5rem;padding:1.5rem;border-radius:var(--raio);background:var(--branco)}
.pp-nota .pp-nota__rot{font-size:.5625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--azul)}
.pp-nota p{font-size:.9375rem;line-height:1.6;color:var(--marinho)}

.pp-lado__in{display:grid;gap:1.25rem;align-content:start}
.pp-lado .olho{margin-bottom:0}
.fontes{border-top:1px solid var(--fio)}
.fontes a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:center;
  min-height:60px;padding:.75rem 0;border-bottom:1px solid var(--fio);color:var(--marinho);text-decoration:none;
}
.fontes__n{font-size:.9375rem;font-weight:600}
.fontes__d{grid-column:1;font-size:.8125rem;color:var(--tinta-2)}
.fontes .ico{grid-column:2;grid-row:1 / span 2;width:16px;height:16px;transition:transform .3s var(--ease)}
.fontes a:hover .fontes__n{color:var(--azul);text-decoration:underline;text-underline-offset:.25em}
.fontes a:hover .ico{transform:translate(2px,-2px)}
.pp-lado__nota{font-size:.8125rem;line-height:1.55;color:var(--tinta-2)}

.pp-nav{border-top:1px solid var(--fio)}
.pp-nav__grade{display:grid}
.pp-nav__a{display:grid;gap:.625rem;padding:2rem 0;color:var(--marinho);text-decoration:none}
.pp-nav__a + .pp-nav__a{border-top:1px solid var(--fio)}
.pp-nav__rot{display:inline-flex;align-items:center;gap:.5rem;font-size:.625rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-2)}
.pp-nav__rot .ico{width:14px;height:14px;transition:transform .3s var(--ease)}
.pp-nav__t{font-size:clamp(1.625rem,3.4vw,2.75rem);font-weight:850;font-stretch:96%;line-height:1;letter-spacing:-.05em;transition:color .2s var(--ease)}
.pp-nav__a:hover .pp-nav__t{color:var(--azul)}
.pp-nav__a:hover .ico-seta{transform:translateX(3px)}
@media (min-width:40em){
  .pp-nav__grade{grid-template-columns:1fr 1fr}
  .pp-nav__a{padding:3rem 0}
  .pp-nav__a + .pp-nav__a{border-top:0}
  .pp-nav__a--prox{justify-items:end;text-align:right;padding-left:var(--gap);border-left:1px solid var(--fio)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}