<?php
/**
 * Template da landing page — Campanha de Combate à Violência contra a Mulher
 * Carregado pelo plugin quando a página usa o modelo "Landing – Campanha Violência contra a Mulher".
 */
if (!defined('ABSPATH')) {
    exit;
}
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="description" content="Antes da agressão, já era violência. Reconheça os sinais e peça ajuda.">
  <?php if (!current_theme_supports('title-tag')) : ?>
  <title><?php echo esc_html(get_the_title()); ?> | <?php bloginfo('name'); ?></title>
  <?php endif; ?>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

  <!-- Filtro SVG para a borda "carimbo" -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
    <filter id="rough">
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3" result="n"/>
      <feDisplacementMap in="SourceGraphic" in2="n" scale="3"/>
    </filter>
  </svg>

  <div class="grain" aria-hidden="true"></div>
  <div class="scroll-progress" aria-hidden="true"><span></span></div>

  <!-- Saída rápida -->
  <button class="quick-exit" id="quickExit" type="button" aria-label="Sair rápido desta página (tecla Esc)">
    <i class="fa-solid fa-person-running" aria-hidden="true"></i>
    <span>Sair rápido</span>
    <kbd>Esc</kbd>
  </button>

  <!-- NAV -->
  <header class="site-nav" id="siteNav">
    <nav class="container d-flex align-items-center justify-content-between">
      <a class="brand" href="#topo" aria-label="BBTS — início">
        <span class="brand-text"><img src="https://www.bbts.com.br/wp-content/uploads/2025/04/BBTS-horizontal-traco-branca.png" alt="BBTS Logomarca" style="width: 100px;"></span>
        <span class="brand-sub d-none d-md-inline">Combate à violência<br>contra a mulher</span>
      </a>
      <a href="#ajuda" class="btn-ajuda"><i class="fa-solid fa-hand-holding-heart" aria-hidden="true"></i> Peça ajuda</a>
    </nav>
  </header>

  <main id="topo">

    <!-- HERO -->
    <section class="hero" id="hero">
      <div class="hero-glow" aria-hidden="true"></div>
      <div class="container position-relative">
        <div class="row align-items-center g-5">
          <div class="col-lg-7">
            <p class="hero-kicker">Quando ele disser:</p>
            <h1 class="hero-phrase" aria-live="polite">
              <span id="typed">Você me faz passar vergonha</span><span class="caret" aria-hidden="true"></span>
            </h1>
            <div class="stamp" id="heroStamp">
              <span class="stamp-top">Fique alerta!</span>
              <span class="stamp-body">Antes da agressão,<br><strong>já era violência.</strong></span>
            </div>
            <div class="hero-actions">
              <a href="#frases" class="btn-primary-x">Reconheça os sinais</a>
              <a href="#ajuda" class="btn-ghost-x"><i class="fa-solid fa-phone" aria-hidden="true"></i> Canais de ajuda</a>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="poster-fan" id="posterFan">
              <img class="pf pf-3" src="https://www.bbts.com.br/wp-content/uploads/2026/09/BBTS_VIOLENCIA_CONTA_MULHER_KV.png" alt="" aria-hidden="true">
              <img class="pf pf-2" src="https://www.bbts.com.br/wp-content/uploads/2026/09/BBTS_VIOLENCIA_CONTA_MULHER_KV.png" alt="" aria-hidden="true">
              <img class="pf pf-1" src="https://www.bbts.com.br/wp-content/uploads/2026/09/BBTS_VIOLENCIA_CONTA_MULHER_KV.png" alt="Cartaz da campanha: Fique alerta! Antes da agressão, já era violência.">
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- MARQUEE -->
    <div class="marquee" aria-hidden="true">
      <div class="marquee-track" id="marqueeTrack">
        <span>Antes da agressão, já era violência</span><i class="fa-solid fa-circle-exclamation"></i>
        <span>Fique alerta</span><i class="fa-solid fa-circle-exclamation"></i>
        <span>Peça ajuda</span><i class="fa-solid fa-circle-exclamation"></i>
        <span>Antes da agressão, já era violência</span><i class="fa-solid fa-circle-exclamation"></i>
        <span>Fique alerta</span><i class="fa-solid fa-circle-exclamation"></i>
        <span>Peça ajuda</span><i class="fa-solid fa-circle-exclamation"></i>
      </div>
    </div>

    <!-- BBTS É SEGURANÇA -->
    <section class="bbts-seguranca" id="bbts-seguranca">
      <div class="container">
        <div class="row g-5 align-items-start">
          <div class="col-lg-5">
            <div class="seguranca-heading">
              <span class="seguranca-kicker">Compromisso BBTS</span>
              <h2>BBTS é<br><span>segurança</span></h2>
            </div>
          </div>
          <div class="col-lg-7">
            <div class="seguranca-copy">
              <p class="seguranca-lead">A BBTS acredita que ambientes seguros, respeitosos e inclusivos são construídos diariamente.</p>
              <p>Por isso, lançou a campanha <strong>Antes da agressão, já era violência</strong>, uma iniciativa permanente de conscientização sobre a violência contra a mulher.</p>
              <p>A campanha busca ampliar o conhecimento sobre as diferentes formas de violência, incentivar a identificação precoce dos sinais de alerta, fortalecer a cultura do respeito e divulgar informações que possam ajudar mulheres em situação de violência e pessoas que desejam apoiar alguém.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FRASES (scrollytelling) -->
   <!-- FRASES (carrossel horizontal) -->
    <section class="frases" id="frases">
      <div class="container">
        <div class="row align-items-center g-5 frases-carousel" id="frasesCarousel"
             role="region" aria-roledescription="carrossel" aria-label="Frases que já são violência">

          <div class="col-lg-6">
            <div class="frases-viewport" id="frasesViewport">
              <div class="frases-track" id="frasesTrack">
                <figure class="frase-slide"><img src="<?php bbts_cvm_img('frase-vergonha.jpg'); ?>" alt="Mulher olhando para a câmera com a frase: Você me faz passar vergonha."></figure>
                <figure class="frase-slide"><img src="<?php bbts_cvm_img('frase-deixar.jpg'); ?>" alt="Mulher olhando para a câmera com a frase: Se você me deixar, ninguém mais vai te querer."></figure>
                <figure class="frase-slide"><img src="<?php bbts_cvm_img('frase-denunciar.jpg'); ?>" alt="Mulher olhando para a câmera com a frase: Se você me denunciar, vai se arrepender."></figure>
                <figure class="frase-slide"><img src="<?php bbts_cvm_img('frase-amigas.jpg'); ?>" alt="Mulher olhando para a câmera com a frase: Não gosto que você saia com suas amigas."></figure>
                <figure class="frase-slide"><img src="<?php bbts_cvm_img('frase-trabalhar.jpg'); ?>" alt="Mulher olhando para a câmera com a frase: Você não precisa trabalhar."></figure>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="frases-head">
              <h2 class="section-title">Parece só uma frase. Não é.</h2>
              <p class="section-lead">Cada uma delas tem um nome e um objetivo: controlar.</p>
            </div>

            <div class="frase-panels" id="frasePanels">
              <article class="frase-panel is-active">
                <span class="tag mb-4">Humilhação</span>
                <p>Ridicularizar, expor e diminuir, em público ou a sós, faz a mulher duvidar de si mesma. É violência psicológica.</p>
              </article>
              <article class="frase-panel">
                <span class="tag mb-4">Manipulação</span>
                <p>Destruir a autoestima para impedir que ela vá embora. A lei chama de manipulação e também é violência psicológica.</p>
              </article>
              <article class="frase-panel">
                <span class="tag mb-4">Ameaça</span>
                <p>Intimidar para silenciar. Ameaça é crime e é um sinal de risco grave. Não espere para pedir ajuda.</p>
              </article>
              <article class="frase-panel">
                <span class="tag mb-4">Isolamento</span>
                <p>Afastar amigas e família apaga a rede de apoio. Isolar e limitar o direito de ir e vir está descrito na Lei Maria da Penha.</p>
              </article>
              <article class="frase-panel">
                <span class="tag mb-4">Controle financeiro</span>
                <p>Tirar a independência financeira cria dependência. Reter dinheiro, documentos ou bens é violência patrimonial.</p>
              </article>
            </div>

            <div class="frases-controls">
              <button class="frases-arrow" type="button" data-step="-1" aria-label="Frase anterior">
                <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
              </button>
              <button class="frases-arrow" type="button" data-step="1" aria-label="Próxima frase">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
              </button>
				<br/>
              <div class="frase-dots">
                <button class="frase-dot is-active" type="button" aria-label="Frase 1 de 5" aria-current="true"><span></span></button>
                <button class="frase-dot" type="button" aria-label="Frase 2 de 5"><span></span></button>
                <button class="frase-dot" type="button" aria-label="Frase 3 de 5"><span></span></button>
                <button class="frase-dot" type="button" aria-label="Frase 4 de 5"><span></span></button>
                <button class="frase-dot" type="button" aria-label="Frase 5 de 5"><span></span></button>
              </div>
              <button class="frases-toggle" type="button" aria-label="Pausar troca automática" aria-pressed="false">
                <span class="ico-pause"><i class="fa-solid fa-pause" aria-hidden="true"></i></span>
                <span class="ico-play"><i class="fa-solid fa-play" aria-hidden="true"></i></span>
              </button>
            </div>
          </div>

        </div>
      </div>
    </section>

    <!-- ESCALADA -->
    <section class="escala" id="escala">
      <div class="container">
        <div class="row g-5">
          <div class="col-lg-5">
            <div class="escala-sticky">
              <h2 class="section-title">A violência<br>sobe um degrau<br>de cada vez.</h2>
              <p class="section-lead">Os primeiros degraus não deixam marcas no corpo. Por isso passam despercebidos, e é exatamente neles que dá para interromper o ciclo.</p>
              <div class="escala-legend">
                <span><i class="dot dot-lilas"></i> Sem marcas visíveis</span>
                <span><i class="dot dot-alerta"></i> Risco à vida</span>
              </div>
            </div>
          </div>
          <div class="col-lg-7">
            <div class="escala-wrap">
              <div class="escala-rail" aria-hidden="true"><span id="escalaFill"></span></div>
              <ol class="escala-list" id="escalaList">
                <li><span class="n">1</span><div><h3>Piadas que humilham</h3><p>Deboche da aparência, das ideias, do trabalho.</p></div></li>
                <li><span class="n">2</span><div><h3>Ciúme e vigilância</h3><p>Exige senhas, controla o celular, quer saber onde e com quem.</p></div></li>
                <li><span class="n">3</span><div><h3>Isolamento</h3><p>Afasta de amigos e família, proíbe saídas.</p></div></li>
                <li><span class="n">4</span><div><h3>Controle do dinheiro</h3><p>Decide com o que você pode gastar, impede que trabalhe.</p></div></li>
                <li><span class="n">5</span><div><h3>Ameaças e chantagem</h3><p>Promete se vingar, ameaça os filhos, os bens, a vida.</p></div></li>
                <li class="hot"><span class="n">6</span><div><h3>Empurrões e objetos quebrados</h3><p>A violência sai das palavras e chega ao corpo.</p></div></li>
                <li class="hot"><span class="n">7</span><div><h3>Agressão física e sexual</h3><p>Socos, estrangulamento, relação forçada.</p></div></li>
                <li class="hot last"><span class="n">8</span><div><h3>Feminicídio</h3><p>O último degrau. Quase sempre precedido por todos os outros.</p></div></li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FORMAS -->
    <section class="formas" id="formas">
      <div class="container">
        <div class="formas-head">
          <h2 class="section-title">A Lei Maria da Penha reconhece cinco formas de violência.</h2>
          <p class="section-lead">Só uma delas deixa hematomas.</p>
        </div>
        <div class="formas-grid">
          <article class="forma">
            <i class="fa-solid fa-hand-back-fist" aria-hidden="true"></i>
            <h3>Física</h3>
            <p>Qualquer conduta que ofenda a integridade ou a saúde do corpo: bater, empurrar, sufocar, queimar.</p>
          </article>
          <article class="forma">
            <i class="fa-solid fa-brain" aria-hidden="true"></i>
            <h3>Psicológica</h3>
            <p>Humilhar, ameaçar, manipular, isolar, vigiar, chantagear. Tudo que causa dano emocional ou controla decisões.</p>
          </article>
          <article class="forma">
            <i class="fa-solid fa-ban" aria-hidden="true"></i>
            <h3>Sexual</h3>
            <p>Forçar relação ou prática sexual, impedir o uso de métodos contraceptivos, forçar gravidez ou aborto.</p>
          </article>
          <article class="forma">
            <i class="fa-solid fa-wallet" aria-hidden="true"></i>
            <h3>Patrimonial</h3>
            <p>Reter, tomar ou destruir dinheiro, documentos, objetos pessoais e instrumentos de trabalho.</p>
          </article>
          <article class="forma">
            <i class="fa-solid fa-comment-slash" aria-hidden="true"></i>
            <h3>Moral</h3>
            <p>Caluniar, difamar ou injuriar: espalhar mentiras e ofensas que atacam a honra e a reputação.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- NÚMEROS -->
    <section class="numeros" id="numeros">
      <div class="container">
        <h2 class="section-title text-center">Em 2025, no Brasil:</h2>
        <div class="row g-4 numeros-row">
          <div class="col-6 col-lg-3">
            <div class="num"><strong class="count" data-to="1571">0</strong><span>mulheres mortas por serem mulheres</span></div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="num"><strong><span class="count" data-to="4">0</span></strong><span>feminicídios por dia, em média</span></div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="num"><strong><span class="count" data-to="79.8" data-dec="1">0</span>%</strong><span>dos autores eram parceiros ou ex-parceiros</span></div>
          </div>
          <div class="col-6 col-lg-3">
            <div class="num"><strong><span class="count" data-to="62.5" data-dec="1">0</span>%</strong><span>das vítimas foram mortas dentro de casa</span></div>
          </div>
        </div>
        <p class="fonte">Fonte: Fórum Brasileiro de Segurança Pública, 20º Anuário Brasileiro de Segurança Pública (2026), dados de 2025.</p>
      </div>
    </section>

    <!-- AJUDA -->
    <section class="ajuda" id="ajuda">
      <div class="ajuda-bg" aria-hidden="true">
        <img src="<?php bbts_cvm_img('kv-vergonha.jpg'); ?>" alt="">
      </div>
      <div class="container position-relative">
        <div class="row g-5 align-items-end">
          <div class="col-lg-5">
            <h2 class="ajuda-title">Peça<br>ajuda.</h2>
            <p class="ajuda-lead">Você não precisa ter certeza nem esperar a primeira agressão. Se viu acontecer com uma colega, você também pode denunciar.</p>
          </div>
          <div class="col-lg-7">
            <div class="canais">
              <div class="canal canal-destaque">
                <div class="canal-ico"><i class="fa-solid fa-building-shield" aria-hidden="true"></i></div>
                <div class="canal-body">
                  <h3>Ouvidoria BBTS</h3>
                  <a href="tel:+5561982340000" title="Telefone ouvidoria" class="canal-link">(61) 9 8234-0000</a>
                  <a href="mailto:ouvidoria@bbts.com.br" class="canal-link small-link mt-3">ouvidoria@bbts.com.br</a>
                  <p class="canal-link small-link">De segunda à sexta, 09h às 18h</p>
                </div>
                <button class="copy" type="button" data-copy="ouvidoria@bbts.com.br" aria-label="Copiar e-mail da Ouvidoria"><i class="fa-regular fa-copy" aria-hidden="true"></i></button>
              </div>
              <div class="canal">
                <div class="canal-ico"><i class="fa-solid fa-phone-volume" aria-hidden="true"></i></div>
                <div class="canal-body">
                  <h3>Ligue 180</h3>
                  <p>Gratuito, sigiloso, 24 horas. WhatsApp: <a href="https://wa.me/556196100180" target="_blank" rel="noopener">(61) 9610-0180</a></p>
                </div>
                <a class="copy" href="tel:180" aria-label="Ligar para 180"><i class="fa-solid fa-phone" aria-hidden="true"></i></a>
              </div>
              <div class="canal">
                <div class="canal-ico"><i class="fa-solid fa-landmark" aria-hidden="true"></i></div>
                <div class="canal-body">
                  <h3>Fala.BR</h3>
                  <p><a href="https://falabr.cgu.gov.br" target="_blank" rel="noopener">falabr.cgu.gov.br</a></p>
                </div>
                <button class="copy" type="button" data-copy="https://falabr.cgu.gov.br" aria-label="Copiar endereço do Fala.BR"><i class="fa-regular fa-copy" aria-hidden="true"></i></button>
              </div>
              <div class="canal canal-emergencia">
                <div class="canal-ico"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></div>
                <div class="canal-body">
                  <h3>Em perigo agora?</h3>
                  <p>Ligue <a href="tel:190"><strong>190</strong></a>, Polícia Militar.</p>
                </div>
                <a class="copy" href="tel:190" aria-label="Ligar para 190"><i class="fa-solid fa-phone" aria-hidden="true"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer class="site-footer">
    <div class="container d-flex flex-column flex-md-row justify-content-between gap-3">
      <p class="mb-0"><strong>BB Tecnologia e Serviços</strong> – Campanha de Combate à Violência contra a Mulher</p>
    </div>
  </footer>

  <div class="toast-x" id="toastX" role="status" aria-live="polite"></div>

<?php wp_footer(); ?>
</body>
</html>
