@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{

  /* ---- cores extraídas do logo ---- */
  --gold-200:#ffe9a8;
  --gold-300:#ffd166;
  --gold-500:#f7b32b;
  --gold-600:#e0900f;

  --coral-400:#ff8a4c;
  --coral-500:#ff6a3d;

  --pink-300:#ffa8cf;
  --pink-500:#ff4f9a;
  --magenta-600:#d61f9c;

  --violet-500:#a45cf0;
  --violet-600:#8a2be2;
  --purple-700:#5b1fa8;

  --cyan-200:#a6f0ff;
  --cyan-400:#35d6f0;
  --cyan-600:#0fa8c8;

  --indigo-900:#1a0f4e;
  --night-900:#0a0722;
  --night-800:#120c33;
  --night-700:#1b1247;

  --cream:#fdf7ff;
  --cream-dim:#e8dcf5;
  --muted:#b9a9d4;

  /* ---- gradiente-assinatura (o do logo) ---- */
  --grad-brand: linear-gradient(115deg,
      #f7b32b 0%, #ff8a4c 22%, #ff4f9a 45%,
      #a45cf0 68%, #35d6f0 100%);
  --grad-brand-soft: linear-gradient(115deg,
      rgba(247,179,43,.85), rgba(255,79,154,.85),
      rgba(164,92,240,.85), rgba(53,214,240,.85));
  --grad-sunset: linear-gradient(180deg, #ffd166 0%, #ff6a3d 45%, #d61f9c 100%);
  --grad-deep:   linear-gradient(165deg, #1b1247 0%, #120c33 55%, #0a0722 100%);

  /* ---- glassmorphism ---- */
  --glass:        rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.15);
  --glass-line:   rgba(255,255,255,0.18);
  --glass-line-hi:rgba(255,255,255,0.32);
  --blur: saturate(160%) blur(18px);

  /* ---- geometria ---- */
  --shell: min(100% - 28px, 680px);   /* largura do "prédio" */
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;

  /* ---- sombras ---- */
  --sh-soft: 0 10px 30px rgba(6,3,25,.45);
  --sh-lift: 0 22px 55px rgba(6,3,25,.6);
  --sh-glow: 0 0 0 1px rgba(255,255,255,.07), 0 18px 45px rgba(90,20,150,.35);

  /* ---- tipografia ---- */
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Manrope", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.68,0,1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--cream);
  background:var(--night-900);
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
mark{
  background:linear-gradient(180deg, transparent 55%, rgba(247,179,43,.55) 55%);
  color:inherit; border-radius:3px; padding:0 2px;
}
::selection{ background:rgba(255,79,154,.35); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--night-900); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--violet-600),var(--magenta-600));
  border-radius:20px; border:2px solid var(--night-900);
}

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

/* ==========================================================================
   3. FUNDO — auroras, pôr do sol e grão (estáticos, sem animação contínua)
   ========================================================================== */
.aurora-bg{
  position:fixed; inset:0; z-index:-5;
  background:var(--grad-deep);
}
/* halo de pôr do sol no topo, lembrando o logo */
.aurora-bg::after{
  content:""; position:absolute; left:50%; top:-18vh;
  width:min(1100px,150vw); height:min(1100px,150vw);
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,
     rgba(247,179,43,.20) 0%, rgba(255,106,61,.16) 26%,
     rgba(214,31,156,.14) 46%, rgba(90,30,170,.10) 66%, transparent 74%);
  filter:blur(20px); pointer-events:none;
}

.aurora-layer{
  position:fixed; z-index:-4; border-radius:50%;
  filter:blur(70px); opacity:.5; pointer-events:none;
}
.aurora-layer.l1{
  width:60vw; height:60vw; max-width:640px; max-height:640px;
  top:-8vh; left:-14vw;
  background:radial-gradient(circle, rgba(255,79,154,.55), transparent 68%);
}
.aurora-layer.l2{
  width:66vw; height:66vw; max-width:700px; max-height:700px;
  top:34vh; right:-20vw;
  background:radial-gradient(circle, rgba(53,214,240,.42), transparent 68%);
}
.aurora-layer.l3{
  width:56vw; height:56vw; max-width:600px; max-height:600px;
  bottom:-14vh; left:8vw;
  background:radial-gradient(circle, rgba(164,92,240,.50), transparent 70%);
}

