/* ============================================================================
   FOUP — camada de refino de UI/UX (DEMO)
   Aplicada sobre o tema existente. Só transform/opacity/filter (compositor),
   transições escopadas, respeita prefers-reduced-motion. Não muda conteúdo.
   Assinatura de movimento herdada do tema: cubic-bezier(.22,.61,.36,1).
   ============================================================================ */
:root{
  --fp-navy:#263774; --fp-navy-2:#1b2536; --fp-blue:#2D94D2; --fp-blue-d:#006494;
  --fp-gold:#F09219; --fp-gold-2:#FCBC1A;
  --fp-ease:cubic-bezier(.22,.61,.36,1);
  --fp-shadow-1:0 4px 14px rgba(22,36,62,.06);
  --fp-shadow-2:0 12px 30px rgba(22,36,62,.10);
  --fp-shadow-3:0 22px 50px rgba(22,36,62,.14);
}

/* ---- base: nitidez de texto + fluxo de nºs + quebra de linha refinada ---- */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.content-wrapper h1,.content-wrapper h2,.content-wrapper h3,.content-wrapper h4,
.ciepi-h2,.ciepi-hero-title,.ciepi-centro-heading,.ciepi-arq-heading,.ciepi-pesq-heading,
.ciepi-edit-heading,.ciepi-org-heading,.display-1,.display-2,.display-3,.display-4,.display-5{
  text-wrap:balance;
}
.ciepi-lead,.lead,.card-text,.card-body p,.ciepi-step-p,.text-muted,figcaption{ text-wrap:pretty; }
.ciepi-stat-num,.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---- imagens: outline neutro pra não sangrar na superfície ---- */
.content-wrapper figure img,.card img,.ciepi-img-block,.img-card-eventos{
  outline:1px solid rgba(22,36,62,.08); outline-offset:-1px;
}

/* ---- CARDS: profundidade e lift tátil (hover retargetável) ---- */
.card.lift,.card.shadow-sm,.ciepi-eixo-card,.ciepi-pesq-card,
.cid-tab, .bbp-acc .card, .cid-acc .card{
  transition-property:transform,box-shadow,border-color;
  transition-duration:.28s; transition-timing-function:var(--fp-ease);
}
.card.lift:hover,.card.shadow-sm:hover{
  transform:translateY(-6px); box-shadow:var(--fp-shadow-3);
}
.ciepi-eixo-card{ will-change:transform; }
.ciepi-eixo-card:hover{ transform:translateY(-4px); box-shadow:var(--fp-shadow-2); }

/* ---- BOTÕES: press tátil + hover suave (sem transition:all) ---- */
.btn,.ciepi-hero-btn-primary,.ciepi-pesq-btn-primary,.ciepi-edit-btn-filled{
  transition-property:transform,box-shadow,background-color,color,border-color;
  transition-duration:.18s; transition-timing-function:ease-out;
}
.btn:active,.ciepi-hero-btn-primary:active,.ciepi-pesq-btn-primary:active,
.ciepi-edit-btn-filled:active{ transform:scale(.97); }
.btn-primary:hover,.btn-orange:hover{ box-shadow:0 10px 24px rgba(240,146,25,.25); }
.btn-navy:hover{ box-shadow:0 10px 24px rgba(38,55,116,.28); }
.btn-sky:hover{ box-shadow:0 10px 24px rgba(45,148,210,.25); }
.btn-aqua:hover{ box-shadow:0 10px 24px rgba(84,168,199,.28); }
.btn-outline-primary:hover,.btn-outline-dark:hover{ box-shadow:var(--fp-shadow-1); }

/* ---- ACORDEÃO (só os meus: .cid-acc/.bbp-acc — o ciepi-conheca já tem caret nativo) ---- */
.cid-acc .card-header button,.bbp-acc .card-header button{
  position:relative; padding-right:52px !important;
  transition-property:color,background-color; transition-duration:.2s; transition-timing-function:ease-out;
  min-height:52px; /* hit area confortável no mobile */
}
.cid-acc .card-header button::after,.bbp-acc .card-header button::after{
  content:""; position:absolute; right:20px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(45deg); transform-origin:center;
  transition:transform .3s var(--fp-ease); opacity:.65;
}
.cid-acc .card-header button:not(.collapsed)::after,
.bbp-acc .card-header button:not(.collapsed)::after{
  transform:rotate(-135deg); opacity:1;
}
/* hit area do acordeão nativo do CIEPI, sem duplicar chevron */
.ciepi-conheca-acc .card-header button{ min-height:52px; }
.cid-acc .card:has(button:not(.collapsed)),
.bbp-acc .card:has(button:not(.collapsed)){
  border-color:var(--acc-hover,var(--fp-blue)); box-shadow:var(--fp-shadow-2);
}

