/* ============================================================================
   1 · TOKENS — manual-marca §3 §4 §5 · recon-design-system §1
   Nenhum HEX entra nesta página que não esteja neste bloco.
   ========================================================================== */
:root{
  color-scheme: only light;

  /* paleta-âncora (imutável) */
  --vc-azul:#1B2A5B; --vc-ouro:#B8923E; --vc-vermelho:#9E2B25; --vc-prata:#F4F1E9;
  --vc-pergaminho:#EFE7D2; --vc-verde:#1E3D2F; --vc-tinta:#26201A;

  /* derivados — só clareamento/escurecimento das âncoras, nenhuma matiz nova */
  --vc-azul-900:#131D40; --vc-azul-700:#2C3A66;
  --vc-ouro-luz:#C6A763; --vc-ouro-sombra:#8F7230; --vc-ouro-inscricao:#7A5E22;
  --vc-pergaminho-linha:#D7CFBC;
  --vc-verde-luz:#2C5744;

  /* alfas — mesmas cores, nunca cinza neutro */
  --vc-prata-88:rgba(244,241,233,.94);   /* nome historico: .88 -> .94, legibilidade sobre foto */
  --vc-prata-64:rgba(244,241,233,.64);
  --vc-prata-14:rgba(244,241,233,.14);
  --vc-tinta-72:rgba(38,32,26,.86);      /* nome historico: .72 -> .86, letra clara em fundo claro */
  --vc-tinta-14:rgba(38,32,26,.14);
  --vc-tinta-50:rgba(38,32,26,.50);
  --vc-tinta-05:rgba(38,32,26,.05);
  --vc-ouro-filete:rgba(184,146,62,.50);
  --vc-ouro-filete-fraco:rgba(184,146,62,.28);
  --vc-veu-azul:rgba(27,42,91,.72);
  --vc-vinheta:rgba(19,29,64,.55);

  /* papéis semânticos */
  --fg-escuro:var(--vc-prata); --fg-escuro-2:var(--vc-prata-88); --fg-escuro-3:var(--vc-prata-64);
  --fg-claro:var(--vc-tinta);  --fg-claro-2:var(--vc-tinta-72);
  --filete:var(--vc-ouro-filete);
  --filete-tinta:rgba(38,32,26,.18);
  --cta-bg:var(--vc-ouro); --cta-fg:var(--vc-tinta);
  --cta-bg-hover:var(--vc-ouro-luz); --cta-filete:var(--vc-ouro-sombra);
  --foco-sobre-escuro:var(--vc-ouro-luz);   /* 5,96:1 sobre azul */
  --foco-sobre-claro:var(--vc-azul);        /* 11,1:1 sobre pergaminho */
  --estado-erro:var(--vc-tinta);            /* NUNCA vermelho: o vermelho é da Cruz */
  --estado-ok:var(--vc-verde);

  /* tipografia */
  --ff-display:"Cinzel","Trajan Pro","Cormorant Garamond",Georgia,serif;
  --ff-corpo:"Cormorant Garamond",Garamond,"EB Garamond",Georgia,serif;
  --ff-micro:"IBM Plex Mono","SFMono-Regular",ui-monospace,monospace;

  --fs-hero:    clamp(2.75rem, 1.60rem + 5.10vw, 6.00rem);
  --fs-h1:      clamp(2.00rem, 1.35rem + 2.90vw, 3.25rem);
  --fs-h2:      clamp(1.50rem, 1.15rem + 1.55vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.10rem + 0.67vw, 1.50rem);
  --fs-citacao: clamp(1.50rem, 1.20rem + 1.33vw, 2.125rem);
  --fs-lead:    clamp(1.4375rem, 1.27rem + 0.74vw, 1.75rem);
  --fs-corpo:   clamp(1.25rem, 1.145rem + 0.47vw, 1.4375rem);
  --fs-small:   clamp(1.00rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-divisa:  clamp(0.875rem,0.82rem + 0.24vw, 1.00rem);
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.14vw, 0.875rem);
  --fs-micro:   clamp(0.6875rem,0.66rem + 0.12vw,0.8125rem);

  --lh-hero:1.02; --lh-titulo:1.14; --lh-citacao:1.32;
  --lh-lead:1.50; --lh-corpo:1.62; --lh-micro:1.35;

  --ls-hero:.045em; --ls-titulo:.055em; --ls-h3:.08em;
  --ls-divisa:.20em; --ls-eyebrow:.24em; --ls-micro:.18em;

  /* espaço, medida, grade */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:2.5rem; --s-6:3rem;  --s-7:3.5rem; --s-8:4rem; --s-12:6rem;  --s-16:8rem;
  --pad-secao:   clamp(4rem, 2.5rem + 6.5vw, 8.5rem);
  --pad-lateral: clamp(1.25rem, .6rem + 2.8vw, 3rem);
  --w-page:74rem; --w-texto:40rem; --w-estreito:30rem; --w-doc:38rem;
  --medida:58ch;                 /* com o corpo em 20–23px, 58ch rende ~68 caracteres: a mesma
                                    medida ótica que 64ch dava no corpo antigo, e a mesma largura de linha. */
  --raio:0;                      /* HERÁLDICA = CANTO VIVO. Não existe outro valor. */

  --filete-px:1px;
  --moldura-gap:.5rem;
  --moldura-inset:clamp(.75rem,.4rem + 1.4vw,1.5rem);

  --nav-h:4.5rem;
  --logo-nav-h:clamp(2.5rem,2.1rem + 1.7vw,3.25rem);   /* medido: o nome da marca saía a 4px */
  --logo-selo-rodape:clamp(5.5rem,4.4rem + 3.6vw,7.5rem);
  /* ── INTERRUPTOR ÚNICO DO BRASÃO DA FSSP ──────────────────────────────
     Um ponto só, e vale para index.html e en/index.html ao mesmo tempo.
       none   = desligado (o estado de hoje)
       block  = ligado
     Nenhum outro valor: valor inválido faz o display herdar do pai e o
     brasão acende sem querer. Só vá para `block` com a autorização por
     escrito da FSSP em mãos e registrada em NOTAS-DEPLOY.md.
     Ver a regra .rodape__fssp, no fim desta folha. */
  --fssp-brasao:none;
  --fssp-brasao-largura:clamp(2.5rem,2.2rem + 1vw,3.25rem);
  --logo-device-h:clamp(1.75rem,1.5rem + 1vw,2.5rem);
  --logo-simbolo-nav:1.6rem;

  --dur-rapida:140ms; --dur-media:320ms; --dur-marcha:900ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-marcha:linear;

  scrollbar-color: var(--vc-ouro-filete) var(--vc-azul-900);
  scrollbar-gutter: stable;
}

/* ============================================================================
   2 · RESET + BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }

/* O atributo hidden vale sobre qualquer display declarado depois. Sem isto, um
   .campo__erro com display:flex aparece vazio embaixo de todo campo do formulário. */
[hidden]{ display:none !important }
html{
  font-size:100%; -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--vc-azul-900);
}
body{
  margin:0;
  font-family:var(--ff-corpo); font-size:var(--fs-corpo);
  line-height:var(--lh-corpo); font-weight:600;   /* Cormorant 400 e fina demais em corpo de texto */
  background:var(--vc-pergaminho); color:var(--fg-claro);
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100% }
img,video{ height:auto }
h1,h2,h3,p,dl,dd,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }
:target{ scroll-margin-top: calc(var(--nav-h) + 1.5rem) }
::selection{ background:var(--vc-azul); color:var(--vc-prata) }
.s-azul ::selection,.s-azul-900 ::selection{ background:var(--vc-prata); color:var(--vc-azul) }
:root{ accent-color: var(--vc-azul) }