/* grão fino, tira o "plástico" do gradiente */
.grain{
  position:fixed; inset:-50%; z-index:-3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* efeito de água removido a pedido — tirado 100% (era pesado demais). */

/* ==========================================================================
   4. ORNAMENTOS DE BORDA — conchas, flores e ramos (sem glow, sem pulso)
   ========================================================================== */
.ornament{
  position:fixed; z-index:-2; width:190px; height:190px;
  opacity:.3; pointer-events:none;
}
.ornament svg{ width:100%; height:100%; }
.ornament.tl{ top:0;    left:0; }
.ornament.tr{ top:0;    right:0;  transform:scaleX(-1); }
.ornament.bl{ bottom:0; left:0;   transform:scaleY(-1); }
.ornament.br{ bottom:0; right:0;  transform:scale(-1,-1); }

/* faixa lateral de motivos (só desktop largo) */
.ornament-rail{
  position:fixed; top:0; bottom:0; width:80px; z-index:-2;
  opacity:.16; pointer-events:none; display:none;
  background-repeat:repeat-y; background-size:80px 240px;
}
.ornament-rail.left{ left:0; }
.ornament-rail.right{ right:0; transform:scaleX(-1); }

@media (max-width:780px){
  .ornament{ width:118px; height:118px; opacity:.22; }
}
@media (min-width:1180px){
  .ornament-rail{ display:block; }
}

/* ==========================================================================
   5. SHELL / "PRÉDIO"
   ========================================================================== */
.wrap{
  width:var(--shell);
  margin-inline:auto;
}
main{ display:block; }

section{ scroll-margin-top:24px; }

/* ==========================================================================
   6. HEADER — 3 blocos empilhados, fixo, centralizado
   ========================================================================== */
/* Header É PARTE DO PRÉDIO: mesma largura do resto do site,
   centralizado, sem faixa cheia de ponta a ponta. */
.site-header{
  position:relative; z-index:50;
  width:var(--shell);
  margin:14px auto 0;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:16px 14px 18px;
  border-radius:var(--r-xl);
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-soft);
}
/* fio de luz com o gradiente do logo, agora acompanhando os cantos arredondados */
.site-header::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:var(--r-xl);
  padding:1px;
  background:var(--grad-brand);
  opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* --- logo: sem contorno circular --- */
.header-logo-box{ line-height:0; }
.header-logo-box a{ display:inline-block; }
.header-logo-box img{
  height:62px; width:auto; object-fit:contain;
  background:none; border:none; border-radius:0;
  filter:drop-shadow(0 6px 16px rgba(255,79,154,.30));
  transition:transform .4s var(--ease), filter .4s var(--ease);
}

/* --- navegação --- */
/* grade fixa 4 × 2 — duas linhas de quatro botões, sempre centralizada */
.header-nav-box{ width:100%; }
.header-nav-box ul{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
}
.header-nav-box li{ min-width:0; }
.header-nav-box a{
  display:flex; align-items:center; justify-content:center;
  height:100%; text-align:center; text-decoration:none;
  font-size:clamp(.56rem, 2.35vw, .72rem);
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.15;
  color:var(--cream-dim);
  padding:9px 6px; border-radius:999px;
  border:1px solid var(--glass-line);
  background:var(--glass);
  transition:.3s var(--ease);
  white-space:nowrap;
}
.header-nav-box a.active{
  color:#160a2b;
  background:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(214,31,156,.35);
}
.header-nav-box a:focus-visible{ outline:2px solid var(--cyan-200); outline-offset:2px; }