/* ---- Pílulas de idioma do tema (.fp-lang): alvo de toque de 44px no mobile.
   O visual não muda — a área clicável cresce por pseudo-elemento. ---- */
@media (max-width:991px){
  /* padding real (nao pseudo-elemento: ::after nao vence o hit-test aqui) */
  .fp-lang{ min-height:44px; min-width:44px; padding:8px 12px !important;
            display:inline-flex; align-items:center; justify-content:center; }
}

/* ---- SELETOR DE IDIOMA no rodapé: hit area + hover ---- */
.footer .widget a,footer .widget a{ transition:color .18s ease-out,padding-left .18s var(--fp-ease); }
.footer .widget a:hover,footer .widget a:hover{ padding-left:4px; }

/* ---- STAT CIEPI: brilho do "+" e leve realce ---- */
.ciepi-stat-num span{ color:var(--fp-gold); }

/* ---- MOBILE premium: hero CIEPI compacto, com respiro ---- */
@media (max-width:575px){
  .ciepi-hero{ min-height:auto; }
  .ciepi-hero-inner{ padding-top:96px; padding-bottom:22px; }
  .ciepi-hero-btns{ margin-bottom:14px; }
  .ciepi-theme-card-body{ padding:16px 16px 15px; }
  .ciepi-theme-title{ font-size:1.02rem; line-height:1.35; }
  .ciepi-theme-support{ font-size:.8rem; margin-bottom:12px; }
  .ciepi-theme-eyebrow{ font-size:.64rem; margin-bottom:8px; }
  .ciepi-theme-cta{ font-size:.84rem; padding:9px 15px; }
}
/* failsafe: conteúdo do hero nunca fica invisível (cues do tema pode falhar) */
.fp-cues-rescue [data-cues] > *{ opacity:1 !important; transform:none !important; transition:opacity .5s ease-out; }

/* ---- MOBILE: pill do tema do hero não encosta na borda ---- */
@media (max-width:575px){
  .ciepi-hero-tema{ font-size:.86rem; padding:7px 13px; line-height:1.35; max-width:100%; }
}

/* ---- faixa DEMO: mais discreta e premium ---- */
.foup-demo-strip{
  position:sticky;top:0;z-index:2000;background:var(--fp-navy);color:#fff;
  text-align:center;font:600 12px/1 'Urbanist',Arial,sans-serif;letter-spacing:.6px;
  padding:7px 10px;text-transform:uppercase;backdrop-filter:saturate(1.2);
  border-bottom:2px solid var(--fp-strip-accent,var(--fp-gold));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}

/* ============================================================================
   SCROLL REVEAL — enter suave e escalonado. Progressive enhancement:
   o estado escondido só existe quando o JS marca <html class="fp-js">.
   Sem JS ou com reduced-motion, tudo aparece normal.
   ============================================================================ */
.fp-js .fp-reveal{ opacity:0; transform:translateY(18px); }
.fp-js .fp-reveal.fp-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--fp-ease),transform .6s var(--fp-ease);
}
@media (prefers-reduced-motion:reduce){
  .fp-js .fp-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card.lift:hover,.card.shadow-sm:hover,.ciepi-eixo-card:hover{ transform:none; }
  .btn:active,.ciepi-hero-btn-primary:active{ transform:none; }
}

/* ============================================================================
   PATCH v4 — consolidação da auditoria (perf + a11y + hierarquia + consistência)
   ============================================================================ */

/* ---- tokens novos (o --fp-r/--fp-shadow-* já existem: premium/refine) ---- */
:root{
  --fp-sec: clamp(3.5rem, 2.75rem + 3.5vw, 6rem);      /* respiro padrão de seção */
  --fp-sec-sm: clamp(2.25rem, 1.9rem + 1.8vw, 3.5rem); /* entre seções do mesmo fundo */
}