input,select,textarea,button{ font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit }

:focus-visible{ outline:2px solid var(--foco-sobre-claro); outline-offset:3px }
.s-azul :focus-visible,.s-azul-900 :focus-visible,.hero :focus-visible,.nav :focus-visible{
  outline-color:var(--foco-sobre-escuro);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.pular{
  position:absolute; inset-inline-start:1rem; inset-block-start:-6rem; z-index:120;
  background:var(--vc-pergaminho); color:var(--vc-tinta);
  font-family:var(--ff-micro); font-size:var(--fs-micro); letter-spacing:var(--ls-micro);
  text-transform:uppercase; text-decoration:none;
  padding:.9rem 1.2rem; border:1px solid var(--vc-tinta);
  transition:inset-block-start var(--dur-rapida) var(--ease);
}
.pular:focus{ inset-block-start:1rem }

/* ============================================================================
   3 · TIPOGRAFIA
   Cinzel desenha as minúsculas como versalete: os títulos ficam em caixa mista
   literal (capitular + versalete), sem text-transform. É o registro inscricional
   e preserva a capitalização exata da copy.
   ========================================================================== */
.t-hero{ font-family:var(--ff-display); font-weight:600; font-size:var(--fs-hero);
         line-height:var(--lh-hero); letter-spacing:var(--ls-hero); text-wrap:balance }
.t-h2{ font-family:var(--ff-display); font-weight:600; font-size:var(--fs-h2);
       line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); text-wrap:balance }
.t-h3{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h3);
       line-height:var(--lh-titulo); letter-spacing:var(--ls-h3); text-transform:uppercase }
.t-eyebrow{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-eyebrow);
            letter-spacing:var(--ls-eyebrow); text-transform:uppercase; line-height:1.5 }
.t-lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); max-inline-size:var(--w-texto) }
.t-corpo{ font-size:var(--fs-corpo); line-height:var(--lh-corpo); max-inline-size:var(--medida) }
.t-small{ font-size:var(--fs-small); line-height:1.5 }
/* o texto pequeno pesa um grau a mais que o corpo, senao some no pergaminho */
.t-small,.nota,.campo__apoio,.consente__texto,figcaption{ font-weight:700 }
.t-citacao{ font-size:var(--fs-citacao); line-height:var(--lh-citacao);
            font-style:italic; text-wrap:balance; hanging-punctuation:first }
.t-micro{ font-family:var(--ff-micro); font-weight:400; font-size:var(--fs-micro);
          letter-spacing:var(--ls-micro); line-height:var(--lh-micro); text-transform:uppercase }
.t-divisa{ font-family:var(--ff-display); font-weight:400; font-size:var(--fs-divisa);
           letter-spacing:var(--ls-divisa); line-height:1.4 }
/* O corpo subiu para 600. Todo IBM Plex Mono que nao declara peso herdaria isso:
   aqui ele volta a 400 e o microlabel fica exatamente como era. */
.pular,.a-definir,.hero__eyebrow,.faixa__num,.legenda,.rodape__blocos summary,
.banco__abrir,.banco__dados dt,.t-micro{ font-weight:400 }
p{ text-wrap:pretty }
.linha{ display:block }
.num{ font-variant-numeric:tabular-nums }

/* versalete determinístico */
.versalete{ font-variant-caps:small-caps }
@supports not (font-variant-caps:small-caps){
  .versalete{ text-transform:uppercase; font-size:.86em; letter-spacing:.2em }
}

/* [A DEFINIR] / [VERIFICAR] — metadado honesto, não buraco de layout */
.a-definir{
  /* tamanho absoluto: em .82em relativo, dentro de um .t-micro o marcador compunha
     e caía para 9px — a menor letra da página. Agora tem piso. */
  font-family:var(--ff-micro); font-size:max(var(--fs-micro), .82em); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--fg-claro-2); overflow-wrap:anywhere;
  border-block-end:1px solid var(--vc-pergaminho-linha); padding-block-end:.15em;
}
.s-azul .a-definir,.s-azul-900 .a-definir{
  color:var(--fg-escuro-3); border-block-end-color:var(--vc-prata-14);
}

/* capitular — UMA na página inteira (faixa "O nome") */
.capitular::first-letter{
  font-family:var(--ff-display); font-weight:600; font-size:3.4em; line-height:.86;
  float:inline-start; margin:.06em .12em 0 0; color:var(--vc-ouro-inscricao);
}

/* ============================================================================
   4 · SUPERFÍCIES E GRÃO
   Profundidade = campo chapado + filete de 1px + grão + vinheta. Nada além.
   ========================================================================== */
.s-pergaminho{
  background-color:var(--vc-pergaminho); color:var(--fg-claro);
  background-image:
    repeating-linear-gradient(0deg, rgba(38,32,26,.030) 0px, rgba(38,32,26,.030) 1px, transparent 1px, transparent 4px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='0.055'/></svg>");
  background-size:auto, 200px 200px;
}
.s-prata{
  background-color:var(--vc-prata); color:var(--fg-claro);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='0.045'/></svg>");
  background-size:200px 200px;
}
.s-azul{
  background-color:var(--vc-azul); color:var(--fg-escuro);
  background-image:repeating-linear-gradient(135deg,
    rgba(244,241,233,.022) 0px, rgba(244,241,233,.022) 1px, transparent 1px, transparent 5px);
}
.s-azul-900{
  background-color:var(--vc-azul-900); color:var(--fg-escuro-2);
  background-image:repeating-linear-gradient(135deg,
    rgba(244,241,233,.018) 0px, rgba(244,241,233,.018) 1px, transparent 1px, transparent 5px);
}
.s-azul a:not(.btn),.s-azul-900 a:not(.btn){ color:var(--vc-prata) }

/* ============================================================================
   5 · ORNAMENTO — repertório fechado
   filete · moldura dupla · cruzeta de canto · losango · numeral · Device
   ========================================================================== */
.filete{ block-size:1px; background:var(--filete); border:0 }
.filete--curto{ inline-size:6rem }

.divisor{ display:flex; align-items:center; justify-content:center; gap:1rem }
.divisor::before,.divisor::after{ content:""; block-size:1px; flex:0 1 6rem; background:var(--filete) }
.divisor--tinta > i{ background:var(--vc-tinta) }
.divisor > i{ inline-size:6px; block-size:6px; background:var(--vc-ouro); rotate:45deg; display:block }

/* moldura dupla + cruzeta nos quatro cantos.
   A cruzeta é marca tipográfica de registro, NÃO a Cruz da Ordem de Cristo. */
.moldura{ position:relative; border:var(--filete-px) solid var(--filete) }
.moldura::after{
  content:""; position:absolute; inset:var(--moldura-gap); pointer-events:none;
  border:var(--filete-px) solid var(--vc-ouro-filete-fraco);
}
.cantos{ position:absolute; inset:0; pointer-events:none }
.cantos::before,.cantos::after{
  content:""; position:absolute; inline-size:11px; block-size:11px;
  background:
    linear-gradient(var(--filete) 0 0) center/100% 1px no-repeat,
    linear-gradient(var(--filete) 0 0) center/1px 100% no-repeat;
}
.cantos--a::before{ inset-block-start:-5px; inset-inline-start:-5px }
.cantos--a::after { inset-block-end:-5px;  inset-inline-end:-5px }
.cantos--b::before{ inset-block-start:-5px; inset-inline-end:-5px }
.cantos--b::after { inset-block-end:-5px;  inset-inline-start:-5px }

/* régua de rota: o Device caminha sobre o filete, da esquerda para a direita */
.rota{ position:relative; block-size:var(--logo-device-h); margin-block:var(--s-6) var(--s-4) }
.rota::before{
  content:""; position:absolute; inset-inline:0; inset-block-end:6px;
  block-size:1px; background:var(--filete);
}
.rota__trilho{
  position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:calc(100% - var(--logo-device-h));
}
.rota__device{
  position:absolute; inset-block:0; inset-inline-start:0;
  block-size:100%; inline-size:auto;
}

/* leaders pontilhados — parada dura, não degradê */
.leader{
  flex:1 1 1.5rem; align-self:end; block-size:1px; min-inline-size:1.5rem;
  background:repeating-linear-gradient(90deg,
    var(--vc-pergaminho-linha) 0 1px, transparent 1px 5px);
  margin-block-end:.42em;
}
.s-azul .leader{ background:repeating-linear-gradient(90deg, var(--vc-prata-14) 0 1px, transparent 1px 5px) }

/* botões — sem sombra, sem bisel, sem raio */
.btn{
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  padding:1.05rem 2.2rem; border:1px solid transparent; border-radius:var(--raio); position:relative;
  background:var(--cta-bg); color:var(--cta-fg); min-block-size:3rem;
  transition:background-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease),
             border-color var(--dur-rapida) var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid var(--cta-filete); opacity:.55;
}
.btn:hover{ background:var(--cta-bg-hover) }
.btn[disabled]{ opacity:.55; cursor:not-allowed }