/* --- barra de ícones: sociais + login Google --- */
.header-social-box{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px;
}
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; color:var(--cream);
  border:1px solid var(--glass-line);
  background:var(--glass);
  transition:.3s var(--ease);
}
.icon-btn svg{ width:17px; height:17px; }

/* botão Google */
.google-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 10px; border-radius:999px;
  font-family:var(--font-body); font-size:.74rem; font-weight:700;
  letter-spacing:.02em; cursor:pointer; text-decoration:none;
  color:var(--cream);
  border:1px solid var(--glass-line);
  background:var(--glass-strong);
  transition:.3s var(--ease);
}
.google-btn svg{ width:16px; height:16px; flex:none; }
.google-btn .g-avatar{
  width:20px; height:20px; border-radius:50%; object-fit:cover;
  border:1px solid var(--glass-line-hi);
}

/* header não é mais fixo → o espaçador deixa de existir */
.header-spacer{ display:none; }

@media (max-width:640px){
  .site-header{ padding:13px 10px 15px; gap:9px; margin-top:10px; }
  .header-logo-box img{ height:56px; }
  .header-nav-box ul{ gap:5px; }
  .header-nav-box a{ padding:9px 3px; letter-spacing:.01em; }
  .header-social-box{ gap:6px; }
  .icon-btn{ width:31px; height:31px; }
  .icon-btn svg{ width:15px; height:15px; }
  .google-btn{ font-size:.68rem; padding:6px 12px 6px 9px; }
}
@media (max-width:360px){
  .header-nav-box a{ font-size:.52rem; padding:8px 2px; }
}

/* ==========================================================================
   7. SUPERFÍCIES DE VIDRO
   ========================================================================== */
.glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-soft);
  overflow:hidden;
}
/* brilho de topo (o "vidro molhado") */
.glass::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 42%);
}
/* fio colorido no topo */
.glass.edge::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-brand); opacity:.85;
}

.plaque{
  padding:30px 22px;
  border-radius:var(--r-xl);
}

/* --------------------------------------------------------------------
   FALLBACK DE VIDRO — garante o cartão visível em QUALQUER dispositivo.
   Quando o backdrop-filter não é suportado (ou não é composto pelo
   navegador — comum em WebViews de apps como Instagram/WhatsApp,
   Modo de Baixo Consumo no iPhone, Android mais antigo), o vidro
   perde o desfoque mas ganha mais opacidade de fundo pra continuar
   lendo como um cartão, nunca como "texto solto".
   -------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  :root{
    --glass:        rgba(24,14,56,.62);
    --glass-strong: rgba(24,14,56,.74);
  }
}
@media (prefers-reduced-transparency: reduce){
  :root{
    --glass:        rgba(24,14,56,.62);
    --glass-strong: rgba(24,14,56,.74);
  }
}

/* ==========================================================================
   8. TIPOGRAFIA DE SEÇÃO
   ========================================================================== */