/* ================= PERF ================= */
/* Teto do page-loader: some em ~0.8s mesmo se o JS falhar (o theme.js só
   esconde no window.load + setTimeout 1000). pointer-events:none = nunca
   bloqueia clique. O JS do refine (abaixo) esconde no DOM pronto. */
@keyframes fp-loader-cap{to{opacity:0;visibility:hidden}}
.page-loader{animation:fp-loader-cap .3s ease-out .5s forwards;pointer-events:none}

/* CIEPI: menu desktop branco sobre foto clara — reforça SÓ a faixa do topo
   (~110px do menu center-logo); meio claro preservado (placa = título visual).
   !important obrigatório: vence o gradiente !important da v16 do tema. */
@media (min-width:992px){
  .ciepi-hero-overlay{
    background:linear-gradient(180deg,
      rgba(8,10,14,.60) 0, rgba(8,10,14,.46) 112px,
      rgba(10,11,14,.10) 176px, rgba(10,11,14,.04) 50%,
      rgba(10,11,14,.52) 76%, rgba(8,9,12,.93) 100%) !important;
  }
}

/* ================= CONTRASTE / A11Y ================= */
/* .text-muted #aab0bc = 2,18:1 → 5,4:1 em superfície clara (inclui .bg-gray
   da agenda, cujos slides não têm ancestral .card) */
.card .text-muted,.bg-light .text-muted,.bg-white .text-muted,
.bg-gray .text-muted{ color:#5F6B7A !important; }

/* Laranja #fb8500 (2,48:1) nunca como texto em fundo claro; contextos escuros
   mantêm o laranja (lá ele passa 5:1 e o âmbar reprovaria). */
.more.link-yellow,.text-orange{ color:#A15C00 !important; }
.content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand):hover{ color:#A15C00 !important; }
.content-wrapper footer a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand):hover,
.content-wrapper .bg-navy a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand):hover,
.content-wrapper .bg-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand):hover,
.content-wrapper .text-white a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand):hover{ color:var(--fp-orange-2) !important; }
.text-white .text-orange,.bg-navy .text-orange,.bg-dark .text-orange,
.image-wrapper .text-orange{ color:var(--fp-orange-2) !important; }

/* Focus ring 2 camadas (navy 11:1 + halo dourado p/ escuro). Inclui os 3
   seletores de maior especificidade do premium para empatar e vencer por ordem;
   regra espelho vence o outline:none dos inputs do premium. */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,
.offcanvas-nav .nav-link:focus-visible,.swiper-pagination-bullet:focus-visible,
.hamburger:focus-visible{
  outline:2px solid #263774 !important; outline-offset:2px;
  box-shadow:0 0 0 5px rgba(252,188,26,.9) !important;
}
.content-wrapper input:not([type=checkbox]):not([type=radio]):focus-visible,
.content-wrapper textarea:focus-visible,
.content-wrapper select:focus-visible{
  outline:2px solid #263774 !important; outline-offset:2px;
  box-shadow:0 0 0 5px rgba(252,188,26,.9) !important;
}

/* ================= TIPOGRAFIA / HIERARQUIA ================= */
/* Desktop-only: neutraliza style="line-height:1em" inline e normaliza h2 de
   seção (mobile já é do premium — não brigar). Cobre jovens:263 (h2 sem
   display-*) via [style*=]. */
@media (min-width:992px){
  .content-wrapper h2[class*="display-"],.content-wrapper h4[class*="display-"],
  h1[style*="line-height"],h2[style*="line-height"],h4[style*="line-height"]{ line-height:1.15 !important; }
  .content-wrapper h2[class*="display-"]{ font-size:clamp(1.75rem, 1.3rem + 2vw, 2.6rem); }
}

/* Heroes: escala de H1 por família (com !important p/ valer também <992px,
   senão o clamp mobile do premium vence e a loteria display-1/2/3 persiste).
   A: hero de programa (split c/ imagem) — banco/jovens/cidades + governança.
   B: hero interno — eixos/programas/membro-ies + termo. */
