/* ===================================================================
   SECOMPI — styles.css (V6 • clean)
   • Mobile-first
   • Cards comuns centralizados com .card--center
   • Card de Transparência preservado
   • Subtítulo em lista com bullets alinhados
=================================================================== */

/* ========== 1) Design Tokens ========== */
:root{
  /* Cores */
  --page-bg: #0C67A8;
  --white: #fff;
  --blue-800: #0a4c86;
  --blue-700: #0B4F9C;
  --shadow: 0 10px 28px rgba(0,0,0,.25);

  /* Layout */
  --wrap-max: 960px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Linhas laterais nos títulos de seção */
  --sec-divider-thickness: 2px;
  --sec-divider-gap: clamp(8px, 2vw, 16px);
  --sec-divider-maxw: 180px;
  --sec-divider-opacity: .35;

  /* Hero (Título + CTA) */
  --hero-fs: clamp(15px, 5.2vw, 24px);
  --hero-lh: 1.14;
  --hero-fw: 300;
  --hero-ls: 0;
  --hero-mt: 0;
  --hero-mb: 18px;
  --hero-max: 40ch;

  --btn-bg: #fff;
  --btn-fg: var(--blue-800);
  --btn-border: #fff;
  --btn-radius: var(--radius-pill);
  --btn-shadow: var(--shadow);

  /* Tipografia geral */
  --h1: clamp(25px, 4.4vw, 34px);
  --h2: clamp(20px, 2.6vw, 34px);
  --card-title: clamp(23px, 2.8vw, 29px);
  --card-sub-fs: clamp(10px, 1.8vw, 16px);
  --pill-fs: 14px;

  /* Títulos/Sub dos cards */
  --card-title-lh: 1.12;
  --card-title-mt: 0px;
  --card-title-mb: 8px;

  --card-sub-lh: 1.3;
  --card-sub-mt: 6px;
  --card-sub-mb: 0px;

  --card-text-max: 58ch;
  --card-gap-ts: -4px; /* Título -> Sub */

  /* Bullets em listas do subtítulo */
  --bullet-size: 3px;
  --bullet-col: 1px;

  /* Altura dos <li> do subtítulo em lista */
  --li-lh: 1.14; /* altura de linha do LI */
  --li-gap: 2px; /* espaço entre LIs    */

  /* Rodapé */
  --footer-fw: 400;
}

/* ========== 2) Base / Reset ========== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background: var(--page-bg);
  color: #eaf6ff;
}
a{ color: inherit; text-decoration: none; }

/* ========== 3) Helpers ========== */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; }
.wrap{ width:min(100% - 28px, var(--wrap-max)); margin-inline:auto; }
.section{ padding:12px 0; }

/* ========== 4) Banner ========== */
.banner{
  display:block;
  height:min(40vw, 180px);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.35));
}
.banner__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ========== 5) Hero (Título + CTA) ========== */
.title{
  font-size: var(--hero-fs);
  line-height: var(--hero-lh);
  font-weight: var(--hero-fw);
  letter-spacing: var(--hero-ls);
  margin: var(--hero-mt) auto var(--hero-mb);
  max-width: var(--hero-max);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.btn,
a.btn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: 2px solid var(--btn-border) !important;
  border-radius: var(--btn-radius);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 13px 26px;
  box-shadow: var(--btn-shadow);
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
  text-decoration: none !important;
}
.btn--light{ background-color: var(--btn-bg) !important; color: var(--btn-fg) !important; border-color: var(--btn-border) !important; }
.btn:hover,
.btn:focus-visible,
a.btn:hover,
a.btn:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
a.btn{ background: none !important; background-color: var(--btn-bg) !important; }

.cta{ display:flex; justify-content:center; margin-top: clamp(12px, 2.2vw, 20px); }

/* ========== 6) Cabeçalhos de seção ========== */
.section-head{ text-align:center; margin:6px 0 6px; }
.section-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sec-divider-gap);
  width: 100%;
  margin: 6px 0 12px;
  font-size:var(--h2);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#eaf6ff;
}
.section-title::before,
.section-title::after{
  content: "";
  height: var(--sec-divider-thickness);
  background: currentColor;
  opacity: var(--sec-divider-opacity);
  flex: 1 1 auto;
  max-width: var(--sec-divider-maxw);
  border-radius: 999px;
}
.section-sub{
  display:block;
  margin-top:-10px;
  font-size: clamp(11px, 2.2vw, 17px);
  font-weight:800;
  text-transform:uppercase;
  opacity:.95;
  letter-spacing:.3px;
  text-align:center;
}
@media (max-width: 560px){
  :root{ --sec-divider-maxw: 110px; }
}