.eyebrow{
  display:inline-block;
  font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:10px;
}
.title{
  font-family:var(--font-display);
  font-weight:700; line-height:1.12; letter-spacing:-.01em;
  font-size:clamp(1.6rem, 6.2vw, 2.3rem);
  margin:0 0 12px;
  color:var(--cream);
  text-shadow:0 2px 18px rgba(164,92,240,.35);
}
.title .grad{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle{
  margin:0; color:var(--cream-dim); font-size:.96rem; line-height:1.65;
}
.section-head{ text-align:center; margin-bottom:20px; }

/* ==========================================================================
   9. BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:999px; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:.82rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  transition:.35s var(--ease);
}
.btn-primary{
  color:#160a2b; background:var(--grad-brand);
  box-shadow:0 14px 30px rgba(214,31,156,.38);
}
.btn-ghost{
  color:var(--cream); background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
}
.btn:focus-visible{ outline:2px solid var(--cyan-200); outline-offset:3px; }

/* ==========================================================================
   10. INTRO + BUSCA
   ========================================================================== */
.intro-section{ padding:6px 0 22px; }
.intro-plaque{ text-align:center; }
.intro-plaque .title{ font-size:clamp(1.5rem, 5.6vw, 2.1rem); }
.intro-plaque .subtitle{ max-width:46ch; margin:0 auto; font-size:.92rem; }

.search-wrap{ margin-top:22px; }
.search-box{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px 9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px rgba(6,3,25,.45);
  transition:.3s var(--ease);
}
.search-box:focus-within{
  border-color:rgba(255,168,207,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 4px rgba(255,79,154,.14), 0 16px 38px rgba(6,3,25,.5);
}
.search-box > svg{ flex:none; width:19px; height:19px; color:var(--pink-300); }
.search-box input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:var(--font-body); font-size:.95rem; font-weight:600; color:var(--cream);
}
.search-box input::placeholder{ color:var(--muted); font-weight:500; }
.search-box button{
  flex:none; border:none; cursor:pointer;
  padding:11px 20px; border-radius:999px;
  font-family:var(--font-body); font-size:.76rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:#160a2b; background:var(--grad-brand);
  box-shadow:0 8px 20px rgba(214,31,156,.4);
  transition:.3s var(--ease);
}

.search-meta{
  margin:12px 4px 0; min-height:1.2em;
  font-size:.84rem; font-weight:600; color:var(--pink-300); text-align:center;
}

/* filtros rápidos por categoria */
.chip-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:16px;
}
.chip{
  padding:6px 13px; border-radius:999px; cursor:pointer;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cream-dim); background:var(--glass);
  border:1px solid var(--glass-line); transition:.3s var(--ease);
}
.chip.on{ color:#160a2b; background:var(--grad-brand); border-color:transparent; }

/* ==========================================================================
   11. ACORDEÃO A–Z
   ========================================================================== */
.directory-section{ padding:8px 0 60px; }
.directory-inner{
  display:flex; flex-direction:column; gap:10px;
}

.letter-group{
  border-radius:var(--r-lg);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-soft);
  overflow:hidden;
  transition:.35s var(--ease);
}
.letter-group.open{
  border-color:rgba(255,168,207,.35);
  box-shadow:var(--sh-glow);
}
.letter-group.is-hidden{ display:none; }

.letter-toggle{
  width:100%; display:flex; align-items:center; gap:13px;
  padding:14px 16px; border:none; cursor:pointer;
  background:transparent; text-align:left; color:var(--cream);
  font-family:var(--font-body);
  transition:.3s var(--ease);
}
.letter-toggle:focus-visible{ outline:2px solid var(--cyan-200); outline-offset:-3px; }

.letter-badge{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  border-radius:14px;
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  color:#160a2b; background:var(--grad-brand);
  box-shadow:0 8px 18px rgba(214,31,156,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:.4s var(--ease);
}
.letter-group.open .letter-badge{ transform:rotate(-6deg) scale(1.05); }

.letter-count{
  flex:1; font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.01em;
}
.letter-toggle .chevron{
  flex:none; width:19px; height:19px; color:var(--pink-300);
  transition:transform .4s var(--ease);
}
.letter-group.open .chevron{ transform:rotate(180deg); }

.letter-panel{
  max-height:0; overflow:hidden;
  transition:max-height .55s var(--ease);
}
.letter-group.open .letter-panel{ max-height:6000px; }

.company-list{
  display:flex; flex-direction:column; gap:9px;
  padding:2px 12px 14px;
}
.empty-note{
  margin:0; padding:2px 18px 18px;
  font-size:.83rem; color:var(--muted); line-height:1.6;
}

/* ---- cartão da empresa (mini cartão de vidro) ---- */
.company-card{
  border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  border:1px solid var(--glass-line);
  overflow:hidden;
  transition:.4s var(--ease);
}
.company-card.open{
  border-color:rgba(53,214,240,.35);
  background:rgba(255,255,255,.08);
}
.company-card.is-hidden{ display:none; }
.company-card.no-match{ opacity:.28; }

.company-toggle{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:13px 14px; border:none; cursor:pointer;
  background:transparent; text-align:left; color:var(--cream);
  font-family:var(--font-body);
}
.company-toggle:focus-visible{ outline:2px solid var(--cyan-200); outline-offset:-3px; }
.company-toggle .txt{ flex:1; min-width:0; }
.company-toggle h3{
  margin:0 0 2px; font-family:var(--font-display);
  font-size:1rem; font-weight:600; line-height:1.25; color:var(--cream);
}
.company-toggle .owners{
  margin:0; font-size:.78rem; font-weight:600; color:var(--muted);
}
.tag-pill{
  flex:none; padding:4px 10px; border-radius:999px;
  font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cyan-200);
  background:rgba(53,214,240,.10);
  border:1px solid rgba(53,214,240,.30);
}
.company-toggle .mini-chevron{
  flex:none; width:15px; height:15px; color:var(--pink-300);
  transition:transform .4s var(--ease);
}
.company-card.open .mini-chevron{ transform:rotate(180deg); }