section.min-vh-70 h1[class*="display-"],
#ensino .image-wrapper h1[class*="display-"]{
  font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem) !important; line-height:1.08 !important;
}
section.bg-dark:not(.min-vh-70) h1[class*="display-"],
section.image-wrapper h1[class*="display-"]{
  font-size:clamp(2rem, 1.4rem + 2.4vw, 3.2rem) !important; line-height:1.08 !important;
}

/* Respiro duplo acima do título (div.mt-5.mb-2 > h2.mt-5 — só 4 pontos no site) */
.content-wrapper .container > .row [class*="col-"] > .mt-5.mb-2{ margin-top:0 !important; }
.content-wrapper .container > .row [class*="col-"] > .mt-5.mb-2 > h2.mt-5:first-child{ margin-top:0 !important; }
.content-wrapper .container > .row [class*="col-"] > .mt-5.mb-2 > .bbp-hat + h2.mt-5{ margin-top:0 !important; }

/* ================= RITMO VERTICAL ================= */
.content-wrapper section.wrapper > .container.py-5,
.content-wrapper section.wrapper > .container.py-10,
.content-wrapper section.wrapper > .container.py-12{
  padding-top:var(--fp-sec) !important; padding-bottom:var(--fp-sec) !important;
}
.content-wrapper section.wrapper > .container.pt-15.pb-10{      /* governança */
  padding-top:var(--fp-sec) !important; padding-bottom:var(--fp-sec) !important;
}
.content-wrapper section.wrapper > .container-xl > .mx-8.py-8{  /* agenda */
  padding-top:var(--fp-sec) !important; padding-bottom:var(--fp-sec) !important;
}
/* seções irmãs de mesmo fundo respiram menos (vence as regras acima por
   especificidade entre !important) */
.content-wrapper section.bg-gray + section.bg-gray > .container[class*="py-"],
.content-wrapper section.bg-light + section.bg-light > .container[class*="py-"]{
  padding-top:var(--fp-sec-sm) !important;
}
/* CIEPI converge — só ≥768px (preserva a compactação mobile deliberada do tema) */
@media (min-width:768px){
  .ciepi-pesq-section{ padding-top:var(--fp-sec); padding-bottom:var(--fp-sec); }
  .ciepi-org-section,.ciepi-edit-section{ padding:var(--fp-sec) 0; }
  .ciepi-pesq-section + .ciepi-org-section{ padding-top:var(--fp-sec-sm); }
}

