/* =========================================================
   ASEMPAR — Estilos complementares ao Tailwind
   Componentes, animações e temas do site.
   ========================================================= */

:root{
  --azul-900:#0a1f5c;
  --azul-800:#142a94;
  --azul-700:#1a35b8;
  --azul-600:#2b4bd8;
  --azul-100:#e9edfb;
  /* Verde da marca (oval do logo). Contraste medido:
     - texto azul-900 sobre verde-500 = 5.56:1  -> botões usam texto escuro
     - verde-400 sobre azul-900       = 8.37:1  -> acento em fundo escuro
     - verde-700 sobre branco         = 5.52:1  -> verde como texto em fundo claro */
  --verde-100:#e8f8e9;
  --verde-400:#3ddb41;
  --verde-500:#16b41a;
  --verde-600:#0e8f12;
  --verde-700:#0b7a0f;
  --tinta:#0f172a;
  --cinza:#5b6b7f;
  --borda:#e4e9f0;
  --fundo:#f7f9fc;
  --raio:16px;
  --sombra-sm:0 1px 2px rgba(10,31,92,.06), 0 4px 12px rgba(10,31,92,.05);
  --sombra-md:0 8px 30px rgba(10,31,92,.09);
  --sombra-lg:0 24px 60px rgba(10,31,92,.14);
  --header-h:76px;
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:#fff;
  overflow-x:hidden;
  transition:opacity .25s ease;
}

/* Evita flash de conteudo sem estilo enquanto o Tailwind CDN compila */
html.tw-loading body{ opacity:0; }

::selection{ background:var(--azul-700); color:#fff; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--fundo); }
::-webkit-scrollbar-thumb{ background:#c2cedd; border-radius:8px; border:2px solid var(--fundo); }
::-webkit-scrollbar-thumb:hover{ background:var(--azul-600); }

/* ---------- Tipografia ---------- */
.txt-gradiente{
  background:linear-gradient(100deg,var(--verde-400) 0%,var(--verde-500) 45%,#8ef08f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.chapeu{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-size:.95rem; line-height:1;
  padding:.95rem 1.6rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease,
             background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primario{
  background:linear-gradient(135deg,var(--verde-500),var(--verde-400));
  color:#0a1f5c; box-shadow:0 10px 24px -8px rgba(22,180,26,.75);
}
.btn-primario:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(22,180,26,.9); }

.btn-azul{
  background:linear-gradient(135deg,var(--azul-700),var(--azul-600));
  color:#fff; box-shadow:0 10px 24px -10px rgba(26,53,184,.8);
}
.btn-azul:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(26,53,184,.95); }

.btn-vidro{
  background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
}
.btn-vidro:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }

.btn-linha{ background:#fff; color:var(--azul-700); border-color:var(--borda); box-shadow:var(--sombra-sm); }
.btn-linha:hover{ border-color:var(--azul-600); color:var(--azul-800); transform:translateY(-2px); box-shadow:var(--sombra-md); }

.btn-sm{ padding:.62rem 1.1rem; font-size:.85rem; }

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.cabecalho.solido{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 2px 20px rgba(10,31,92,.08);
  border-bottom-color:var(--borda);
}

.link-nav{
  position:relative; font-weight:600; font-size:.94rem; padding:.4rem .1rem;
  color:#e8eef6; transition:color .2s ease;
}
.link-nav::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--verde-500); border-radius:2px; transition:width .28s ease;
}
.link-nav:hover::after,.link-nav.ativo::after{ width:100%; }
.link-nav:hover{ color:#fff; }
.cabecalho.solido .link-nav{ color:#40536b; }
.cabecalho.solido .link-nav:hover,
.cabecalho.solido .link-nav.ativo{ color:var(--azul-700); }

.menu-mobile{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.menu-mobile.aberto{ max-height:640px; opacity:1; }

.hamburguer span{
  display:block; height:2px; width:24px; background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .2s ease;
}
.hamburguer span + span{ margin-top:6px; }
.hamburguer.ativo span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburguer.ativo span:nth-child(2){ opacity:0; }
.hamburguer.ativo span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(43,75,216,.55), transparent 62%),
    radial-gradient(760px 520px at 6% 108%, rgba(22,180,26,.24), transparent 60%),
    linear-gradient(160deg,var(--azul-900) 0%, var(--azul-800) 45%, #1a2fa0 100%);
}
.hero-grade{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 32%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 82% 62% at 50% 32%,#000 35%,transparent 78%);
}
.bolha{
  position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none;
  animation:flutuar 16s ease-in-out infinite;
}
@keyframes flutuar{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(28px,-34px) scale(1.09); }
  66%{ transform:translate(-24px,22px) scale(.94); }
}
.onda-hero{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; pointer-events:none; }

/* Cartão flutuante do hero */
.cartao-3d{
  transform:perspective(1200px) rotateY(-14deg) rotateX(7deg);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  animation:balanco 7s ease-in-out infinite;
}
.cartao-3d:hover{ transform:perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(1.03); }
@keyframes balanco{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }

.brilho-cartao{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 46%,transparent 60%);
  background-size:280% 100%;
  animation:varrer 5.5s ease-in-out infinite;
}
@keyframes varrer{ 0%{ background-position:180% 0; } 55%,100%{ background-position:-80% 0; } }