.company-detail{
  max-height:0; overflow:hidden; transition:max-height .5s var(--ease);
}
.company-card.open .company-detail{ max-height:800px; }
.company-detail-inner{
  padding:0 14px 15px;
  border-top:1px solid var(--glass-line);
  margin-top:2px; padding-top:13px;
}
.company-detail-inner p{
  margin:0 0 9px; font-size:.87rem; line-height:1.65; color:var(--cream-dim);
}
.detail-products{
  font-size:.79rem !important; font-weight:700; color:var(--gold-300) !important;
}
.detail-socials{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.detail-socials a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  font-size:.74rem; font-weight:700; color:var(--cream);
  background:var(--glass); border:1px solid var(--glass-line);
  transition:.3s var(--ease);
}
.detail-socials svg{ width:14px; height:14px; }

/* ==========================================================================
   12. BENTO GRID  (para index, projetos, vitrine, eventos)
   ========================================================================== */
.bento{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.bento-item{
  position:relative;
  padding:20px 18px;
  border-radius:var(--r-lg);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-soft);
  transform:translateZ(0); /* força camada de composição p/ o blur do vidro renderizar em todos os navegadores */
  will-change:transform;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
  overflow:hidden;
  min-height:150px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.bento-item::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.13), transparent 45%);
}
/* mancha de cor que "vaza" do gradiente do logo */
.bento-item::after{
  content:""; position:absolute; width:180px; height:180px; right:-60px; top:-60px;
  border-radius:50%; opacity:.28; filter:blur(34px); pointer-events:none;
  background:var(--grad-brand); transition:opacity .5s var(--ease);
}

.bento-item.wide{ grid-column:span 2; }
.bento-item.tall{ grid-row:span 2; }

.bento-icon{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:12px;
  color:#160a2b; background:var(--grad-brand);
  box-shadow:0 10px 22px rgba(214,31,156,.32);
  position:relative; z-index:1;
}
.bento-icon svg{ width:21px; height:21px; }
.bento-item h3{
  position:relative; z-index:1;
  margin:0 0 6px; font-family:var(--font-display);
  font-size:1.02rem; font-weight:600; color:var(--cream);
}
.bento-item p{
  position:relative; z-index:1;
  margin:0; font-size:.83rem; line-height:1.6; color:var(--cream-dim);
}
.bento-item .b-tag{
  position:relative; z-index:1;
  align-self:flex-start; margin-bottom:8px;
  padding:4px 10px; border-radius:999px;
  font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-200); background:rgba(247,179,43,.10);
  border:1px solid rgba(247,179,43,.30);
}
/* número grande (para "A rede em números") */
.bento-num{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(1.8rem,7vw,2.6rem);
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:4px;
}