.btn--fantasma{ background:transparent; color:var(--vc-prata); border:1px solid var(--vc-prata-64) }
.btn--fantasma::after{ display:none }
.btn--fantasma:hover{ background:transparent; color:var(--vc-ouro-luz); border-color:var(--vc-ouro-luz) }

.btn--ouro-filete{ background:transparent; color:var(--vc-prata); border:1px solid var(--vc-ouro) }
.btn--ouro-filete::after{ display:none }
.btn--ouro-filete:hover{ color:var(--vc-ouro-luz); border-color:var(--vc-ouro-luz) }

.btn--verde{ background:var(--vc-verde); color:var(--vc-prata) }
.btn--verde::after{ border-color:var(--vc-verde-luz) }
.btn--verde:hover{ background:var(--vc-verde-luz) }

.btn--tinta{ background:transparent; color:var(--vc-tinta); border:1px solid var(--vc-tinta) }
.btn--tinta::after{ display:none }
.btn--tinta:hover{ background:var(--vc-tinta); color:var(--vc-pergaminho) }

/* link de texto com sublinhado que se desenha */
.link{
  position:relative; text-decoration:none; display:inline-block;
  padding-block-end:2px;
}
.link::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:1px;
  background:currentColor; opacity:.4;
  transform:scaleX(1); transform-origin:left center;
}
.js .link::after{ transform:scaleX(1); opacity:.32; transition:transform 240ms var(--ease), opacity 240ms var(--ease) }
.js .link:hover::after,.js .link:focus-visible::after{ transform:scaleX(1); opacity:.9 }

.acao{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3) }
/* empilhados, dois botões de larguras diferentes leem como descuido, não como hierarquia */
@media (max-width:30em){
  .hero__acoes{ display:grid; gap:var(--s-2) }
  .hero__acoes .btn{ inline-size:100% }
}

/* ============================================================================
   6 · NAV FIXA + FILETE DE PROGRESSO
   ========================================================================== */
.progresso{ /* infraestrutura, nao acento: ouro em opacidade cheia contaria como acento em toda secao */
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:70;
  inline-size:100%; block-size:1px; background:var(--vc-ouro);
  transform:scaleX(0); transform-origin:left center;
}
html:not(.js) .progresso{ display:none }

.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  block-size:var(--nav-h);
  padding-inline:var(--pad-lateral);
  background:transparent;
  border-block-end:1px solid transparent;
  transition:background-color var(--dur-rapida) var(--ease),
             border-color var(--dur-rapida) var(--ease),
             translate var(--dur-media) var(--ease);
}
.nav.is-rolada{ background:var(--vc-azul); border-block-end-color:var(--filete) }
.nav.is-recolhida{ translate:0 -100% }
/* a barra e full-bleed (fundo e filete atravessam a tela), mas o CONTEUDO dela
   compartilha a medida de 74rem do resto da pagina — sem isto o logo encosta na
   borda da viewport e nada da nav alinha com a coluna de texto abaixo. */
.nav__wrap{
  inline-size:100%; max-inline-size:calc(var(--w-page) + 6rem); margin-inline:auto;
  block-size:100%; display:flex; align-items:center; gap:var(--s-3);
}
.nav__marca{ flex:none; display:inline-flex; align-items:center; padding:calc(var(--logo-nav-h) * .14) }
.nav__lockup{ block-size:var(--logo-nav-h); inline-size:auto; flex:none }
.nav__simbolo{ display:none; flex:none; color:var(--vc-prata) }
.nav__simbolo svg{ block-size:var(--logo-simbolo-nav); inline-size:var(--logo-simbolo-nav) }
.nav__itens{ display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(.7rem,1.1vw,1.1rem); margin-inline-start:auto }
.nav__item{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-eyebrow);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--vc-prata-88); white-space:nowrap;
  display:inline-flex; align-items:center; min-block-size:2.75rem;
  transition:color var(--dur-rapida) var(--ease);
}
.nav__item:hover{ color:var(--vc-ouro-luz) }
.nav__cta{ flex:none; white-space:nowrap; padding:.85rem 1.4rem; min-block-size:2.75rem; margin-inline-start:var(--s-2) }

/* ── ÍNDICE (os três traços) ───────────────────────────────────────────────
   Pedido do organizador. Sem JS o painel fica aberto e o botão some: a lista
   vira índice comum e ninguém fica sem navegação. */
