.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-17ed143:#001EC1;--e-global-color-0be3ecf:#00E2FB;--e-global-color-8c17e0d:#001897;--e-global-color-cd7123b:#223B74;--e-global-color-1d736a6:#FF4800;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <title>Scroll Horizontal Bloqueado</title>

  <!-- Inter (tipografia do projeto) -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

  <style>
    :root{
      --navy:#223b74;     /* azul padrão */
      --brand:#011EC0;    /* azul forte (se precisar) */
      --brand2:#00B2FF;   /* azul claro (se precisar) */
      --orange:#FF4D00;   /* laranja principal */
      --orange2:#FF7A1F;  /* laranja secundário */
    }

    /* ===== Scrollbars (Chrome/Edge/Safari) com a paleta ===== */
    ::-webkit-scrollbar{
      width: 10px;
      height: 10px;
      background: var(--navy);
    }
    ::-webkit-scrollbar-track{
      background: var(--navy);
    }
    ::-webkit-scrollbar-thumb{
      background: linear-gradient(180deg, var(--orange) 0%, var(--orange2) 100%);
      border-radius: 10px;
      border: 2px solid var(--navy); /* cria “folga” no trilho */
    }
    ::-webkit-scrollbar-thumb:hover{
      background: linear-gradient(180deg, var(--orange2) 0%, var(--orange) 100%);
    }
    ::-webkit-scrollbar-corner{
      background: var(--navy);
    }

    /* ===== Firefox ===== */
    body{
      scrollbar-width: thin;
      scrollbar-color: var(--orange) var(--navy); /* thumb / track */
    }

    /* ===== Página de exemplo ===== */
    html, body{
      margin:0;
      padding:0;
      overflow-x:hidden;                /* BLOQUEIA SCROLL LATERAL */
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#F6F9FF;
      color:var(--navy);
    }

    .conteudo{
      width:100%;
      height:200vh;                     /* conteúdo maior para testar scroll vertical */
      background: linear-gradient(to bottom, #F6F9FF, #E4ECFF);
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding:50px;
    }

    .teste-largo{
      width:120vw;                      /* forçaria scroll horizontal se não estivesse bloqueado */
      height:100px;
      background: var(--orange);
      color:#fff;
      margin-top:50px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:10px;
      box-shadow:0 8px 24px rgba(255,77,0,.18);
      font-weight:700;
    }
  </style>
</head>
<body>

  <div class="conteudo">
    <div>
      <h1>Scroll horizontal bloqueado ✅</h1>
      <p>Mesmo com este bloco laranja maior que a tela, não há scroll lateral.</p>
      <div class="teste-largo">Este bloco tem 120vw de largura</div>
    </div>
  </div>

</body>
</html>/* End custom CSS */