@media (max-width:430px){
  .bento{ grid-template-columns:1fr; }
  .bento-item.wide{ grid-column:span 1; }
  .bento-item.tall{ grid-row:span 1; }
}

/* ==========================================================================
   13. HERO / STORYTELLING (index)
   ========================================================================== */
.hero{ padding:10px 0 26px; text-align:center; }
.hero-logo img{
  width:min(300px,72vw); margin:0 auto 18px;
  filter:drop-shadow(0 18px 45px rgba(214,31,156,.4));
}
.hero .title{ font-size:clamp(1.9rem,8vw,2.8rem); }
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px; }

.story-section{ padding:34px 0; }
.story-block{ padding:28px 22px; }
.story-block + .story-block{ margin-top:14px; }
.story-block p{ font-size:.92rem; line-height:1.75; color:var(--cream-dim); margin:0 0 12px; }
.story-block p:last-child{ margin-bottom:0; }

/* lista de valores / conselho */
.list-clean{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.list-clean li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.88rem; line-height:1.6; color:var(--cream-dim);
}
.list-clean li::before{
  content:""; flex:none; width:9px; height:9px; margin-top:7px;
  border-radius:50%; background:var(--grad-brand);
  box-shadow:0 0 10px rgba(255,79,154,.6);
}
.list-clean strong{ color:var(--cream); font-weight:700; }

/* ==========================================================================
   14. PESSOAS (diretoria / conselho / minibio)
   ========================================================================== */
.people-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px;
}
@media (max-width:430px){ .people-grid{ grid-template-columns:1fr; } }

.person-card{
  padding:18px 16px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  transition:.4s var(--ease); text-align:center;
}
.person-avatar{
  width:66px; height:66px; margin:0 auto 11px; border-radius:50%;
  object-fit:cover; padding:3px;
  background:var(--grad-brand);
  box-shadow:0 10px 24px rgba(214,31,156,.3);
}
.person-card h4{
  margin:0 0 3px; font-family:var(--font-display);
  font-size:.95rem; font-weight:600; color:var(--cream);
}
.person-role{
  margin:0 0 8px; font-size:.68rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.person-bio{ margin:0; font-size:.8rem; line-height:1.6; color:var(--cream-dim); }

/* ==========================================================================
   15. ÁREA RESTRITA / CARTEIRINHA / MEMBROS
   ========================================================================== */
.gate{
  text-align:center; padding:40px 24px; margin:20px 0;
}
.gate .lock-icon{
  width:58px; height:58px; margin:0 auto 16px; border-radius:20px;
  display:grid; place-items:center; color:#160a2b;
  background:var(--grad-brand); box-shadow:0 14px 30px rgba(214,31,156,.35);
}
.gate .lock-icon svg{ width:26px; height:26px; }

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.status-pill::before{ content:""; width:8px; height:8px; border-radius:50%; }
.status-pill.ativa{
  color:#0a3b2e; background:linear-gradient(120deg,#7ef0c0,#35d6f0);
}
.status-pill.ativa::before{ background:#0a3b2e; }
.status-pill.pendente{
  color:#3b1c00; background:linear-gradient(120deg,#ffd166,#ff8a4c);
}
.status-pill.pendente::before{ background:#3b1c00; }
.status-pill.inativa{
  color:var(--cream); background:rgba(255,255,255,.10); border:1px solid var(--glass-line);
}
.status-pill.inativa::before{ background:var(--muted); }

/* carteirinha digital */
.member-card{
  position:relative; padding:22px 20px; border-radius:var(--r-xl);
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line-hi);
  box-shadow:var(--sh-lift);
  overflow:hidden; text-align:center;
}
.member-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(247,179,43,.14), rgba(255,79,154,.12), rgba(53,214,240,.14));
}
.member-card > *{ position:relative; z-index:1; }
.member-card .qr-box{
  width:190px; height:190px; margin:16px auto 14px;
  background:#fff; border-radius:var(--r-md); padding:10px;
  box-shadow:0 14px 34px rgba(6,3,25,.5);
  display:grid; place-items:center;
}
.member-card .qr-box canvas,
.member-card .qr-box img,
.member-card .qr-box svg{ width:100%; height:100%; }
.member-meta{ font-size:.78rem; color:var(--muted); margin:4px 0 0; }