.nav__indice-btn{
  flex:none; margin-inline-start:var(--s-3);
  inline-size:2.75rem; block-size:2.75rem; padding:0;
  background:transparent; border:1px solid var(--vc-prata-64); color:var(--vc-prata);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
html:not(.js) .nav__indice-btn{ display:none }
.nav__indice-btn:hover{ border-color:var(--vc-ouro-luz); color:var(--vc-ouro-luz) }
.nav__tracos, .nav__tracos::before, .nav__tracos::after{
  display:block; inline-size:1.1rem; block-size:1px; background:currentColor;
}
.nav__tracos{ position:relative }
.nav__tracos::before,.nav__tracos::after{ content:""; position:absolute; inset-inline-start:0 }
.nav__tracos::before{ inset-block-start:-.34rem }
.nav__tracos::after{ inset-block-start:.34rem }

.indice{
  position:absolute; inset-block-start:var(--nav-h); inset-inline-start:0; inline-size:100%;
  background:var(--vc-azul-900); border-block-end:1px solid var(--filete);
  padding:var(--s-4) var(--pad-lateral) var(--s-5);
}
/* Sem JS a barra deixa de ser fixa e vira um cabeçalho comum: o índice desce
   como lista, embaixo dela, e a página continua navegável sem uma linha de script. */
html:not(.js) .nav{ position:static; block-size:auto; background:var(--vc-azul-900) }
html:not(.js) .nav__wrap{ flex-wrap:wrap; block-size:auto; padding-block:var(--s-3) }
html:not(.js) .indice{ position:static; inline-size:100%; padding-inline:0;
  border-block-start:1px solid var(--filete); margin-block-start:var(--s-3) }
html:not(.js) .indice[hidden]{ display:block !important }
.indice__titulo{ color:var(--vc-prata-64); margin:0 0 var(--s-3) }
.indice__lista{
  list-style:none; margin:0; padding:0; max-inline-size:var(--w-page); margin-inline:auto;
  display:grid; gap:.25rem var(--s-6); grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.indice__item{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-eyebrow);
  letter-spacing:.20em; text-transform:uppercase; text-decoration:none;
  color:var(--vc-prata-88); display:flex; align-items:center; min-block-size:2.75rem;
}
.indice__item:hover{ color:var(--vc-ouro-luz) }
/* com o índice aberto no topo, a barra transparente deixava uma faixa clara colada
   no painel escuro: enquanto o painel está aberto, a barra assume o fundo sólido. */
.nav:has(.indice:not([hidden])){ background:var(--vc-azul-900) }
.nav:not(.is-rolada) .nav__cta{
  background:transparent; color:var(--vc-prata); border:1px solid var(--vc-prata-64);
}
.nav:not(.is-rolada) .nav__cta::after{ display:none }
.nav:not(.is-rolada) .nav__cta:hover{ color:var(--vc-ouro-luz); border-color:var(--vc-ouro-luz) }

/* medido: os cinco links + índice + CTA pedem 1175px de linha, e a barra nunca
   teve tanto — a 1280 o CTA saía 97px pela direita, cortado no meio do rótulo.
   Eles só aparecem a partir de 1344px, onde sobram 60px. Abaixo disso quem
   navega é o índice dos três traços, que existe justamente para isso. */
@media (max-width:83.99em){
  .nav__itens .nav__item{ display:none }
}
@media (max-width:56.24em){
  .nav__marca{ display:none }
  .nav__simbolo{ display:inline-flex; align-items:center; padding:.5rem }
  .nav__itens{ margin-inline-start:auto; min-inline-size:0 }
  /* medido a 390px: índice + selo + CTA somavam mais que a linha, e o CTA — que é o
     botão principal da página inteira — saía pela direita, sem rolagem possível.
     Aperta o passo e o respiro do rótulo, nunca o alvo de toque (min 2,75rem). */
  .nav__cta{ margin-inline-start:0; padding:.85rem .8rem; letter-spacing:.08em; min-inline-size:0 }
}
@media (max-width:23.5em){
  /* abaixo de ~376px nem isso cabe: o rótulo encolhe para uma palavra */
  .nav__cta{ font-size:var(--fs-micro); padding:.85rem .6rem; letter-spacing:.06em }
}


/* ============================================================================
   7 · HERO
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:clip;
  background-color:var(--vc-azul-900); color:var(--fg-escuro);
  min-block-size:44rem; min-block-size:min(92svh,54rem);
  display:flex; align-items:stretch;
  padding-block:calc(var(--nav-h) + var(--s-6)) var(--s-8);
  padding-inline:var(--pad-lateral);
}
/* O filme abre com fade-in a partir do preto (a contraparte do fade-out que fecha
   o loop). Se o poster claro ficasse pintado ate o play, o visitante veria
   claro -> preto -> cena. Entao no caminho desktop o poster sai, o hero mostra o
   proprio Azul-900, e o video so e revelado depois que o fade-in dele terminou. */
.hero__video{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:-4 }
/* no celular o filme nao toca: o que fica e o poster, e este recorte
   mantem a cruz no meio da tela estreita */
@media (max-width:56.24em){ .hero__video{ object-position:64% 50% } }
.hero::before{ content:""; position:absolute; inset:0; z-index:-3; background:var(--vc-veu-azul) }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(122% 92% at 50% 36%, transparent 44%, var(--vc-vinheta) 100%);
}
.hero__grao{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='0.06'/></svg>");
}
.hero__moldura{
  /* o filete começa ABAIXO da barra. Com inset igual nos quatro lados, a linha de cima
     passava no meio do menu e do logo — parecia um corte, e era. */
  position:absolute; z-index:0; pointer-events:none;
  inset-block-start:calc(var(--nav-h) + var(--moldura-inset));
  inset-block-end:var(--moldura-inset);
  inset-inline:var(--moldura-inset);
  border:1px solid var(--vc-ouro-filete);
}
.hero__conteudo{
  position:relative; z-index:1;
  inline-size:100%; max-inline-size:var(--w-page); margin-inline:auto;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__eyebrow{
  font-family:var(--ff-micro); font-size:var(--fs-eyebrow); letter-spacing:.24em;
  text-transform:uppercase; color:var(--vc-prata-88); line-height:1.6;
  margin-block-end:var(--s-3);
}
.hero__titulo{ color:var(--vc-prata); margin-block-end:var(--s-3) }
.hero__filete{ inline-size:6rem; block-size:1px; background:var(--vc-ouro-filete); margin-block-end:var(--s-3) }
.hero__lead{ color:var(--vc-prata-88); margin-block-end:var(--s-4) }
.hero__micro{ color:var(--vc-prata-88); max-inline-size:38rem; margin-block-start:var(--s-3) }
.hero__segunda{ margin-block-start:var(--s-2); color:var(--vc-prata-64) }
.hero__credencial{
  margin-block-start:var(--s-6); color:var(--vc-prata-64);
  padding-block-start:var(--s-2); border-block-start:1px solid var(--vc-prata-14);
  max-inline-size:32rem;
}
@media (min-width:56.25em){
  .hero__conteudo{ justify-content:center }
  .hero__eyebrow,.hero__titulo,.hero__filete,.hero__lead,.hero__acoes,
  .hero__micro,.hero__segunda{ max-inline-size:min(100%,46rem) }
}

/* ============================================================================
   8 · FAIXAS — a página é um documento: margem numerada, medida curta, filetes
   ========================================================================== */
.faixa{
  padding-block:var(--pad-secao);
  padding-inline:var(--pad-lateral);
  border-block-start:1px solid var(--filete);
}
.wrap{ inline-size:100%; max-inline-size:var(--w-page); margin-inline:auto }

.faixa__marca{ margin-block-end:var(--s-4) }
.faixa__num{
  display:block; font-family:var(--ff-micro); font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro); font-variant-numeric:tabular-nums;
  color:var(--fg-claro-2); margin-block-end:.6rem;
}
.s-azul .faixa__num,.s-azul-900 .faixa__num{ color:var(--fg-escuro-3) }
.faixa__eyebrow{ display:block }
.faixa__titulo{ margin-block-end:var(--s-3) }
.faixa__lead{ margin-block-end:var(--s-4) }
/* descendente, nao filho direto: sem isto, todo paragrafo dentro de .bloco,
   .colunas, .duo ou de um cartao nascia colado no anterior. */