/* ========== 7) Cards (genéricos) ========== */
.stack{ display:grid; gap:14px; }

.card{
  position:relative;
  min-height:92px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card--white{ background:var(--white); color:var(--blue-800); }
.card__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(255,255,255,.50), rgba(255,255,255,.50)); }

.card__body{
  position:relative; z-index:1;
  padding:20px 20px 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.card__title{
  font-size:var(--card-title);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
  color:var(--blue-800);
  white-space:pre-line;
  overflow-wrap:anywhere;
  line-height:var(--card-title-lh);
  margin:var(--card-title-mt) 0 var(--card-title-mb);
  max-width:var(--card-text-max);
}
.card__sub{
  font-size:var(--card-sub-fs);
  color:var(--blue-800);
  font-weight:600;
  white-space:pre-line;
  overflow-wrap:anywhere;
  line-height:var(--card-sub-lh);
  margin:var(--card-sub-mt) 0 var(--card-sub-mb);
  max-width:var(--card-text-max);
}
.card__body > .card__title + .card__sub{ margin-top:var(--card-gap-ts); }
.card__body > .card__title:only-child{ margin-bottom:0; }

/* Centralização total (H/V) para cards comuns – usar .card--center no HTML */
.card.card--center{ display:flex; }
.card.card--center .card__body{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}

/* Primeiro card (SICAF) mais justinho */
.stack > .card:first-child .card__body > .card__title + .card__sub{ margin-top:3px; }

/* ========== 8) Pílulas genéricas + Links Importantes ========== */
.pill{
  background:var(--white);
  color:var(--blue-800);
  border-radius:10px;
  padding:9px 14px;
  font-weight:900;
  font-size:var(--pill-fs);
  text-transform:uppercase;
  letter-spacing:.3px;
  box-shadow:var(--shadow);
  transition:transform .12s ease, filter .12s ease;
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; white-space:normal; line-height:1.1; min-height:40px;
}
.pill:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.pill--blue{ background:#0D56A6; color:#fff; border-radius:14px; }

.pill-grid{
  --pill-gap:12px;
  display:flex; flex-wrap:wrap; gap:var(--pill-gap);
  justify-content:center; align-items:stretch;
}

/* Links Importantes – fallback de gap */
.links-fix{ display:flex; flex-wrap:wrap; justify-content:center; margin:-6px; }
.links-fix > *{ margin:6px; }
@media (max-width:480px){
  .links-fix{ margin:-5px; }
  .links-fix > *{ margin:5px; }
}

/* Botões de Links Importantes menores só no mobile */
@media (max-width: 560px){
  .links-fix .pill{
    font-size: 12px;
    padding: 8px 10px;
    min-height: 34px;
    border-radius: 8px;
    letter-spacing: .2px;
    box-shadow: none;
  }
  .links-fix{ margin: -4px; }
  .links-fix > *{ margin: 4px; }
}
@media (max-width: 360px){
  .links-fix .pill{
    font-size: 11px;
    padding: 7px 9px;
    min-height: 32px;
    border-radius: 7px;
  }
  .links-fix{ margin: -3px; }
  .links-fix > *{ margin: 3px; }
}



/* ========== 9) Card: PORTAL DA TRANSPARÊNCIA (pílulas) ========== */
.transp-title{
  text-align:center; text-transform:uppercase; font-weight:900;
  letter-spacing:.28px; margin:0 0 12px; color:#0a4c86;
}

/* Desktop/largo: 5 botões numa linha, largura pelo texto */
.transp-pills{
  display:flex; flex-wrap:nowrap;
  justify-content:center; align-items:center;
  gap:clamp(8px, 1.2vw, 1px);
  padding-inline:clamp(4px, 1vw, 10px);
  max-width:100%; margin-inline:auto;
}
.transp-pill{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:#0D56A6; color:#fff; text-decoration:none;
  white-space:nowrap; text-align:center;
  font-weight:900; text-transform:uppercase; letter-spacing:.18px; line-height:1.1;
  height:42px; padding:8px 14px; border-radius:10px;
  font-size:clamp(12px, 1.6vw, 16px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* Mobile/estreito: grid 5×1; texto pode quebrar e segue centralizado */
@media (max-width:560px){
  .transp-pills{
    display:grid; grid-template-columns:repeat(5, 1fr);
    gap:5px; padding-inline:4px; justify-items:center; align-items:stretch;
  }
  .transp-pill{
    width:100%; display:grid; place-items:center;
    white-space:normal; word-break:keep-all; text-align:center; line-height:1.12;
    height:auto; min-height:38px; padding:8px 9px; border-radius:10px; font-size:10.4px;
  }
}

@media (max-width:360px){
  .transp-pills{ gap:5px; padding-inline:2px; }
  .transp-pill{ font-size:8.6px; padding:6px 7px; min-height:34px; border-radius:8px; }
}

/* ========== 10) Subtítulo em LISTA (bullets alinhados) ========== */
.card__sub.card__list{
  list-style:none !important;
  padding-left:0 !important;
  margin:var(--card-gap-ts) auto 0 !important;
  width:min(100%, var(--card-text-max));
  display:grid;
  row-gap: var(--li-gap);
  justify-items:center;
}
.card__sub.card__list li{
  margin:0 !important;
  line-height: var(--li-lh) !important;
  display:grid;
  grid-template-columns:var(--bullet-col) 1fr;
  column-gap:.65em;
  align-items:center;          /* desktop: central */
  text-align:center;
  width:fit-content;
}
.card__sub.card__list li::before{
  content:"";
  width:var(--bullet-size);
  height:var(--bullet-size);
  border-radius:50%;
  background:var(--blue-800);
  justify-self:center;
}
@media (max-width:560px){
  .card__sub.card__list li{ align-items:flex-start; }
  .card__sub.card__list li::before{ margin-top:.25em; }
}

/* ========== 11) Rodapé ========== */
.footer{ text-align:center; }
.footer__logos{ display:flex; gap:16px; justify-content:center; align-items:center; margin-bottom:10px; }
.footer__logo{ background:var(--white); border-radius:10px; height:54px; width:auto; object-fit:contain; padding:6px 10px; }
.footer__text{
  font-size:clamp(10px, 1.6vw, 15px);
  font-weight: var(--footer-fw);
  color:#ebf5ff;
  opacity:.95;
  line-height:1.4;
}
.footer__text*, .footer__text a{ font-weight:inherit !important; }

/* ========== 12) Desktop refinamentos ========== */
@media (min-width:900px){
  .section{ padding:24px 0; }
  .stack{ gap:16px; }
  .card__body{ padding:22px 22px 22px; }
  .pill{ font-size:15px; padding:10px 16px; }
}

/* ====== PATCH: card inteiro clicável (stretched link) ====== */

/* garante a ordem das camadas */
.card       { position: relative; }
.card__overlay { z-index: 1; }
.card__body    { z-index: 2; }

/* link que cobre todo o card */
.card__stretched-link{
  position: absolute;
  inset: 0;                         /* ocupa 100% do card */
  z-index: 5;                       /* acima de overlay e conteúdo */
  display: block;
  border-radius: inherit;           /* respeita os cantos do card */
  text-indent: -9999px;             /* esconde texto do link, se houver */
  overflow: hidden;
  cursor: pointer;
}

/* acessibilidade e feedback */
.card__stretched-link:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* hover lindo só para cards com stretched link (sem mexer no de Transparência) */
@supports(selector(.card:has(.card__stretched-link))){
  .card:has(.card__stretched-link):hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
  }
}


/* ===== PATCH: hover/focus dos botões do Portal da Transparência ===== */
.transp-pill{
  transition: transform .12s ease,
              filter .12s ease,
              box-shadow .12s ease,
              background-color .12s ease,
              color .12s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.transp-pill:hover,
.transp-pill:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.05);                 /* leve “iluminar” */
  box-shadow: 0 14px 32px rgba(0,0,0,.28);  /* mesmo estilo do .btn */
  outline: 2px solid #fff;                  /* acessibilidade */
  outline-offset: 2px;
}

.transp-pill:active{
  transform: translateY(0);
  filter: brightness(0.98);
}

/* opcional: se preferir trocar a cor em vez de usar filter*/
.transp-pill:hover,
.transp-pill:focus-visible{
  background-color: #0E5FB7;  /* um tom acima do #0D56A6*/
}


/* garante que nada fique por cima dos botões */
.card__overlay{ z-index: 1; }
.card__body{ z-index: 2; }


/* ===== Hover/focus unificado para TODOS os botões (.btn, .pill, .transp-pill) ===== */

/* Base interativa */
.btn, .pill, .transp-pill{
  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    color .12s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hover/focus: mesmo efeito em todos */
.btn:hover, .btn:focus-visible,
.pill:hover, .pill:focus-visible,
.transp-pill:hover, .transp-pill:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  outline: 2px solid #fff;     /* acessível no fundo azul */
  outline-offset: 2px;
}

/* Active */
.btn:active, .pill:active, .transp-pill:active{
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  .btn, .pill, .transp-pill{ transition: none; }
}



/* =========================
   PATCH: Banner + fundo dos cards
   (colar no final do CSS)
========================= */

/* BANNER — mantém proporção e prioriza o texto no mobile */
.banner{
  /* trocamos a altura por razão de aspecto para evitar distorção */
  height: auto !important;
  aspect-ratio: 16 / 6;                 /* desktop/tablet */
}
.banner__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;               /* desktop: centro */
  border-radius: inherit;                /* respeita cantos arredondados */
}
@media (max-width: 560px){
  .banner{ aspect-ratio: 16 / 9; }      /* banner mais alto no mobile */
  .banner__img{
    /* mantemos cover, mas “puxamos” para a esquerda
       para privilegiar o texto e evitar cortar o começo */
    object-position: left center;
  }
}

/* OPCIONAL: se preferir ver 100% do banner sem NENHUM corte no mobile,
   ative esta classe no HTML: <a class="banner banner--contain">… */
.banner--contain .banner__img{
  object-fit: contain;
  background:#0C67A8; /* “letterbox” agradável */
}

/* ===== CARD: fundo mais visível no “Portal da Transparência” ===== */
.transp-card-saj .card__bg{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 35%;           /* mostra melhor o centro da imagem */
}
.transp-card-saj .card__overlay{
  /* overlay um pouco menos forte para a foto aparecer */
  background: linear-gradient(0deg, rgba(255,255,255,.86), rgba(255,255,255,.76));
}
@media (max-width:560px){
  .transp-card-saj .card__overlay{
    /* no mobile, deixamos ainda mais transparente */
    background: linear-gradient(0deg, rgba(255,255,255,.80), rgba(255,255,255,.68));
  }
}

/* ===== GARANTIA: todas as imagens de cards/banners cobrem corretamente ===== */
.card__bg,
.banner__img{
  max-width: none; /* evita algum reset externo atrapalhar */
}


/* === FIX 1: Banner SEM CORTE e responsivo ao zoom === */
.banner{
  height: auto !important;     /* nada de altura fixa */
  aspect-ratio: auto !important; /* remove ratio forçado */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.banner__img{
  width: 100% !important;
  height: auto !important;     /* preserva proporção */
  display: block;
  object-fit: contain !important;   /* 100% visível */
  object-position: center !important;
  border-radius: inherit;
}
/* mobile: privilegia o texto à esquerda */
@media (max-width:560px){
  .banner__img{ object-position: left center !important; }
}

@media (max-width:560px){
  .card__bg{ object-position: left center !important; }
}




/* FIX DEFINITIVO — 375/390 e qualquer outra largura no mobile */
@media (max-width:560px){
  .transp-pills{
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px; padding-inline: 4px;
    justify-items: stretch;  /* a célula preenche a coluna */
    align-items: stretch;
  }

  .transp-pill{
    width: 100%;
    display: grid; place-items: center;

  
    /* quebra “educada”: só quando precisar */
    white-space: normal;
    overflow-wrap: break-word;   /* alias: word-wrap */
    word-break: normal;          /* evita fatiar sem necessidade */
    /* se quiser forçar a quebrar em qualquer ponto, troque por:
       overflow-wrap:anywhere; word-break:break-word; */

    text-align: center; line-height: 1.12;
    height: auto; min-height: 38px;
    padding: 8px 9px;
    border-radius: 10px;
    font-size: 8.4px;
  }
}