/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
.site-footer{
  width:var(--shell);
  margin:40px auto 26px;
  padding:30px 20px 32px;
  border-radius:var(--r-xl);
  border:1px solid var(--glass-line);
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--sh-soft);
  text-align:center;
}
.site-footer img{ height:70px; width:auto; margin:0 auto 14px; }
.site-footer p{ margin:5px 0; font-size:.8rem; color:var(--muted); }
.site-footer a{ color:var(--pink-300); text-decoration:none; }
.footer-socials{ display:flex; justify-content:center; gap:9px; margin:14px 0 18px; }

/* ==========================================================================
   16.5 CAIXA DE DOWNLOAD (PWA — Android / iOS)
   ========================================================================== */
.download-box{
  width:var(--shell);
  margin:34px auto 0;
  text-align:center;
  padding:32px 22px;
}
.download-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:18px;
}
.download-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:16px;
  text-decoration:none; cursor:pointer; border:1px solid var(--glass-line-hi);
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  transition:.35s var(--ease);
  min-width:180px;
}
.download-icon{
  flex:none; width:30px; height:30px; color:var(--cream);
  transition:color .3s var(--ease);
}
.download-text{
  text-align:left; display:flex; flex-direction:column; color:var(--cream);
  transition:color .3s var(--ease);
}
.download-text small{
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.download-text strong{ font-size:.9rem; font-weight:800; }
.download-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* modal simples de instruções (iOS não tem prompt nativo de instalação) */
.ios-modal-backdrop{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,3,20,.72);
  display:flex; align-items:flex-end; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
@media (min-width:640px){ .ios-modal-backdrop{ align-items:center; } }
.ios-modal{
  width:min(440px, 92vw);
  margin-bottom:14px;
  padding:26px 22px;
  border-radius:var(--r-xl);
  background:var(--night-800);
  border:1px solid var(--glass-line-hi);
  box-shadow:var(--sh-lift);
}
@media (min-width:640px){ .ios-modal{ margin-bottom:0; } }
.ios-modal h3{
  margin:0 0 12px; font-family:var(--font-display); font-size:1.05rem; color:var(--cream);
}
.ios-modal ol{ margin:0 0 18px; padding-left:20px; color:var(--cream-dim); font-size:.86rem; line-height:1.9; }
.ios-modal .share-icon{
  display:inline-flex; vertical-align:middle; width:16px; height:16px; margin:0 3px;
  color:var(--cyan-200);
}
.ios-modal .btn{ width:100%; }

/* ==========================================================================
   17. VOLTAR AO TOPO
   ========================================================================== */
.back-to-top{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  color:#160a2b; background:var(--grad-brand);
  box-shadow:0 12px 26px rgba(214,31,156,.45);
  transition:.35s var(--ease);
}
.back-to-top svg{ width:17px; height:17px; }
.back-to-top:focus-visible{ outline:2px solid var(--cyan-200); outline-offset:3px; }
@media (max-width:640px){ .back-to-top{ right:12px; bottom:12px; width:36px; height:36px; } }

/* ==========================================================================
   18. REVEAL — removido a pedido (efeito de "aparecer ao rolar" tirado
   por completo). Os elementos com data-reveal no HTML ficam visíveis
   normalmente, sem nenhuma transição — o atributo agora é só decorativo.
   ========================================================================== */

/* ==========================================================================
   19. UTILITÁRIOS
   ========================================================================== */
.center{ text-align:center; }
.mt-s{ margin-top:12px; } .mt-m{ margin-top:22px; } .mt-l{ margin-top:34px; }
.hidden{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}