.faixa__corpo p + p{ margin-block-start:1.15em }
:is(.bloco,.cartoes,.nota,.tira) + .bloco{ margin-block-start:var(--s-8) }
/* duas faixas nasciam 15px mais apertadas que as outras seis, no mesmo ponto da estrutura */
.faixa__titulo + .bloco,.faixa__titulo + .duo,.faixa__titulo + .cartoes{ margin-block-start:var(--s-5) }

@media (min-width:56.25em){
  .faixa__grade{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2.5rem) }
  .faixa__marca{
    grid-column:1 / 4; position:sticky; inset-block-start:calc(var(--nav-h) + 3rem);
    align-self:start; margin-block-end:0;
    border-inline-start:1px solid var(--filete); padding-inline-start:1rem;
  }
  .faixa__corpo{ grid-column:4 / 12 }
}

/* acentos de eyebrow por superfície */
.eyebrow-ouro{ color:var(--vc-ouro-inscricao) }
.s-azul .eyebrow-ouro,.s-azul-900 .eyebrow-ouro{ color:var(--vc-ouro) }
.eyebrow-neutro{ color:var(--fg-claro-2) }
.s-azul .eyebrow-neutro{ color:var(--vc-prata-64) }

/* bloco-documento (moldura dupla + cruzetas): "O nome" e a credencial */
.doc{ position:relative; padding:clamp(1.5rem,3.5vw,3rem) }

/* duas colunas com filete vertical, sem card e sem fundo */
.colunas{ display:grid; gap:var(--s-4) }
@media (min-width:48em){
  .colunas--2{ grid-template-columns:1fr 1fr; gap:var(--s-6) }
  .colunas--3{ grid-template-columns:repeat(3,1fr); gap:var(--s-6) }
  .colunas > * + *{ border-inline-start:1px solid var(--filete); padding-inline-start:var(--s-4) }
}
@media (max-width:47.99em){
  .colunas > * + *{ border-block-start:1px solid var(--filete); padding-block-start:var(--s-4) }
}

/* rótulo em Plex Mono acima de bloco de leitura */
.rotulo{ display:block; color:var(--fg-claro-2); margin-block-end:.55rem }
.s-azul .rotulo,.s-azul-900 .rotulo{ color:var(--vc-prata-64) }

/* nota colada: bloco menor com filete */
.nota{
  border-inline-start:1px solid var(--vc-tinta-14);
  padding-inline-start:var(--s-2); margin-block-start:var(--s-4);
  max-inline-size:var(--medida);
}
.s-azul .nota,.s-azul-900 .nota{ border-inline-start-color:var(--vc-prata-14) }
.nota .rotulo{ display:inline; margin-inline-end:.5rem }

/* fichário / lista de definição com régua entre as linhas */
.fichario{ margin-block:var(--s-4) 0; max-inline-size:46rem }
.fichario__linha{
  display:grid; gap:.25rem 1.5rem; padding-block:.9rem;
  border-block-start:1px solid var(--vc-tinta-14);
}
.fichario__linha:last-child{ border-block-end:1px solid var(--vc-tinta-14) }
.s-azul .fichario__linha{ border-block-start-color:var(--vc-prata-14) }
.s-azul .fichario__linha:last-child{ border-block-end-color:var(--vc-prata-14) }
.fichario dt{ color:var(--fg-claro-2) }
.s-azul .fichario dt{ color:var(--vc-prata-64) }
.fichario dd{ margin:0; font-size:var(--fs-corpo) }
@media (min-width:40em){
  .fichario__linha{ grid-template-columns:14rem 1fr; align-items:baseline }
}


/* pendências com leaders */
.pendencias{ display:grid; gap:0; margin-block-start:var(--s-4); max-inline-size:52rem }
@media (min-width:48em){ .pendencias{ grid-template-columns:1fr 1fr; column-gap:var(--s-6) } }
.pendencia{
  display:flex; align-items:baseline; gap:.6rem;
  padding-block:.9rem; border-block-start:1px solid var(--vc-tinta-14);
}
.s-azul .pendencia,
.s-azul-900 .pendencia,
.rodape .pendencia{ border-block-start-color:var(--vc-prata-14) }   /* o filete de tinta some no azul do rodapé */
.pendencia__rot{ color:var(--fg-claro-2); flex:none }
.s-azul .pendencia__rot,
.s-azul-900 .pendencia__rot,
.rodape .pendencia__rot{ color:var(--vc-prata-64) }
.pendencia__val{ flex:1 1 auto; min-inline-size:0 }

/* acordeão do compromisso — <details> nativo */
.acordeao{ margin-block-start:var(--s-4); max-inline-size:52rem }
.acordeao details{ border-block-start:1px solid var(--vc-prata-14) }
.acordeao details:last-of-type{ border-block-end:1px solid var(--vc-prata-14) }
.acordeao summary{
  list-style:none; cursor:pointer; padding-block:1.15rem; min-block-size:3rem;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h3);
  letter-spacing:var(--ls-h3); text-transform:uppercase; color:var(--vc-prata);
}
.acordeao summary::-webkit-details-marker{ display:none }
.acordeao summary:hover{ color:var(--vc-ouro-luz) }
.acordeao__texto{ padding-block:0 1.4rem; max-inline-size:var(--medida); color:var(--vc-prata-88) }
.cruzeta{ inline-size:11px; block-size:11px; flex:none; position:relative }
.acordeao summary .cruzeta{ margin-block-start:.42em } /* alinha com a primeira linha, não com o centro do bloco */
.cruzeta::before,.cruzeta::after{ content:""; position:absolute; background:var(--vc-ouro-filete) }
.cruzeta::before{ inset-block-start:5px; inset-inline:0; block-size:1px }
.cruzeta::after{ inset-inline-start:5px; inset-block:0; inline-size:1px }
.js .cruzeta::after{ transition:scale var(--dur-rapida) var(--ease) }
details[open] .cruzeta::after{ scale:1 0 }
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size: allow-keywords }
  .js details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size var(--dur-media) var(--ease), content-visibility var(--dur-media) allow-discrete;
  }
  .js details[open]::details-content{ block-size:auto }
}

/* ============================================================================
   9 · FORMULÁRIO — é uma credencial de peregrino, não um checkout.
   Os campos são RÉGUAS de documento, não caixas de aplicativo.
   ========================================================================== */
.credencial{ max-inline-size:var(--w-doc); margin-inline:auto }
.credencial__cabeca{ text-align:center; margin-block-end:var(--s-6) }
.credencial__cabeca .faixa__num{ margin-block-end:.6rem }
.credencial__titulo{ margin-block:.75rem var(--s-3) }
.credencial__intro{ text-align:start; margin-block-start:var(--s-4) }
.credencial__intro p + p{ margin-block-start:1em }