/* ================= COMPONENTES ================= */
/* Eyebrow único (DNA CIEPI); .bbp-hat alinhado (page-scoped no banco, 1 uso) */
.fp-eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--fp-gold-2,#FCBC1A);color:#000;
  font-family:'Inter','Urbanist',sans-serif;font-weight:500;
  font-size:clamp(.95rem,.85rem + .4vw,1.125rem);line-height:1.3;
  border-radius:8px;padding:8px 15px;margin-bottom:1rem;
}
.bbp-hat{ background:var(--fp-gold-2,#FCBC1A) !important; color:#000 !important;
  border-radius:8px !important; text-transform:none !important; letter-spacing:0 !important;
  font-size:1rem !important; font-weight:500 !important; padding:8px 15px !important;
  margin-bottom:1rem !important; }
/* badges "Eixo 1..8" (eixos): dourado + navy = 6,6:1 (era branco s/ laranja 2:1) */
.badge.bg-primary.rounded-pill{
  background:var(--fp-gold-2,#FCBC1A) !important; color:var(--fp-navy,#263774);
  font:700 .72rem/1 'Urbanist',Arial,sans-serif; letter-spacing:1.4px;
  text-transform:uppercase; padding:6px 14px;
}

/* Cards: raio e sombra por token. Bases precisam de !important (.shadow-* do
   tema é !important); hovers idem (senão a base venceria o :hover). */
.content-wrapper .card{ border-radius:var(--fp-r,14px); }
.content-wrapper .card.shadow-lg,
.content-wrapper .card.shadow-sm{ box-shadow:var(--fp-shadow-1) !important; }
.content-wrapper .card.shadow-lg.lift:hover,
.content-wrapper .card.shadow-sm.lift:hover{ box-shadow:var(--fp-shadow-2) !important; }

/* Botões: raio padrão do site = 8px (decisão #6, _tema-ciepi.css:465).
   :not(.botao) preserva o organograma da governança (1.2rem do premium);
   #area_inscricao segue 12px por ID — exceção intencional. */
.btn:not(.btn-circle):not(.btn-close):not(.botao){ border-radius:8px !important; }
/* aqua entra na paleta (azul claro da marca) */
.btn-aqua{ background:#2D94D2 !important; border-color:#2D94D2 !important; color:#fff !important; }

/* Acordeões: receita ÚNICA (permite remover os <style> das páginas);
   identidade por variável. cid herda o navy da marca (junto do purge #023047). */
.cid-acc{--acc-head:#263774;--acc-hover:#0a97b0;--acc-border:#dfe7ec}
.bbp-acc{--acc-head:#263774;--acc-hover:#F09219;--acc-border:#e7e2d8}
.cid-acc .card,.bbp-acc .card{border:1px solid var(--acc-border);border-radius:var(--fp-r,14px);margin-bottom:10px;overflow:hidden;background:#fff}
.cid-acc .card-header,.bbp-acc .card-header{padding:0;background:#fff}
.cid-acc .card-header button,.bbp-acc .card-header button{width:100%;text-align:left;background:none;border:0;padding:15px 52px 15px 18px;font-weight:700;color:var(--acc-head);font-size:1.02rem}
.cid-acc .card-header button:hover,.bbp-acc .card-header button:hover{color:var(--acc-hover)}
.cid-acc .card-body,.bbp-acc .card-body{padding:4px 20px 16px;color:#3c4650}
.cid-acc .card-body p,.bbp-acc .card-body p{margin:8px 0;text-align:justify}
.cid-acc .card-body ul,.bbp-acc .card-body ul{margin:8px 0 8px 4px;padding-left:18px}
.cid-acc .card-body li,.bbp-acc .card-body li{margin:4px 0}
.bbp-acc .card-body li{text-align:justify}

/* Tabelas: guarda de overflow (o .card tem overflow:hidden — hoje CORTA as
   tabelas de 3 colunas no mobile) + linguagem comum no CIEPI */
.cid-acc .card-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:767.98px){
  .cid-acc .card-body .cid-tab{ font-size:.85rem; }
  .cid-acc .card-body .cid-tab th,.cid-acc .card-body .cid-tab td{ padding:6px 8px; }
  .cid-acc .card-body .cid-tab:has(tr > :nth-child(3)){ min-width:560px; }
}
.ciepi-conheca-acc .table{ font-size:.92rem; }
.ciepi-conheca-acc .table thead th{ background:var(--fp-navy,#263774); color:#fff; border:0; padding:7px 10px; }
.ciepi-conheca-acc .table tbody td{ padding:8px 10px; }
.ciepi-conheca-acc .table-striped>tbody>tr:nth-of-type(odd)>*{ background:#f6f8fb; box-shadow:none; }

/* termo: scrim eased no hero laranja (2,4:1 → ~5,9:1 na faixa do h1);
   bg-header só existe no termo, sem .bg-overlay do tema = ::before livre */
section[data-image-src*="bg-header"]{ position:relative; }
section[data-image-src*="bg-header"] > .container{ position:relative; z-index:1; }
section[data-image-src*="bg-header"]::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(180deg, rgba(24,16,6,.55) 0%, rgba(24,16,6,.42) 45%, rgba(24,16,6,.28) 80%, rgba(24,16,6,.20) 100%);
  pointer-events:none;
}

/* termo: CTAs de decisão do voluntário (mobile) */
@media (max-width:575.98px){
  .foup-rota .btn{
    min-height:46px; width:100%; display:flex; align-items:center; justify-content:center;
    white-space:normal; text-align:center; margin-right:0 !important;
  }
  .foup-rota-passo .btn + .btn{ margin-top:8px; }
  .foup-rota a.fs-14{ display:inline-block; padding:10px 2px; opacity:1 !important; }
}

/* membro-ies: checkboxes de eixo com alvo 44px (margin-top:0 corrige o .25em
   do Bootstrap sob align-items:center) */
@media (max-width:767.98px){
  #form_membro_ies .form-check{ display:flex; align-items:center; min-height:44px; padding-left:2.4em; }
  #form_membro_ies .form-check-input{ width:1.4em; height:1.4em; margin-left:-2.4em; margin-top:0; flex-shrink:0; }
  #form_membro_ies .form-check-label{ padding:10px 0 10px 4px; width:100%; }
}

/* Footer: mata o vão do hr navy-sobre-navy (só o hr invisível — a home tem um
   hr legítimo com rgba claro) + carimbo dourado + respiro unificado */
footer.bg-navy > .container > hr[style*="navy-rgb"]{ display:none; }
footer.bg-navy{ border-top:4px solid var(--fp-gold,#F09219); }
footer.bg-navy > .container{ padding-top:var(--fp-sec-sm,3rem) !important; }

/* ================= AA do tema ORANGE (escopo .fp-theme-orange, aplicado por JS
   quando a página carrega colors/orange.css — NÃO tocar o arquivo do tema) ==== */
.fp-theme-orange .btn-primary{ --bs-btn-color:#263774; --bs-btn-hover-color:#263774; --bs-btn-active-color:#263774; --bs-btn-disabled-color:#263774; }
.fp-theme-orange .badge.bg-primary{ color:#263774 !important; }
.fp-theme-orange .btn-outline-primary{ --bs-btn-color:#A15C00; --bs-btn-border-color:#C87400; --bs-btn-hover-color:#263774; --bs-btn-active-color:#263774; }
.fp-theme-orange .content-wrapper :is(p,li,td) a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.navbar-brand){ color:#006494; }
.fp-theme-orange .content-wrapper :is(.text-inverse,.bg-dark,.bg-navy) :is(p,li,td) a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.navbar-brand){ color:inherit; }
.fp-theme-orange .bg-light .text-primary,.fp-theme-orange .bg-white .text-primary,.fp-theme-orange .card .text-primary{ color:#A15C00 !important; }
/* navbar fica FORA das regras AA de link (as exclusoes :not() no bloco acima
   ja bastam). NUNCA usar revert-layer aqui: sem @layer definido ele volta ao
   azul padrao do navegador (#0000EE) e pinta o botao Faca Parte e as pilulas de idioma. */

/* ============================================================================
   PATCH v12 — refino pós-auditoria (governança, hero 992-1199, jovens, faixa)
   ============================================================================ */

/* Governança: banners com texto branco sobre foto SEM scrim no mobile.
   O ::after cobre a imagem e o texto (position:relative) fica por cima. */
@media (max-width:991.98px){
  .wrapper.image-wrapper.position-relative{ position:relative; }
  .wrapper.image-wrapper.position-relative::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(10,14,26,.72) 0%, rgba(10,14,26,.45) 55%, rgba(10,14,26,.25) 100%);
  }
  .wrapper.image-wrapper.position-relative > *:not(img){ position:relative; z-index:1; }
}

/* Hero do CIEPI entre 992px e 1199px: o grid quebrava em 2 linhas e o bloco do
   tema descia órfão. Reduz a coluna do tema para caber lado a lado. */
@media (min-width:992px) and (max-width:1199.98px){
  .ciepi-hero-grid{ flex-wrap:nowrap; align-items:flex-end; gap:24px; }
  .ciepi-hero-text{ flex:1 1 auto; min-width:0; }
  .ciepi-theme-card{ flex:0 0 300px; max-width:300px; }
  .ciepi-theme-title{ font-size:1.12rem; }
  .ciepi-theme-support{ font-size:.8rem; }
}

/* Jovens: cards de objetivos com alturas desiguais (faltava h-100).
   Iguala pela linha e neutraliza o <p>&nbsp;</p> usado como calço. */
.content-wrapper .row > [class*="col-"] > .card{ height:100%; }
.content-wrapper .card p:empty,
.content-wrapper .card p > br:only-child{ display:none; }

/* Faixa DEMO: quebra em 2 linhas coladas no celular */
.foup-demo-strip{ line-height:1.35 !important; padding:8px 12px !important; }
@media (max-width:575.98px){ .foup-demo-strip{ font-size:11px !important; letter-spacing:.4px !important; } }

/* Texto justificado em coluna estreita vira rio de espaços */
@media (max-width:767.98px){
  .cid-acc .card-body p,.bbp-acc .card-body p,.cid-acc .card-body li,.bbp-acc .card-body li{ text-align:left; }
}