/* ---------- Cards ---------- */
.cartao{
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra-sm);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.cartao:hover{ transform:translateY(-6px); box-shadow:var(--sombra-lg); border-color:#cfdcea; }

.cartao-beneficio{ position:relative; overflow:hidden; }
.cartao-beneficio::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(140deg,rgba(43,75,216,.06),rgba(22,180,26,.08));
}
.cartao-beneficio:hover::before{ opacity:1; }
.cartao-beneficio > *{ position:relative; }

.icone-caixa{
  display:grid; place-items:center; width:56px; height:56px; border-radius:14px;
  background:linear-gradient(140deg,var(--azul-100),#f2f7fc);
  color:var(--azul-700); border:1px solid #d9e6f3;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.cartao-beneficio:hover .icone-caixa{
  transform:rotate(-6deg) scale(1.08);
  background:linear-gradient(140deg,var(--azul-700),var(--azul-600)); color:#fff;
}

/* ---------- Convênios ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.05rem; border-radius:999px; font-size:.86rem; font-weight:600;
  background:#fff; color:#48596e; border:1px solid var(--borda); cursor:pointer;
  white-space:nowrap; transition:all .22s ease;
}
.chip:hover{ border-color:var(--azul-600); color:var(--azul-700); transform:translateY(-1px); }
.chip.ativo{
  background:linear-gradient(135deg,var(--azul-700),var(--azul-600));
  color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(26,53,184,.8);
}
.chip .contagem{ font-size:.72rem; padding:.1rem .42rem; border-radius:999px; background:rgba(0,0,0,.06); }
.chip.ativo .contagem{ background:rgba(255,255,255,.22); }

.cartao-convenio{ position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; }

.logo-convenio{
  width:60px; height:60px; border-radius:14px; object-fit:contain; background:#fff;
  border:1px solid var(--borda); padding:6px; flex:none;
}
.logo-iniciais{
  width:60px; height:60px; border-radius:14px; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:1.15rem; color:#fff; letter-spacing:.5px;
}

.selo-desconto{
  display:inline-flex; align-items:center; gap:.3rem;
  background:linear-gradient(135deg,#e8f8e9,#d3f2d5); color:#0a6b0d;
  border:1px solid #a8e3aa; font-weight:800; font-size:.78rem;
  padding:.32rem .7rem; border-radius:999px;
}
.tag-categoria{
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.24rem .6rem; border-radius:6px;
}
.fita-destaque{
  position:absolute; top:14px; right:-30px; transform:rotate(38deg);
  background:linear-gradient(135deg,var(--verde-500),var(--verde-400)); color:#0a1f5c;
  font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.28rem 2.2rem; box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.entrando{ animation:surgir .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes surgir{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

.esqueleto{
  background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);
  background-size:200% 100%; animation:brilhar 1.3s infinite; border-radius:12px;
}
@keyframes brilhar{ to{ background-position:-200% 0; } }

/* ---------- Estrutura e lazer ---------- */
.cartao-lazer{
  position:relative; overflow:hidden; border-radius:20px; min-height:250px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.6rem; color:#fff; isolation:isolate;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.cartao-lazer::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,31,92,.18) 0%,rgba(10,31,92,.86) 100%);
}
.cartao-lazer:hover{ transform:translateY(-8px); box-shadow:var(--sombra-lg); }
.cartao-lazer .capa{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.cartao-lazer:hover .capa{ transform:scale(1.09); }

/* ---------- Passos ---------- */
.linha-passos{ position:relative; }
.linha-passos::before{
  content:""; position:absolute; left:27px; top:44px; bottom:44px; width:2px;
  background:linear-gradient(180deg,var(--azul-600),rgba(43,75,216,.12));
}
@media (min-width:1024px){
  .linha-passos::before{
    left:0; right:0; top:27px; bottom:auto; height:2px; width:auto;
    background:linear-gradient(90deg,rgba(43,75,216,.12),var(--azul-600),rgba(43,75,216,.12));
  }
}
.numero-passo{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg,var(--azul-700),var(--azul-600)); color:#fff;
  font-weight:800; font-size:1.15rem; box-shadow:0 8px 20px -8px rgba(26,53,184,.9);
  border:4px solid #fff; position:relative; z-index:1;
}

/* ---------- Faixa de logos ---------- */
.marquise{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquise-trilha{ display:flex; gap:2.5rem; width:max-content; animation:correr 38s linear infinite; }
.marquise:hover .marquise-trilha{ animation-play-state:paused; }
@keyframes correr{ to{ transform:translateX(-50%); } }

/* ---------- Modal / Pop-up ---------- */
.sobreposicao{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1rem;
  background:rgba(10,31,92,.62); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.sobreposicao.aberto{ opacity:1; visibility:visible; }
.modal{
  position:relative;
  width:100%; max-width:470px; background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:var(--sombra-lg); transform:translateY(26px) scale(.95); opacity:0;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  max-height:92vh; overflow-y:auto;
}
.sobreposicao.aberto .modal{ transform:none; opacity:1; }

/* ---------- Botões flutuantes ---------- */
.zap{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.zap:hover{ transform:scale(1.1) rotate(6deg); }
.zap::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1;
  animation:pulsar 2.4s ease-out infinite;
}
@keyframes pulsar{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.75); opacity:0; } }

.subir{
  position:fixed; right:22px; bottom:90px; z-index:70;
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#fff; color:var(--azul-700); border:1px solid var(--borda); box-shadow:var(--sombra-md);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease;
}
.subir.visivel{ opacity:1; visibility:visible; transform:none; }
.subir:hover{ background:var(--azul-700); color:#fff; }

/* ---------- Rodapé ---------- */
.rodape{ background:linear-gradient(170deg,var(--azul-900),#071747); color:#b9cade; }
.rodape a{ transition:color .2s ease, transform .2s ease; }
.rodape a:hover{ color:#fff; }
.rede-social{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#dbe7f2;
  transition:all .25s ease;
}
.rede-social:hover{ background:var(--verde-500); color:#0a1f5c; transform:translateY(-3px); border-color:transparent; }

/* ---------- Acessibilidade ---------- */
.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--azul-800); padding:.8rem 1.2rem; border-radius:0 0 10px 0; font-weight:700;
}
.pular-para-conteudo:focus{ left:0; }
:focus-visible{ outline:3px solid var(--verde-500); outline-offset:3px; border-radius:6px; }

/* ---------- Impressão ---------- */
@media print{
  .cabecalho,.zap,.subir,.sobreposicao,.hero-grade,.bolha{ display:none !important; }
  body{ color:#000; }
}

/* =========================================================
   MARCA — logo oficial
   ========================================================= */
.marca-logo{
  height:52px; width:auto; flex:none;
  background:#fff; border-radius:14px; padding:4px;
  box-shadow:0 4px 14px rgba(10,31,92,.18);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease,
             background .3s ease, padding .3s ease;
}
/* Sobre o header já sólido (branco) a "pílula" é desnecessária. */
.cabecalho.solido .marca-logo{ box-shadow:none; background:transparent; padding:0; }
.marca-logo-rodape{ height:62px; }

/* =========================================================
   TRANSIÇÕES ENTRE SEÇÕES
   ========================================================= */

/* Barra de progresso de leitura, no topo absoluto da página. */
.progresso-leitura{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:80;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--verde-500),var(--verde-400),var(--azul-600));
  will-change:transform; pointer-events:none;
}

/* --- Divisor em onda: usado só nas trocas de alto contraste (claro <-> escuro) --- */
.divisor{
  position:relative; line-height:0; pointer-events:none;
  margin-top:-1px; margin-bottom:-1px;   /* mata a costura de subpixel */
}
.divisor svg{
  display:block; width:100%; height:clamp(48px,7vw,104px);
}
/* A onda desliza de leve conforme a rolagem (--desloc vem do JS).
   O SVG é mais largo que o contêiner para o deslocamento nunca expor a borda. */
.divisor-parallax{ overflow:hidden; }
.divisor-parallax svg{
  width:116%; margin-left:-8%;
  transform:translate3d(var(--desloc,0),0,0);
  will-change:transform;
}

/* --- Transição suave: usada entre seções claras, no lugar de um corte seco --- */
.transicao-suave{
  height:clamp(40px,6vw,72px);
  background:linear-gradient(to bottom,var(--de,#fff),var(--para,#f7f9fc));
  pointer-events:none;
}

/* --- Parallax dos elementos decorativos (aplicado pelo JS via --py) --- */
.parallax{ transform:translate3d(0,var(--py,0),0); will-change:transform; }

/* =========================================================
   Acessibilidade: nada disso roda para quem pede menos movimento
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .divisor-parallax svg,
  .parallax{ transform:none !important; }
  .progresso-leitura{ display:none; }
}

/* Em telas pequenas o parallax vira ruído e custa bateria. */
@media (max-width:767px){
  .divisor-parallax svg,
  .parallax{ transform:none !important; }
}

/* =========================================================
   MULTIPÁGINA — faixa de título, dropdowns, vitrine, feed
   ========================================================= */

/* Deslocamento quando a barra de aviso está ativa (definido por layout.js) */
.hero{ padding-top: calc(76px + var(--barra-h, 0px)); }
.cabecalho{ transition: top .2s ease, background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-color .3s ease; }

/* ---------- Faixa de título das páginas internas ---------- */
.faixa-titulo{
  position:relative; overflow:hidden;
  padding: calc(76px + var(--barra-h, 0px)) 0 3.2rem;
  background:
    radial-gradient(900px 480px at 82% -20%, rgba(43,75,216,.55), transparent 60%),
    radial-gradient(620px 420px at 4% 120%, rgba(22,180,26,.22), transparent 60%),
    linear-gradient(160deg,var(--azul-900), var(--azul-800) 60%, #1a2fa0);
  color:#fff;
}
.faixa-titulo .trilha{
  display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600;
  color:rgba(233,237,251,.6); margin-bottom:.9rem;
}
.faixa-titulo .trilha a:hover{ color:#fff; }
.faixa-titulo h1{
  font-size:clamp(2rem,4.5vw,3rem); font-weight:800; letter-spacing:-.02em; line-height:1.08;
}
.faixa-titulo p{ color:rgba(233,237,251,.78); font-size:1.075rem; max-width:44rem; margin-top:.9rem; line-height:1.6; }

/* ---------- Dropdowns do menu (desktop) ---------- */
.tem-drop{ position:relative; }
.tem-drop .seta{ transition:transform .25s ease; opacity:.8; }
.tem-drop:hover .seta,.tem-drop.aberto .seta{ transform:rotate(180deg); }
.drop-menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:230px; background:#fff; border:1px solid var(--borda); border-radius:14px;
  box-shadow:var(--sombra-lg); padding:.5rem; opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:70;
}
.tem-drop:hover .drop-menu,.tem-drop.aberto .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop-menu::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.drop-item{
  display:block; padding:.6rem .85rem; border-radius:9px; font-size:.9rem; font-weight:600;
  color:#40536b; transition:background .18s ease, color .18s ease;
}
.drop-item:hover{ background:var(--azul-100); color:var(--azul-700); }
.drop-item.ativo{ background:var(--verde-100); color:var(--verde-700); }

/* ---------- Menu mobile: grupos com acordeão ---------- */
.mob-item{ padding:.75rem .2rem; font-weight:600; color:#334155; border-bottom:1px solid #f1f5f9; }
.mob-item.ativo{ color:var(--azul-700); }
.mob-grupo .mob-filhos{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding-left:.6rem; }
.mob-grupo.aberto .mob-filhos{ max-height:360px; }
.mob-grupo .seta{ transition:transform .25s ease; }
.mob-grupo.aberto .seta{ transform:rotate(180deg); }
.mob-sub{ display:block; padding:.6rem .2rem; font-size:.92rem; font-weight:500; color:#5b6b7f; border-bottom:1px solid #f8fafc; }
.mob-sub.ativo{ color:var(--verde-700); font-weight:700; }

/* Cabeçalho sólido: logo/menu ficam escuros; transparente: claros */
.logo-nome{ color:#fff; } .logo-sub{ color:rgba(255,255,255,.6); }
.cabecalho.solido .logo-nome{ color:var(--azul-900); }
.cabecalho.solido .logo-sub{ color:#94a3b8; }
.cabecalho .hamburguer{ color:#fff; }
.cabecalho.solido .hamburguer{ color:var(--azul-800); }
.cabecalho.solido .marca-logo{ box-shadow:none; background:transparent; padding:0; }

/* ---------- Vitrine de patrocinadores (espaço pago) ---------- */
.grade-vitrine{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.cartao-patro{
  position:relative; display:block; background:#fff; border:1px solid var(--borda); border-radius:18px;
  overflow:hidden; box-shadow:var(--sombra-sm); text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.cartao-patro:hover{ transform:translateY(-6px); box-shadow:var(--sombra-lg); border-color:#cfdcea; }
.patro-capa{ height:96px; background-size:cover; background-position:center; }
.patro-selo{
  position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:.3rem;
  background:linear-gradient(135deg,var(--verde-500),var(--verde-400)); color:var(--azul-900);
  font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px; box-shadow:0 4px 10px rgba(22,180,26,.4);
}
.patro-corpo{ display:flex; gap:1rem; align-items:center; padding:1.1rem; margin-top:-34px; position:relative; }
.patro-logo .logo-convenio,.patro-logo .logo-iniciais{ width:64px; height:64px; box-shadow:var(--sombra-md); border:3px solid #fff; }

/* ---------- Letreiro de logos ---------- */
.logo-letreiro{ display:inline-flex; align-items:center; gap:.6rem; height:56px; padding:0 .4rem; }
.logo-letreiro img{ max-height:52px; max-width:150px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .25s ease, opacity .25s ease; }
.marquise:hover .logo-letreiro img{ filter:grayscale(0); opacity:1; }
.logo-iniciais-sm{ width:40px; height:40px; font-size:.9rem; border-radius:11px; }
.logo-letreiro-nome{ font-weight:700; color:#64748b; white-space:nowrap; }
.logo-convenio-sm{ width:44px; height:44px; }

/* line-clamp utilitário */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Área do Associado: botão de saldo ---------- */
.cartao-saldo{
  background:linear-gradient(135deg,var(--azul-800),var(--azul-700) 60%, #2b4bd8);
  color:#fff; border-radius:22px; padding:2rem; position:relative; overflow:hidden;
  box-shadow:var(--sombra-lg);
}
.cartao-saldo .brilho-cartao{ opacity:.5; }

/* ---------- Feed do Facebook ---------- */
.fb-feed{ display:flex; justify-content:center; }
.fb-feed iframe{ border-radius:14px; box-shadow:var(--sombra-md); background:#fff; }