.campo{ display:block; margin-block-end:var(--s-4) }
.campo__label{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  color:var(--fg-claro-2); margin-block-end:.5rem;
}
.campo__opcional{ color:var(--fg-claro-2); opacity:.8; text-transform:uppercase }
.campo input[type=text],.campo input[type=email],.campo input[type=tel],
.campo input[type=number],.campo select,.campo textarea{
  inline-size:100%; display:block;
  font-family:var(--ff-corpo); font-size:var(--fs-corpo); color:var(--fg-claro);
  background:var(--vc-tinta-05);
  border:0; border-block-end:2px solid var(--vc-tinta-50);
  border-radius:var(--raio);
  padding:.8rem .85rem; min-block-size:3rem;
  transition:border-color var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease);
}
.campo textarea{ min-block-size:7.5rem; resize:vertical; line-height:var(--lh-corpo) }
.campo select{ cursor:pointer }
.campo :is(input,select,textarea):hover{ background:rgba(38,32,26,.075) }
.campo :is(input,select,textarea):focus-visible{
  border-block-end-color:var(--vc-ouro); outline:2px solid var(--foco-sobre-claro); outline-offset:2px;
}
.campo[data-estado="ok"] :is(input,select,textarea){ border-block-end-color:var(--estado-ok) }
.campo[data-estado="erro"] :is(input,select,textarea){ border-block-end-color:var(--estado-erro) }
::placeholder{ color:var(--fg-claro-2); font-style:italic; opacity:1 }

.campo__apoio{ margin-block-start:.5rem; color:var(--fg-claro-2); font-style:italic }
.campo__erro{
  margin-block-start:.6rem; padding:.65rem .8rem;
  background:var(--vc-pergaminho-linha); color:var(--estado-erro); font-weight:700;
  border-inline-start:3px solid var(--estado-erro);
  display:flex; align-items:flex-start; gap:.55rem; font-style:normal;
  font-size:var(--fs-small); line-height:1.45;
}
.campo__erro svg{ flex:none; margin-block-start:.18em }

.par{ display:grid; gap:var(--s-3) }
@media (min-width:40em){
  .par--cidade{ grid-template-columns:1fr 7.5rem }
  /* fora do Brasil a segunda coluna deixa de ser a sigla de duas letras e passa a
     ser "estado ou província" escrito por extenso: 7,5rem estrangularia o campo. */
  .par--cidade:has(#bloco-uf[hidden]){ grid-template-columns:1fr 12rem }
}

fieldset{ border:0; margin:0 0 var(--s-4); padding:0; min-inline-size:0 }
legend{ display:block; padding:0; color:var(--fg-claro-2); margin-block-end:.7rem }
.legenda{ font-family:var(--ff-micro); font-size:var(--fs-micro);
          letter-spacing:var(--ls-micro); text-transform:uppercase }

/* opções de participação — blocos com filete, marcador em losango */
.opcoes{ border-block-start:1px solid var(--vc-tinta-14) }
/* variante em linha, para respostas curtas (estado de vida): vira grade em vez de lista */
.opcoes--linha{ display:flex; flex-wrap:wrap; gap:0 var(--s-4) }
.opcoes--linha .opcao--curta{ flex:0 1 auto; padding-inline-end:0; border-block-end:0 }
.opcoes--linha{ border-block-end:1px solid var(--vc-tinta-14) }
@media (max-width:34em){ .opcoes--linha{ display:block } }
.opcao{
  display:flex; align-items:flex-start; gap:.85rem; cursor:pointer;
  padding-block:1rem; padding-inline:.25rem; min-block-size:3rem;
  border-block-end:1px solid var(--vc-tinta-14);
  border-inline-start:3px solid transparent;
  transition:background-color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.opcao:hover{ background:var(--vc-tinta-05) }
.opcao__radio{
  appearance:none; -webkit-appearance:none; margin:.42em 0 0; flex:none;
  inline-size:11px; block-size:11px; rotate:45deg;
  border:1px solid var(--fg-claro-2); background:transparent; cursor:pointer;
}
.opcao__radio:checked{ background:var(--vc-tinta); border-color:var(--vc-tinta) }
.opcao__radio:focus-visible{ outline:2px solid var(--foco-sobre-claro); outline-offset:4px }
.opcao__texto{ font-size:var(--fs-corpo); line-height:1.45 }
.opcao:has(.opcao__radio:checked){ border-inline-start-color:var(--vc-tinta); background:var(--vc-tinta-05) }

/* faixa etária — controle segmentado de um toque */
.segmentado{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:1px; background:var(--vc-tinta-14); border:1px solid var(--vc-tinta-14);
}
.seg{ position:relative; display:block; cursor:pointer }
.seg > span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-block-size:3rem; padding:.7rem .5rem; background:var(--vc-prata);
  font-size:var(--fs-small); line-height:1.3;
  border-block-end:2px solid transparent;
  transition:background-color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.seg:hover > span{ background:var(--vc-pergaminho) }
.seg > input:checked + span{
  background:var(--vc-pergaminho); border-block-end-color:var(--vc-tinta); font-weight:700;
}
.seg > input:focus-visible + span{ outline:2px solid var(--foco-sobre-claro); outline-offset:-3px }

/* blocos condicionais */
.condicional{ margin-block:var(--s-3) var(--s-4) }
.bloqueio{
  padding:1.1rem 1.25rem; background:var(--vc-pergaminho);
  border:1px solid var(--vc-tinta-14); border-inline-start:3px solid var(--vc-tinta);
  max-inline-size:var(--medida);
}
.subcampos{
  padding:1.25rem; border:1px solid var(--vc-tinta-14);
  background:var(--vc-pergaminho);
}
.subcampos > p{ margin-block-end:var(--s-3) }
.subcampos .campo:last-child{ margin-block-end:0 }

/* consentimentos — bloco destacado com filete de ouro nos quatro lados */
.consentimentos{
  margin-block:var(--s-6) var(--s-6); padding:clamp(1.1rem,3vw,1.75rem);
  border:1px solid var(--filete);
}
.consente{ display:flex; align-items:flex-start; gap:.9rem; cursor:pointer }
.consente + .consente{ margin-block-start:var(--s-4) }
/* todo bloco do formulário respira igual: o fieldset que vinha depois do par
   Cidade/Estado nascia com 0px e a legenda colava no filete do campo de cima. */
.par + fieldset,.campo + fieldset,.par--cidade + fieldset{ margin-block-start:var(--s-4) }
.consente__box{
  appearance:none; -webkit-appearance:none; margin:.28em 0 0; flex:none;
  inline-size:15px; block-size:15px; border:1px solid var(--fg-claro-2);
  background:transparent; cursor:pointer; border-radius:var(--raio);
}
.consente__box:checked{
  background-color:var(--vc-tinta); border-color:var(--vc-tinta);
  background-image:linear-gradient(var(--vc-prata) 0 0), linear-gradient(var(--vc-prata) 0 0);
  background-size:58% 1px, 1px 58%; background-position:center; background-repeat:no-repeat;
}
.consente__box:focus-visible{ outline:2px solid var(--foco-sobre-claro); outline-offset:3px }
.consente__texto{ font-size:var(--fs-small); line-height:1.5 }
.consentimentos .campo__erro{ margin-inline-start:0 }
.aviso-lgpd{ margin-block-start:var(--s-3); color:var(--fg-claro-2); font-style:italic }

/* honeypot */
.hp{ position:absolute; inset-inline-start:-9999px; inline-size:1px; block-size:1px; opacity:0 }

.envio{ text-align:center; margin-block-start:var(--s-6) }
.envio .btn{ inline-size:100%; max-inline-size:26rem }
.envio__falha{
  margin-block-start:var(--s-3); padding:.75rem .9rem; text-align:start;
  background:var(--vc-pergaminho-linha); color:var(--estado-erro); font-weight:700;
  border-inline-start:3px solid var(--estado-erro); font-size:var(--fs-small);
}
.noscript{
  margin-block-start:var(--s-3); padding:.75rem .9rem;
  border:1px solid var(--vc-tinta-14); color:var(--fg-claro-2); font-style:italic;
  font-size:var(--fs-small);
}

/* sucesso — substitui o formulário no lugar */
.sucesso{ text-align:center; border-block-end:2px solid var(--estado-ok); padding-block-end:var(--s-6) }
.sucesso__simbolo{ inline-size:4.5rem; block-size:4.5rem; margin:0 auto var(--s-4) }
.sucesso__simbolo svg{ inline-size:100%; block-size:100% }
.sucesso__titulo{ margin-block-end:var(--s-3) }
.sucesso p{ max-inline-size:34rem; margin-inline:auto }
.sucesso p + p{ margin-block-start:1em }
.sucesso .acao{ justify-content:center; margin-block:var(--s-4) }
.sucesso__divisa{ margin-block-start:var(--s-4); color:var(--fg-claro-2) }
.duplicado{
  margin-block-start:var(--s-3); padding:.85rem 1rem; text-align:start;
  background:var(--vc-pergaminho); border-inline-start:3px solid var(--vc-tinta);
  font-size:var(--fs-small);
}
.duplicado strong{ display:block; margin-block-end:.35rem }

/* ============================================================================
   10 · RODAPÉ
   ========================================================================== */
.rodape{ text-align:center }
.rodape__selo{ inline-size:var(--logo-selo-rodape); block-size:auto; margin:0 auto var(--s-5) }
/* line-height e padding de topo existem para o acento do "Fé" e o til do "Tradição"
   terem teto: em versalete de Cinzel, 1.4 encosta. Esta regra PRECISA continuar
   depois de .t-divisa nesta folha — as duas têm a mesma especificidade e quem
   vem por último ganha. */
.rodape__lema{ color:var(--vc-prata); line-height:1.6; padding-block-start:.35em; margin-block:0 var(--s-3) }
.rodape__id{ color:var(--vc-prata-64); margin-block-end:var(--s-6) }
.rodape__blocos{ max-inline-size:44rem; margin-inline:auto; text-align:start }
.rodape__blocos details{ border-block-start:1px solid var(--vc-prata-14) }
.rodape__blocos details:last-of-type{ border-block-end:1px solid var(--vc-prata-14) }
.rodape__blocos summary{
  list-style:none; cursor:pointer; min-block-size:3rem; padding-block:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--ff-micro); font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--vc-prata);
}
.rodape__blocos summary::-webkit-details-marker{ display:none }
.rodape__conteudo{ padding-block:0 1.5rem; color:var(--vc-prata-88); font-size:var(--fs-small) }
.creditos__lista{ list-style:none; margin:0; padding:0 }
.creditos__lista li{ margin-block-start:.5rem; font-variant-numeric:lining-nums tabular-nums }
/* dado bancário é número para copiar, não prosa: algarismo alinhado e de caixa alta */
.banco__dados dd,.banco__dados code,.doacao__via p{ font-variant-numeric:lining-nums tabular-nums }
.rodape__conteudo p + p{ margin-block-start:1em }
.rodape__credito{
  /* era mono, caixa-alta, centralizado, 11px: a nota de rodapé mais difícil de ler da página.
     Volta para a serifada do corpo, alinhada, no tamanho do texto pequeno. */
  margin-block-start:var(--s-8); color:var(--vc-prata-64);
  max-inline-size:44rem; margin-inline:auto;
  font-family:var(--ff-corpo); font-size:var(--fs-small); font-weight:600;
  letter-spacing:normal; text-transform:none; text-align:start; line-height:1.5;
}

