/* ========= BASE ========= */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100% ; display:block; height:auto; }
:root{
  --bg:#000000;           /* fundo quase preto */
  --panel:#101016;        /* painéis */
  --text:#f8fafc;         /* texto principal */
  --muted:#cbd5e1;        /* parágrafos */
  --line:#262634;         /* linhas discretas */
  --brand:#ffffff;
  --accent-purple:#9734C7;
  --accent-orange:#EDB500;
  --accent-red:#ef4444;
  --radius:22px;
}

body{
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}



.nowrap{ white-space:nowrap; }
.muted{ color:var(--muted); }

.container{ width:min(1180px,92vw); margin-inline:auto; }

/* ========= HEADER ========= */
.site-header{
  position: sticky; top:0; z-index:30;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: saturate(130%) blur(8px);
  /*border-bottom:1px solid var(--line);*/
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.logo-mini{
  font-weight:800; color:#fff; opacity:.9; letter-spacing:.08em;
  margin-right: 5px;
}
.site-nav ul{
  display:flex; gap: clamp(12px, 2.8vw, 30px);
  list-style:none; margin:0; padding:0; flex-wrap: nowrap;
  align-items: center;
}
.site-nav a, .logo-mini a{
  color:#e5e7eb; text-decoration:none; font-size:14px;
}
.site-nav a:hover{ color:#fff; }
.cta-nav{
  border:1px solid var(--accent-orange);
  color:#fff; padding:6px 12px;
  white-space: nowrap;
}


#home{
  margin: 200px auto 100px auto; text-align:center;
  padding: 0 

}

/* ========= HERO ========= */
.hero{ height: 50vh; max-width: 900px; }
.brandline{
  font-size: clamp(40px, 8vw, 86px);
  margin:0;
  letter-spacing:.02em;
  font-weight:900;
  color:#fff;
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 16px 60px rgba(255,255,255,.06);
}
.brandline .at{
  font-weight: 900;
  margin-right: 6px;
}
.subbrand{
  margin-top:6px; color:#e2e8f0; opacity:.9;
  letter-spacing:.24em; text-transform:lowercase;
  font-size: clamp(14px, 2.4vw, 20px);
}

/* ========= PILL CARDS ========= */
.img-title{ width: auto; height: 50px; object-fit: contain; }
.pei{ display:grid; gap:26px; }
.pill-card{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px, 3vw, 40px);
  align-items:center;
  background: var(--bg);
  border:2px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 3.2vw, 28px) clamp(16px, 3.2vw, 28px) 0;
  position:relative;
  /*overflow:hidden;*/
  z-index: 0;
  
}
.pill-title{
  margin:0 0 50px 0;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing:.04em;
  font-weight:900;
}
.protect{ color:#fff; text-shadow: 0 0 0 rgba(0,0,0,0); }
.empower{ color:var(--accent-purple); }
.influence{ color:var(--accent-orange); }

.pill-copy p{ color: var(--muted); margin: 0 0 8px 0; }
.pill-media img {
  width: 100%;
  aspect-ratio: 0.8/1;
  object-fit: scale-down;
  border-radius: 14px;
  position: relative;
  top: -40px; /* Ajuste este valor para controlar o quanto a imagem sobe acima da borda */
  left: 65%;
  transform: translateX(-50%);
  z-index: 10; /* Garante que a imagem fique acima do fundo do card */
}

.pill-protect{ border-color:#fff }
.pill-empower{ border-color:var(--accent-purple); }
.pill-influence{ border-color:var(--accent-orange); }



/* ========= POR QUE EXISTIMOS ========= */
.porque{ padding: clamp(38px, 9vw, 100px) 0; }
.center-title{
  text-align:center; margin:0 0 16px 0;
  font-size: clamp(24px, 3.6vw, 40px);
  letter-spacing:.12em;
}
.center{ margin:0 auto; }
.center-title.red{ color: var(--accent-red); }
.porque-copy{ max-width: 860px; margin-inline:auto; text-align:center; color:var(--muted); }
.porque-copy p{ margin: 0 0 8px 0; }

/* ========= FAIXA FOTO (FULL BLEED) ========= */
.faixa-foto { margin: 0; position: relative }
.faixa-foto img{
  width: 100vw; max-width: 100vw; height: auto; display:block;
  position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  border-block: 1px solid var(--line);
}
.overlay-cidade{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(253, 130, 255, 0.167); /* Cor preta com opacidade */
  pointer-events: none; /* Permite clicar nos elementos abaixo do overlay */
  z-index: 1; /* Garante que o overlay fique acima da imagem */
}
/* ========= COMO PODEMOS AJUDAR ========= */
.ajudar{ padding: clamp(38px, 9vw, 100px) 0; }
.ajudar-cards{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: 60px;
}
.ajudar-card{
  border:2px solid var(--accent-red);
  border-radius: var(--radius);
  padding: clamp(16px, 2.6vw, 22px);
  background: #0f0f15;
  text-align: center;
  margin: 20px
  
}
.ajudar-card h3{ margin:0 0 10px 0; letter-spacing:.02em; }
.ajudar-card p{ color:var(--muted); margin:0 0 8px 0; }

/* ========= CONTATO ========= */
.contato{ background:#fff; color:#111827; padding: clamp(28px, 8vw, 64px) 0; }
.contato-inner{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px, 3vw, 36px);
  align-items:start;
  text-align: center;
}
.contato h2{ margin:0 0 6px 0; font-size: clamp(22px, 3vw, 32px); }
.contato .muted{ color:#4b5563; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 20px; border-radius: 999px;
  text-decoration:none; font-weight:800; border:1px solid transparent;
  transition: transform .08s ease, box-shadow .2s ease;
}
.btn.whats{
  background:#25D366; color:#053d2a;
  box-shadow: 0 12px 42px -14px rgba(37,211,102,.6);
  margin: 14px 0 10px 0;
}
.btn.whats:hover{ transform: translateY(-1px); }
.note{ color:#374151; font-size:14px; }

.mapa{ border:1px solid #e5e7eb; border-radius: 12px; overflow:hidden; }
.mini-galeria{ display:flex; gap:20px; margin-top:10px; }
.mini-galeria img{
  height: 30px;
  
}
iframe { width:100%; border:0; }
/* ========= FOOTER ========= */
.site-footer{
  border-top:1px solid var(--line);
  background:#050508; color:#94a3b8;
  padding: 14px 0;
  font-size: 13px;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.qr-code{ width:250px; margin:auto}

/* ========= FAB WHATSAPP ========= */
.whatsapp-fab{
  position:fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px -12px rgba(37,211,102,.7);
  text-decoration:none;
}
.whatsapp-fab img{ width:34px; height:34px; object-fit:contain; }


/* ========= ANIMAÇÃO ========= */
.reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: all 3s ease-out;
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
      animation: bounceIn 1s ease-in-out;
      
    }

    @keyframes bounceIn {
      0%   { transform: translateY(50px); }
      30%  { transform: translateY(-50px); }
      60%  { transform: translateY(30px); }
      100% { transform: translateY(0); }
    }
/* ========= RESPONSIVO ========= */
@media (max-width: 980px){
  .pill-card, .contato-inner{ grid-template-columns: 1fr; }
  .ajudar-cards{ grid-template-columns: 1fr; margin-top: 30px; }
  .pill-media img {
    width: 80%;
    aspect-ratio: 0.8/1;
    object-fit: cover;
    border-radius: 14px;
    position: inherit;
    top: 0;
    left: 0;
    transform: none;
    margin: 10px auto;
    
  }
  .pill-media img {
    width: 100%;
    aspect-ratio: 0.8/1;
    object-fit: scale-down;
    border-radius: 14px;
    position: inherit;
    top: 0; 
    left: 0;
    z-index: 2; 
    max-height: 300px;
  }
  .pill-title{
  margin:20px 0 30px 0;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing:.04em;
  font-weight:900;
}
  
}
@media (max-width: 640px){
  .ajudar-cards{ grid-template-columns: 1fr}
  .site-nav ul{ gap: 10px; }
  .site-nav a{ font-size: 10pt; }
  .site-header{font-size: 5px; }
  .logo-mini{font-weight:800; color:#fff; opacity:.9; }
  .cta-nav{ padding:2px 8px; font-size:5pt; }
  .img-title{ height: 40px; }
}

#whatsapp-float{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 64px;
    height: 64px;
    background: linear-gradient(180deg,#25D366,#40C351);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Acessibilidade: foco (teclado) */
  #whatsapp-float:focus{
    outline: none;
    box-shadow: 0 0 0 4px rgba(37,211,102,0.18), 0 8px 24px rgba(0,0,0,0.25);
    transform: translateY(-3px) scale(1.02);
  }

  /* Hover / toque */
  #whatsapp-float:hover,
  #whatsapp-float:active{
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  }

  /* Ícone SVG */
  #whatsapp-float .wh-icon{
    width: 34px;
    height: 34px;
    fill: white;
    display:block;
  }

  /* Pequeno "pulso" para chamar atenção (opcional) */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 #40C351; }
    70% { box-shadow: 0 0 0 12px rgba(64,197,81,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  /* desfaca a animação em telas pequenas para não incomodar */
  @media (min-width: 420px){
    #whatsapp-float::after{
      content: "";
      position: absolute;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      left: 0;
      top: 0;
      animation: pulse 2.8s infinite;
      pointer-events: none;
    }
  }

  /* Se quiser mover mais pra dentro em mobile */
  @media (max-width: 420px){
    #whatsapp-float{
      right: 16px;
      bottom: 16px;
      width: 56px;
      height: 56px;
    }
    #whatsapp-float .wh-icon{ width: 30px; height: 30px; }
  }