/* ============================================================================
   11 · ANIMAÇÃO — inventário fechado, uma curva só, nada em loop.
   Toda regra fica sob .js: sem JavaScript a página nasce inteira visível.
   ========================================================================== */
@keyframes vc-entra{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}
@keyframes vc-clip{
  from{ clip-path:inset(0 100% 0 0); opacity:0 }
  to  { clip-path:inset(0 0% 0 0);   opacity:1 }
}
@keyframes vc-filete{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes vc-caminhar{ from{ translate:0 } to{ translate:100% } }

.js [data-animate]{ opacity:0 }
.js [data-animate].is-visible{ opacity:1 }
.js [data-animate="entra"]{ transform:translateY(14px) }
.js [data-animate="entra"].is-visible{ animation:vc-entra var(--dur-marcha) var(--ease) both }
/* clip nasce VISÍVEL: se o observer nunca disparar, o título continua legível */
.js [data-animate="clip"]{ opacity:1; clip-path:inset(0 0% 0 0) }
.js [data-animate="clip"].is-visible{ animation:vc-clip var(--dur-marcha) var(--ease) both }

.js .corte{
  display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.06;
  padding-block-end:.14em; margin-block-end:-.14em;
}
.js .corte > i{
  display:inline-block; font-style:inherit; translate:0 110%;
  transition:translate 700ms var(--ease); transition-delay:var(--d,0ms);
}
.js .hero__titulo.is-visible .corte > i{ translate:0 0 }

.js .filete-desenha{ transform:scaleX(0); transform-origin:left center }
.js .is-visible .filete-desenha,
.js .filete-desenha.is-visible{ animation:vc-filete 1400ms var(--ease) 150ms both }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .js .rota__device{
      animation:vc-caminhar var(--ease-marcha) both;
      animation-timeline:view();
      animation-range:entry 25% cover 85%;
    }
  }
}

/* ============================================================================
   12 · prefers-reduced-motion — desliga o movimento, não o desacelera
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .js [data-animate],
  .js [data-animate="clip"],
  .js [data-animate="entra"]{
    opacity:1 !important; clip-path:none !important;
    transform:none !important; filter:none !important;
    animation:none !important; transition:none !important;
  }
  .js .corte > i{ translate:none !important; transition:none !important }
  .js .filete-desenha{ transform:scaleX(1) !important; animation:none !important }
  .js .rota__device{ animation:none !important; translate:none !important }
  .js .link::after{ transform:scaleX(1); transition:none }
  .progresso{ display:none }
  .hero__video{ display:none }
  .nav{ transition:none }
}

/* ═══════════ Imagem — cartões, tira da jornada e figura lateral ═══════════
   O ar da página vem do branco; a imagem entra para quebrar a coluna de texto,
   nunca como enfeite. Toda imagem é moldada por um filete de 1px, como uma
   estampa colada num documento. Sem sombra, sem raio, sem gradiente. */

.estampa{ position:relative; display:block; overflow:hidden; background:var(--vc-azul-900);
  border:1px solid var(--filete) }
.estampa img{ inline-size:100%; block-size:100%; object-fit:cover; display:block }
.estampa::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(184,146,62,.14) }

.cartoes{ display:grid; gap:var(--s-5); margin-block-start:var(--s-6) }
/* em três colunas iguais cada foto saía com 263px num monitor de 1280: miniatura, não imagem.
   A Missa é o centro do dia — ela lidera a fileira e as outras duas dividem a linha de baixo. */
@media (min-width:48em){
  .cartoes{ grid-template-columns:repeat(2,1fr) }
  .cartoes > .cartao:first-child{ grid-column:1 / -1 }
}
/* os arquivos das cenas são 1400x792 (16:9): qualquer outra proporção aqui corta
   justamente o que a legenda promete — cruz, estandarte, altar. Corte zero. */
.cartao__figura{ aspect-ratio:16/9 }
.cartao__rotulo{ display:block; margin-block:var(--s-3) .45rem }
/* .t-corpo tem medida propria maior que o cartao; sem isto o texto invade a coluna vizinha */
.cartao p, .cartao .t-corpo{ margin:0; max-inline-size:none }
.tira__item figcaption .t-small{ max-inline-size:none }
.passo .t-corpo{ max-inline-size:none }

/* tira da jornada: rolagem horizontal com encaixe. Em teclado, cada item é focável. */
.tira{ margin-block-start:var(--s-7) }
@media (min-width:56.25em){
  /* a coluna de leitura vai de 4/12 a 12/12 e sobra uma coluna à direita. Imagem pede
     mais largura que texto: as grades de mídia ocupam essa sobra, e a tira também —
     assim a última imagem não morre cortada no meio da faixa. */
  .tira,
  .faixa__corpo > .cartoes,
  .faixa__corpo > .irmas{ margin-inline-end:-13% }
}
.tira__pista{ display:flex; gap:var(--s-4); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; padding-block-end:var(--s-4); scroll-padding-inline-start:0 }
.tira__item{ flex:0 0 min(86vw,34rem); scroll-snap-align:start; margin:0 }
.tira__item .estampa{ aspect-ratio:3/2 }
.tira__item figcaption{ margin-block-start:.75rem }
.tira__momento{ flex:none }
/* a tira passou a viver em faixa clara: a cor do foco volta a sair da regra base (azul sobre
   claro, ouro dentro de .s-azul) e o trilho da barra deixa de herdar o azul-900 do :root. */
.tira__pista:focus-visible{ outline-offset:4px }
.tira__pista{ scrollbar-color:var(--vc-ouro-filete) transparent }
.tira__pista::-webkit-scrollbar{ block-size:3px }
.tira__pista::-webkit-scrollbar-thumb{ background:var(--vc-ouro-filete) }
.tira__pista::-webkit-scrollbar-track{ background:transparent }
.tira__dica{ margin-block-start:.4rem }

/* figura ao lado de texto (Anjo da Guarda) */
.duo{ display:grid; gap:var(--s-5); align-items:start }
@media (min-width:52em){ .duo{ grid-template-columns:1fr .8fr; gap:var(--s-7) } }
.duo__figura{ aspect-ratio:1/1 }
.duo__figura img{ object-position:70% 50% }   /* o terço no pulso fica no quadro */
@media (max-width:51.99em){ .duo__figura{ aspect-ratio:16/9 } }

/* grade numerada (o que acontece depois) */
.passos{ display:grid; gap:var(--s-5); margin-block-start:var(--s-5); counter-reset:passo }
@media (min-width:48em){ .passos{ grid-template-columns:repeat(3,1fr) } }
.passo{ padding-block-start:var(--s-3); border-block-start:1px solid var(--filete) }

/* peregrinações irmãs: três referências, não três parceiras. Filete simples,
   sem logo de terceiro — o vínculo formal ainda não existe. */
.irmas{ display:grid; gap:var(--s-5); margin-block-start:var(--s-6) }
@media (min-width:48em){ .irmas{ grid-template-columns:repeat(3,1fr) } }
.irma{ padding-block-start:var(--s-3); border-block-start:1px solid var(--filete) }
.irma__pais{ display:block; margin-block-end:.5rem }
/* títulos de 2 e de 3 linhas desalinhavam rota e link dos três cartões: reserva-se
   a altura de três linhas para as fileiras de baixo fecharem no mesmo eixo. */
.irma__nome{ margin-block-end:.35rem; min-block-size:calc(3 * 1.14em) }
/* medido: prata 94% sobre prata dá 1,00:1 — a rota sumia quando #irmas virou faixa clara */
.irma__rota{ color:var(--fg-claro-2); margin-block-end:.5rem }
.s-azul .irma__rota,.s-azul-900 .irma__rota{ color:var(--fg-escuro-2) }
.irma p{ max-inline-size:none }

/* doação: duas vias, e os dados bancários dobrados por padrão. Dobrar não esconde
   de robô — mas tira da primeira leitura um bloco que não é o assunto da página. */
.doacao{ display:grid; gap:var(--s-6); margin-block:var(--s-6) }
@media (min-width:48em){ .doacao{ grid-template-columns:1fr 1fr; gap:var(--s-7) } }
.doacao__via{ padding-block-start:var(--s-3); border-block-start:1px solid var(--filete) }
.doacao__via h3{ min-block-size:calc(2 * 1.14em) }   /* "PIX" e "Transferência internacional" fecham juntos */
.doacao__titulo{ margin-block:.5rem .6rem }
.doacao__via p{ max-inline-size:none }

.banco{ margin-block-start:var(--s-3); border-block-start:1px solid var(--filete-tinta) }
.banco__abrir{ cursor:pointer; padding-block:.7rem; color:var(--vc-ouro-inscricao);
  font-family:var(--ff-micro); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase }
.banco__abrir::marker{ color:var(--filete) }
.banco__abrir:focus-visible{ outline:2px solid var(--foco-sobre-claro); outline-offset:3px }
.banco__conta{ padding-block:var(--s-3); border-block-start:1px solid var(--filete-tinta) }
.banco__dados{ margin:.5rem 0 0; display:grid; gap:.3rem }
.banco__dados > div{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap }
.banco__dados dt{ font-family:var(--ff-micro); font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-claro-2); flex:none; min-inline-size:5.5rem }
.banco__dados dd{ margin:0; overflow-wrap:anywhere; flex:1 1 12rem }
.banco__nota{ margin-block-start:var(--s-3); color:var(--fg-claro-2) }

.rodape__comunidades{ margin-block:var(--s-6); padding-block-start:var(--s-4);
  border-block-start:1px solid rgba(184,146,62,.28) }
.rodape__comunidade{ margin-block:.5rem .75rem }

/* ── Brasão da FSSP — PRONTO E DESLIGADO ────────────────────────────────
   Liga/desliga só em --fssp-brasao (bloco 1 · TOKENS). Desligado, o container
   não gera caixa: o SVG não é baixado e nada entra na árvore de acessibilidade.
   O crédito CC BY-SA mora DENTRO do container comutado de propósito — não
   existe estado em que o brasão apareça sem ele. */
.rodape__fssp{ display:var(--fssp-brasao,none); margin-block-start:var(--s-3) }
.rodape__fssp-marca{
  display:block; inline-size:var(--fssp-brasao-largura); aspect-ratio:396/392;
  margin:0 auto .6rem;
  background:url("logo/fssp-brasao.svg") center/contain no-repeat;
  /* Redução monocromática prata. O original é azul #004C99 sobre o Azul-900
     do rodapé: 1,98:1, some no fundo. A própria FSSP Portugal usa o brasão
     mono no rodapé dela, sem palmas — esta é a leitura da casa, não invenção
     nossa. Nenhum HEX novo entra na folha: a cor é do arquivo de terceiro.
     Confirme o tratamento quando a autorização chegar. */
  filter:grayscale(1) brightness(2.1);
}
.rodape__fssp-credito{ margin-block-start:0 }
.passo__num{ display:block; margin-block-end:.6rem; color:var(--fg-claro-2); font-variant-numeric:tabular-nums }
.passo p{ margin:0 }