@import  url('rodape.css');

    /* =========================================================
       VARIÁVEIS GLOBAIS
       Cores e medidas reutilizadas em todo o layout.
       Para adaptar ao site existente, comece alterando estas variáveis.
       ========================================================= */
    :root{
      --azul:#1450b8;
      --azul-escuro:#082b66;
      --azul-claro:#2e72ea;
      --verde:#22c55e;
      --cinza:#64748b;
      --icone-fundo:#0B5EE8;
      --icone-fundo-hover:#FFCA14;
      --icone-hover-filtro:brightness(0) saturate(100%) invert(18%) sepia(83%) saturate(2162%) hue-rotate(209deg) brightness(91%) contrast(101%);
      --topo-altura:0px;

      --footer-bg: #10459F;
      --footer-text: #fff;
      --footer-border: #124EB1;
      --icone: #124EB1;
      --title: #fff;
      --text: #fff;

    }

    /* Reset básico: remove margens/paddings padrão e facilita cálculo de tamanhos */
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    /* Configuração base da página */
    html,body{
      width:100%;
      min-height:100%;
      font-family:"Nunito","Segoe UI",Arial,sans-serif;
      background:#f5f7fb;
    }

    /* =========================================================
       CABEÇALHO / TOPO
       Contém logo, cards de informação, botão do WhatsApp e menu.
       ========================================================= */

    .topo{
      width:100%;
      background:#fff;
      border-bottom:1px solid #e9eef5;
      padding:18px 0 0;
      position:relative;
      z-index:30;
    }

    /* Organiza logo e área direita lado a lado no desktop */
    .topo-wrapper{
      width:100%;
      padding:0 35px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }

    /* Linha superior usada principalmente no mobile para logo + WhatsApp */
    .mobile-top{
      display:flex;
      align-items:center;
    }

    /* Tamanho da logomarca */
    .logo img{
      height:82px;
      width:auto;
      object-fit:contain;
    }

    /* Área que contém os cards de informação e o botão WhatsApp desktop */
    .topo-direita{
      flex:1;
      display:flex;
      align-items:center;
      gap:22px;
    }

    .infos-area{
      flex:1;
      overflow:hidden;
    }

    /* Grid com os cards: poços perfurados, experiência, atendimento etc. */
    .infos{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:18px;
    }

    /* Card individual de informação do topo */
    .info-card{
      display:flex;
      align-items:center;
      gap:14px;
      padding:16px;
      border-radius:18px;
      background:#fff;
      min-width:190px;
      transition:.35s ease;
      overflow:hidden;
      cursor:pointer;
    }

    /* Cards clonados aparecem apenas no mobile para criar carrossel infinito */
    .info-card.clone{
      display:none;
    }

    .info-card:hover{
      transform:translateY(-8px);
      background:linear-gradient(135deg,#fff,#f1f6ff);
      box-shadow:0 15px 30px rgba(20,80,184,.12);
    }

    /* Caixa arredondada dos ícones dos cards */
    .icone{
      width:56px;
      height:56px;
      min-width:56px;
      border-radius:18px;
      background:linear-gradient(135deg,#edf4ff,#dbe8ff);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 6px 16px rgba(20,80,184,.10);
      transition:.35s ease;
    }

    .icone svg{
      width:25px;
      height:25px;
      fill:var(--azul);
    }

    .info-card:hover .icone{
      background:linear-gradient(135deg,var(--azul),var(--azul-claro));
      transform:rotate(-6deg) scale(1.08);
    }

    .info-card:hover .icone svg{
      fill:#fff;
    }

    .texto{
      display:flex;
      flex-direction:column;
      line-height:1.2;
    }

    .texto strong{
      font-size:16px;
      color:var(--azul);
      margin-bottom:4px;
      font-weight:700;
    }

    .texto span{
      font-size:11px;
      color:var(--cinza);
      text-transform:uppercase;
      letter-spacing:.5px;
      line-height:1.5;
      font-weight:600;
    }

    /* Botão principal de contato via WhatsApp */
    .btn-whats{
      background:linear-gradient(135deg,#22c55e,#16a34a);
      color:#fff;
      text-decoration:none;
      display:flex;
      align-items:center;
      gap:14px;
      padding:15px 22px;
      border-radius:18px;
      box-shadow:0 10px 25px rgba(34,197,94,.25);
      white-space:nowrap;
      transition:.35s ease;
    }

    .btn-whats:hover{
      transform:translateY(-4px) scale(1.02);
      color:#fff;
    }

    .btn-whats svg{
      width:36px;
      height:36px;
      fill:#fff;
    }

    .btn-whats small{
      display:block;
      font-size:10px;
      line-height:1.4;
      font-weight:600;
      letter-spacing:.6px;
    }

    .btn-whats strong{
      display:block;
      font-size:21px;
      line-height:1.1;
      margin-top:2px;
    }

    /* Oculta o WhatsApp mobile no desktop */
    .whats-mobile{
      display:none;
    }

    /* =========================================================
       MENU DE NAVEGAÇÃO
       Faixa azul com links e redes sociais.
       ========================================================= */

    .menu-faixa{
      width:100%;
      background:linear-gradient(135deg,#1450b8,#0f3f91);
      box-shadow:0 8px 22px rgba(20,80,184,.22);
      position:relative;
      z-index:40;
    }

    .menu-wrapper{
      width:100%;
      padding:0 35px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    /* Botão hamburguer: escondido no desktop e exibido no mobile */
    .menu-toggle{
      display:none;
      width:100%;
      border:0;
      background:transparent;
      color:#fff;
      padding:15px 18px;
      font-size:15px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.6px;
      align-items:center;
      justify-content:space-between;
      cursor:pointer;
    }

    .menu-toggle svg{
      width:28px;
      height:28px;
      fill:#fff;
    }

    /* Conteúdo do menu: links + ícones sociais */
    .menu-conteudo{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    /* Lista de links do menu */
    .menu-nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex-wrap:wrap;
    }

    .menu-nav a{
      color:#fff;
      text-decoration:none;
      padding:17px 20px;
      font-size:14px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.5px;
      transition:.3s ease;
    }

    .menu-nav a:hover,
    .menu-nav a.active{
      background:rgba(255,255,255,.12);
    }

    /* Área dos ícones sociais */
    .social{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .social a{
      width:40px;
      height:40px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.3s ease;
      color:#fff;
      text-decoration:none;
    }

    .social a:hover{
      background:rgba(255,255,255,.16);
      transform:translateY(-3px) scale(1.08);
    }

    .social svg{
      width:20px;
      height:20px;
      fill:#fff;
      display:block;
    }

    /* =========================================================
       BANNER PRINCIPAL
       Usa altura da tela menos a altura do topo calculada via JavaScript.
       ========================================================= */

    .banner{
      width:100%;
      height:calc(100vh - var(--topo-altura));
      min-height:360px;
      max-height:calc(100vh - var(--topo-altura));
      position:relative;
      overflow:hidden;
      background:#eaf2fb;
    }

    /* Cada slide ocupa todo o banner e troca a opacidade para aparecer/sumir */
    .banner-slide{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center center;
      background-repeat:no-repeat;
      opacity:0;
      transition:opacity 1.2s ease;
      z-index:1;
    }

    .banner-slide.active{
      opacity:1;
    }

    .banner-mobile{
      display:none;
    }

    /* Overlay branco em degradê para deixar o texto legível sobre a imagem */
    .banner::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(
        90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.92) 26%,
        rgba(255,255,255,.58) 43%,
        rgba(255,255,255,.10) 64%,
        rgba(255,255,255,0) 100%
      );
      z-index:2;
    }

    /* Posiciona o texto dentro do banner */
    .banner-conteudo{
      position:relative;
      z-index:3;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      padding:0 42px;
    }

    .banner-texto{
      max-width:540px;
    }

    .banner-texto h4{
      font-size:36px;
      line-height:1.05;
      font-weight:900;
      color:var(--azul-escuro);
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:8px;
      font-style:italic;
    }

    .banner-texto h1{
      font-size:68px;
      line-height:.95;
      font-weight:900;
      color:var(--azul);
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:10px;
      font-style:italic;
    }

    .banner-texto h2{
      font-size:38px;
      line-height:1.2;
      font-weight:900;
      color:var(--azul-escuro);
      text-transform:uppercase;
      margin-bottom:28px;
      font-style:italic;
    }

    .banner-texto p{
      font-size:21px;
      line-height:1.45;
      color:#173d78;
      font-weight:700;
      max-width:450px;
      margin-bottom:36px;
    }

    /* Chamada para orçamento gratuito */
    .btn-orcamento{
      display:inline-flex;
      align-items:center;
      gap:14px;
      background:#ffc400;
      color:#111;
      text-decoration:none;
      padding:16px 24px;
      border-radius:10px;
      font-weight:900;
      text-transform:uppercase;
      box-shadow:0 8px 22px rgba(255,196,0,.35);
      transition:.3s ease;
    }

    .btn-orcamento:hover{
      transform:translateY(-3px);
      background:#ffcf26;
      color:#111;
    }

    .btn-orcamento svg{
      width:34px;
      height:34px;
      fill:#111;
    }

    .btn-orcamento span{
      display:block;
      font-size:14px;
      line-height:1.1;
    }

    .btn-orcamento strong{
      display:block;
      font-size:22px;
      line-height:1.1;
    }

    /* =========================================================
       TÓPICOS PRINCIPAIS / DESTAQUES
       Faixa azul com benefícios do serviço.
       ========================================================= */

    .destaques{
      width:100%;
      background:linear-gradient(135deg,#073f9e,#053583);
      padding:30px 35px;
      overflow:hidden;
    }

    .destaques-grid{
      width:100%;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

    .destaque-item{
      display:flex;
      align-items:center;
      gap:18px;
      padding:18px 8px;
      color:#fff;
      background:transparent;
      border:0;
      border-radius:0;
      box-shadow:none;
      overflow:visible;
    }

    .destaque-item:hover{
      transform:none;
      background:transparent;
      border:0;
      box-shadow:none;
    }

    .destaque-icone{
      width:62px;
      height:62px;
      min-width:62px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--icone-fundo);
      border:0;
      box-shadow:none;
      transition:background-color .25s ease;
    }

    .destaque-icone img{
      width:37px;
      height:37px;
      object-fit:contain;
      display:block;
      opacity:1;
      filter:brightness(0) invert(1);
      transform:none;
      transition:filter .25s ease;
    }

    .destaque-icone:hover,
    .destaque-item:hover .destaque-icone{
      background:var(--icone-fundo-hover);
    }

    .destaque-icone:hover img,
    .destaque-item:hover .destaque-icone img{
      filter:var(--icone-hover-filtro);
      opacity:1;
      transform:none;
    }

    .destaque-texto h3{
      font-size:20px;
      line-height:1.1;
      font-weight:900;
      text-transform:uppercase;
      margin-bottom:8px;
      color:#fff;
    }

    .destaque-texto p{
      font-size:14px;
      line-height:1.45;
      font-weight:600;
      color:rgba(255,255,255,.86);
      margin:0;
    }

    /* =========================================================
       COMO FUNCIONA
       Cards numerados mostrando as etapas do processo.
       ========================================================= */

    .como-funciona{
      width:100%;
      background:#f7f8fb;
      padding:56px 35px 64px;
      overflow:hidden;
    }

    .como-funciona-titulo{
      text-align:center;
      margin-bottom:34px;
    }

    .como-funciona-titulo h2{
      font-size:42px;
      line-height:1;
      font-weight:900;
      color:#073D97;
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:10px;
    }

    .como-funciona-titulo p{
      font-size:17px;
      line-height:1.4;
      color:#102f68;
      font-weight:800;
      margin:0;
    }

    .como-grid{
      width:100%;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:34px;
    }

    .como-card{
      position:relative;
      text-align:center;
    }

    .como-numero{
      position:absolute;
      top:-18px;
      left:-14px;
      width:58px;
      height:58px;
      border-radius:50%;
      background:#0B5EE8;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:30px;
      font-weight:900;
      line-height:1;
      z-index:3;
      box-shadow:0 8px 20px rgba(11,94,232,.25);
    }

    .como-imagem{
      width:100%;
      height:160px;
      border-radius:10px;
      overflow:hidden;
      background:#dbe7f7;
      position:relative;
    }

    .como-imagem::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0);
      transition:background .35s ease;
      z-index:2;
    }

    .como-imagem img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transition:transform .45s ease;
    }

    .como-card:hover .como-imagem::after{
      background:rgba(0,0,0,.34);
    }

    .como-card:hover .como-imagem img{
      transform:scale(1.10);
    }

    .como-card h3{
      font-size:18px;
      line-height:1.15;
      font-weight:900;
      color:#0b245f;
      text-transform:uppercase;
      margin:16px 0 10px;
    }

    .como-card p{
      font-size:14px;
      line-height:1.45;
      color:#153574;
      font-weight:700;
      max-width:280px;
      margin:0 auto;
    }

    /* =========================================================
       SOLUÇÕES PARA DIVERSOS SEGMENTOS
       Cards clicáveis para públicos/segmentos atendidos.
       ========================================================= */

    .segmentos{
      width:100%;
      background:#EFF1F8;
      padding:56px 35px 68px;
      overflow:hidden;
    }

    .segmentos-titulo{
      text-align:center;
      margin-bottom:26px;
    }

    .segmentos-titulo h2{
      font-size:38px;
      line-height:1.1;
      font-weight:900;
      color:#073D97;
      text-transform:uppercase;
      letter-spacing:1px;
      margin:0;
    }

    .segmentos-grid{
      width:100%;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:26px;
    }

    .segmento-card{
      display:block;
      background:#fff;
      border-radius:10px;
      overflow:hidden;
      box-shadow:0 4px 14px rgba(8,43,102,.10);
      border:1px solid rgba(8,43,102,.08);
      cursor:pointer;
      text-decoration:none;
      color:inherit;
      outline:none;
    }

    .segmento-card:focus-visible{
      box-shadow:0 0 0 3px rgba(11,94,232,.25), 0 4px 14px rgba(8,43,102,.10);
    }

    .segmento-imagem{
      width:100%;
      height:144px;
      overflow:hidden;
      position:relative;
      background:#dbe7f7;
    }

    .segmento-imagem::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0);
      transition:background .35s ease;
      z-index:2;
    }

    .segmento-imagem img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transition:transform .45s ease;
    }

    .segmento-info{
      min-height:58px;
      display:flex;
      align-items:center;
      gap:12px;
      padding:13px 18px 15px;
      background:#fff;
    }

    .segmento-icone{
      width:34px;
      height:34px;
      min-width:34px;
      border-radius:50%;
      background:#0B5EE8;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background-color .25s ease, transform .35s ease;
      transform-origin:center center;
    }

    .segmento-icone img{
      width:19px;
      height:19px;
      display:block;
      object-fit:contain;
      filter:brightness(0) invert(1);
      transition:filter .25s ease, transform .35s ease;
      transform-origin:center center;
    }

    .segmento-info h3{
      font-size:18px;
      line-height:1.1;
      color:#073D97;
      font-weight:900;
      margin:0;
    }

    .segmento-card:hover .segmento-imagem::after{
      background:rgba(0,0,0,.36);
    }

    .segmento-card:hover .segmento-imagem img{
      transform:scale(1.10);
    }

    .segmento-card:hover .segmento-icone{
      background:#FFCA14;
      transform:scale(1.25);
    }

    .segmento-card:hover .segmento-icone img{
      filter:var(--icone-hover-filtro);
      transform:scale(1.25);
    }


    /* =========================================================
       CARROSSEL DE LOGOMARCAS DE CLIENTES
       Trilho animado horizontalmente via keyframes.
       ========================================================= */

    .clientes{
      width:100%;
      background:#fff;
      padding:48px 0 54px;
      overflow:hidden;
    }

    .clientes-titulo{
      text-align:center;
      padding:0 22px;
      margin-bottom:28px;
    }

    .clientes-titulo h2{
      font-size:28px;
      line-height:1.15;
      font-weight:900;
      color:#073D97;
      text-transform:uppercase;
      letter-spacing:1px;
      margin:0;
    }

    .clientes-carrossel{
      width:100%;
      overflow:hidden;
      position:relative;
      padding:24px 0;
      margin:-24px 0;
    }

    .clientes-carrossel::before,
    .clientes-carrossel::after{
      content:"";
      position:absolute;
      top:0;
      width:110px;
      height:100%;
      z-index:2;
      pointer-events:none;
    }

    .clientes-carrossel::before{
      left:0;
      background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
    }

    .clientes-carrossel::after{
      right:0;
      background:linear-gradient(270deg,#fff,rgba(255,255,255,0));
    }

    .clientes-trilho{
      display:flex;
      align-items:center;
      gap:18px;
      width:max-content;
      padding:0 24px;
      animation:clientesCarrossel 65s linear infinite;
      will-change:transform;
    }

    .clientes-carrossel:hover .clientes-trilho{
      animation-play-state:paused;
    }

    .cliente-logo{
      width:168px;
      height:104px;
      min-width:168px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      background:#fff;
      border:1px solid #eef2f7;
      border-radius:8px;
      box-shadow:0 4px 14px rgba(8,43,102,.06);
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }

    .cliente-logo img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      display:block;
      filter:grayscale(100%);
      opacity:.72;
      transition:filter .55s ease, opacity .55s ease, transform .55s ease;
    }

    .cliente-logo:hover{
      transform:translateY(-6px);
      border-color:rgba(11,94,232,.18);
      box-shadow:0 12px 26px rgba(8,43,102,.12);
    }

    .cliente-logo:hover img{
      filter:grayscale(0%);
      opacity:1;
      transform:scale(1.06);
    }

    /* Animação do carrossel de clientes: move o trilho até a metade,
       por isso os logos são duplicados no HTML para criar loop contínuo. */
    @keyframes clientesCarrossel{
      from{transform:translateX(0);}
      to{transform:translateX(-50%);}
    }


    /* =========================================================
       FAQ / PERGUNTAS FREQUENTES
       Blocos expansíveis controlados via JavaScript.
       ========================================================= */

    .faq{
      width:100%;
      background:#f7f8fb;
      padding:52px 35px 62px;
      overflow:hidden;
    }

    .faq-wrapper{
      width:100%;
      display:grid;
      grid-template-columns:1fr 320px;
      gap:40px;
      align-items:start;
    }

    .faq-titulo h2{
      font-size:28px;
      line-height:1.1;
      font-weight:900;
      color:#073D97;
      text-transform:uppercase;
      letter-spacing:1px;
      margin:0 0 14px;
    }

    .faq-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px 28px;
    }

    .faq-item{
      background:#fff;
      border:1px solid rgba(8,43,102,.10);
      border-radius:6px;
      box-shadow:0 2px 8px rgba(8,43,102,.05);
      overflow:hidden;
    }

    .faq-pergunta{
      width:100%;
      border:0;
      background:#fff;
      color:#073D97;
      min-height:40px;
      padding:10px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-family:inherit;
      font-size:16px;
      line-height:1.2;
      font-weight:900;
      text-align:left;
      cursor:pointer;
    }

    .faq-pergunta span{
      flex:1;
    }

    .faq-icone{
      width:20px;
      height:20px;
      min-width:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:25px;
      line-height:1;
      font-weight:900;
      color:#111;
      transition:transform .3s ease;
    }

    .faq-resposta{
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease;
      background:#fff;
    }

    .faq-resposta p{
      color:#153574;
      font-size:14px;
      line-height:1.45;
      font-weight:700;
      padding:0 14px 14px;
      margin:0;
    }

    .faq-item.ativo .faq-resposta{
      max-height:140px;
    }

    .faq-item.ativo .faq-icone{
      transform:rotate(45deg);
    }

    .faq-mapa{
      width:100%;
      height:225px;
      border-radius:8px;
      overflow:hidden;
      background:linear-gradient(135deg,#073D97,#0B5EE8);
      box-shadow:0 8px 20px rgba(8,43,102,.14);
      margin-top:46px;
    }

    .faq-mapa img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:transform .75s ease;
    }

    .faq-mapa:hover img{
      transform:scale(1.08);
    }


    /* =========================================================
       RESPONSIVO: telas até 1400px
       Reduz tamanhos e reorganiza alguns grids.
       ========================================================= */
    @media(max-width:1400px){
      /* Grid com os cards: poços perfurados, experiência, atendimento etc. */
    .infos{
        grid-template-columns:repeat(3,1fr);
      }

      .banner-texto h1{
        font-size:56px;
      }

      .destaques-grid{
        gap:16px;
      }

      .destaque-item{
        padding:16px 6px;
      }

      .destaque-texto h3{
        font-size:17px;
      }

      .destaque-texto p{
        font-size:13px;
      }

      .como-grid{
        gap:28px;
      }

      .como-imagem{
        height:145px;
      }

      .como-card h3{
        font-size:16px;
      }

      .como-card p{
        font-size:13px;
      }

      .segmentos-grid{
        gap:20px;
      }

      .segmento-info h3{
        font-size:16px;
      }

      .cliente-logo{
        width:150px;
        min-width:150px;
        height:94px;
      }
    }

    /* =========================================================
       RESPONSIVO: tablets e notebooks menores
       Topo passa a ficar em coluna; grids reduzem para 2 colunas.
       ========================================================= */
    @media(max-width:992px){
      /* Organiza logo e área direita lado a lado no desktop */
    .topo-wrapper{
        flex-direction:column;
        align-items:center;
      }

      /* Área que contém os cards de informação e o botão WhatsApp desktop */
    .topo-direita{
        width:100%;
        flex-direction:column;
      }

      /* Grid com os cards: poços perfurados, experiência, atendimento etc. */
    .infos{
        width:100%;
        grid-template-columns:repeat(2,1fr);
      }

      .menu-wrapper{
        flex-direction:column;
        padding:12px;
      }

      /* Lista de links do menu */
    .menu-nav{
        justify-content:center;
      }

      .banner-texto h4{
        font-size:27px;
      }

      .banner-texto h1{
        font-size:46px;
      }

      .banner-texto h2{
        font-size:28px;
      }

      .banner-texto p{
        font-size:17px;
      }

      .destaques-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .como-grid{
        grid-template-columns:repeat(2,1fr);
        gap:38px 28px;
      }

      .como-funciona-titulo h2{
        font-size:34px;
      }

      .segmentos-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .segmentos-titulo h2{
        font-size:32px;
      }

      .clientes-titulo h2{
        font-size:24px;
      }

      .cliente-logo{
        width:136px;
        min-width:136px;
        height:86px;
        padding:14px;
      }

      .faq-wrapper{
        grid-template-columns:1fr;
        gap:26px;
      }

      .faq-grid{
        grid-template-columns:1fr;
        gap:10px;
      }

      .faq-mapa{
        margin-top:0;
        height:260px;
      }
    }

    /* =========================================================
       RESPONSIVO: celulares
       Ativa menu hamburguer, carrossel de cards no topo e layout em 1 coluna.
       ========================================================= */
    @media(max-width:576px){
      /* =========================================================
       CABEÇALHO / TOPO
       Contém logo, cards de informação, botão do WhatsApp e menu.
       ========================================================= */

    .topo{
        padding-top:14px;
      }

      /* Organiza logo e área direita lado a lado no desktop */
    .topo-wrapper{
        padding:0 0 16px;
        gap:16px;
        flex-direction:column;
      }

      /* Linha superior usada principalmente no mobile para logo + WhatsApp */
    .mobile-top{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 16px;
      }

      /* Tamanho da logomarca */
    .logo img{
        height:60px;
      }

      .whats-desktop{
        display:none;
      }

      /* Oculta o WhatsApp mobile no desktop */
    .whats-mobile{
        display:flex;
      }

      .whats-mobile.btn-whats{
        padding:9px 12px;
        gap:8px;
        border-radius:14px;
        width:auto;
        min-width:auto;
      }

      .whats-mobile.btn-whats svg{
        width:24px;
        height:24px;
      }

      .whats-mobile.btn-whats small{
        font-size:8px;
        line-height:1.1;
      }

      .whats-mobile.btn-whats strong{
        font-size:13px;
      }

      /* Área que contém os cards de informação e o botão WhatsApp desktop */
    .topo-direita{
        width:100%;
        flex-direction:column;
      }

      .infos-area{
        width:100%;
        overflow:hidden;
      }

      /* Grid com os cards: poços perfurados, experiência, atendimento etc. */
    .infos{
        display:flex;
        width:max-content;
        gap:14px;
        padding:6px 18px;
        animation:carrosselIcones 22s linear infinite;
      }

      .infos-area:hover .infos{
        animation-play-state:paused;
      }

      /* Cards clonados aparecem apenas no mobile para criar carrossel infinito */
    .info-card.clone{
        display:flex;
      }

      @keyframes carrosselIcones{
        from{transform:translateX(0);}
        to{transform:translateX(-50%);}
      }

      /* Card individual de informação do topo */
    .info-card{
        min-width:220px;
        padding:13px;
        border-radius:16px;
      }

      /* Caixa arredondada dos ícones dos cards */
    .icone{
        width:50px;
        height:50px;
        min-width:50px;
      }

      .menu-wrapper{
        padding:0;
        display:block;
      }

      /* Botão hamburguer: escondido no desktop e exibido no mobile */
    .menu-toggle{
        display:flex;
      }

      /* Conteúdo do menu: links + ícones sociais */
    .menu-conteudo{
        max-height:0;
        overflow:hidden;
        opacity:0;
        transform:translateY(-8px);
        transition:max-height .45s ease,opacity .35s ease,transform .35s ease;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:0 14px;
      }

      .menu-conteudo.aberto{
        max-height:520px;
        opacity:1;
        transform:translateY(0);
        padding:8px 14px 16px;
      }

      /* Lista de links do menu */
    .menu-nav{
        flex-direction:column;
        width:100%;
        gap:6px;
      }

      .menu-nav a{
        width:100%;
        text-align:center;
        border-radius:12px;
        padding:13px 14px;
        background:rgba(255,255,255,.08);
      }

      /* Área dos ícones sociais */
    .social{
        justify-content:center;
        padding-top:5px;
      }

      /* =========================================================
       BANNER PRINCIPAL
       Usa altura da tela menos a altura do topo calculada via JavaScript.
       ========================================================= */

    .banner{
        height:calc(100vh - var(--topo-altura));
        min-height:320px;
        max-height:calc(100vh - var(--topo-altura));
      }

      .banner-desktop{
        display:none;
      }

      .banner-mobile{
        display:block;
      }

      /* Cada slide ocupa todo o banner e troca a opacidade para aparecer/sumir */
    .banner-slide{
        background-position:center center;
      }

      /* Overlay branco em degradê para deixar o texto legível sobre a imagem */
    .banner::before{
        background:linear-gradient(
          90deg,
          rgba(255,255,255,.96) 0%,
          rgba(255,255,255,.90) 62%,
          rgba(255,255,255,.35) 100%
        );
      }

      /* Posiciona o texto dentro do banner */
    .banner-conteudo{
        align-items:flex-start;
        padding:34px 22px 0;
      }

      .banner-texto{
        max-width:330px;
      }

      .banner-texto h4{
        font-size:21px;
      }

      .banner-texto h1{
        font-size:38px;
      }

      .banner-texto h2{
        font-size:22px;
        margin-bottom:18px;
      }

      .banner-texto p{
        font-size:14px;
        margin-bottom:22px;
      }

      /* Chamada para orçamento gratuito */
    .btn-orcamento{
        padding:12px 16px;
      }

      .btn-orcamento svg{
        width:26px;
        height:26px;
      }

      .btn-orcamento span{
        font-size:11px;
      }

      .btn-orcamento strong{
        font-size:17px;
      }

      .destaques{
        padding:24px 18px;
      }

      .destaques-grid{
        grid-template-columns:1fr;
        gap:14px;
      }

      .destaque-item{
        padding:16px 0;
      }

      .destaque-icone{
        width:56px;
        height:56px;
        min-width:56px;
        border-radius:16px;
      }

      .destaque-icone img{
        width:33px;
        height:33px;
      }

      .destaque-texto h3{
        font-size:17px;
      }

      .destaque-texto p{
        font-size:13px;
      }

      .como-funciona{
        padding:42px 18px 50px;
      }

      .como-funciona-titulo{
        margin-bottom:32px;
      }

      .como-funciona-titulo h2{
        font-size:30px;
      }

      .como-funciona-titulo p{
        font-size:14px;
      }

      .como-grid{
        grid-template-columns:1fr;
        gap:36px;
      }

      .como-numero{
        top:-16px;
        left:-8px;
        width:52px;
        height:52px;
        font-size:27px;
      }

      .como-imagem{
        height:185px;
      }

      .como-card h3{
        font-size:17px;
      }

      .como-card p{
        font-size:13px;
      }

      .segmentos{
        padding:42px 18px 52px;
      }

      .segmentos-titulo{
        margin-bottom:22px;
      }

      .segmentos-titulo h2{
        font-size:28px;
      }

      .segmentos-grid{
        grid-template-columns:1fr;
        gap:18px;
      }

      .segmento-imagem{
        height:188px;
      }

      .segmento-info h3{
        font-size:16px;
      }

      .clientes{
        padding:38px 0 44px;
      }

      .clientes-titulo{
        margin-bottom:22px;
      }

      .clientes-titulo h2{
        font-size:21px;
      }

      .clientes-carrossel::before,
      .clientes-carrossel::after{
        width:45px;
      }

      .clientes-trilho{
        gap:14px;
        animation-duration:58s;
      }

      .cliente-logo{
        width:122px;
        min-width:122px;
        height:78px;
        padding:12px;
      }

      .faq{
        padding:42px 18px 50px;
      }

      .faq-titulo h2{
        font-size:24px;
        margin-bottom:16px;
      }

      .faq-wrapper{
        display:block;
      }

      .faq-grid{
        display:flex;
        flex-direction:column;
        gap:10px;
      }

      .faq-item{
        width:100%;
      }

      .faq-pergunta{
        min-height:46px;
        padding:12px 14px;
        font-size:15px;
        align-items:flex-start;
      }

      .faq-icone{
        margin-top:-2px;
      }

      .faq-resposta p{
        font-size:13px;
        padding:0 14px 14px;
      }

      .faq-mapa{
        margin-top:24px;
        height:240px;
      }
    }


    .popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 9998;
}

.cxPopup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	max-width: 1100px;
	max-height: 95vh;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	z-index: 9999;
	overflow-y: auto;
	animation: abrirPopup 0.3s ease;
}

.caixaFechar {
	text-align: right;
	padding: 15px 20px 0;
}

.caixaFechar a {
	display: inline-block;
	background: #0057ff;
	color: #fff;
	padding: 8px 20px;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: 0.2s;
}

.caixaFechar a:hover {
	background: #003fb8;
	color: #fff;
}

.caixaConteudoPopup {
	padding: 15px 30px 35px;
	text-align: center;
}

.caixaConteudoPopup h1 {
	margin: 0 0 10px;
	color: #003b91;
	font-size: 30px;
	font-weight: 700;
}

.caixaConteudoPopup p {
	color: #333;
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 20px;
}

.caixaConteudoPopup img {
	width: 100%;
	max-width: 100%;
	max-height: 72vh;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 20px auto 0;
	border-radius: 10px;
}

@keyframes abrirPopup {
	from {
		opacity: 0;
		transform: translate(-50%, -45%) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (max-width: 768px) {
	.cxPopup {
		width: 95%;
		max-height: 92vh;
	}

	.caixaConteudoPopup {
		padding: 15px 15px 25px;
	}

	.caixaConteudoPopup h1 {
		font-size: 23px;
	}

	.caixaConteudoPopup p {
		font-size: 15px;
	}

	.caixaConteudoPopup img {
		max-height: 65vh;
	}
}


/* =========================================================
   PÁGINA INTERNA / BOTÃO / CATEGORIA
   ========================================================= */



.titulo-interna {
  margin: 20 0 2rem;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  color: #073D97;
}

.conteudo-interna {
  margin-bottom: 2rem;
  color: #4b5563;
  font-size: 1.125rem;
  line-height: 1.7;
}

.conteudo-interna img {
  float: left;
  max-width: 420px;
  width: 42%;
  height: auto;
  margin: 0 1.5rem 1rem 0;
  border-radius: 16px;
}

.conteudo-interna::after {
  content: "";
  display: block;
  clear: both;
}

.whatsappBotoes {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 10px 25px rgba(37, 211, 102, .35);
  transition: .25s ease;
}

.whatsappBotoes:hover {
  transform: translateY(-4px) scale(1.04);
}

.whatsappBotoes img {
  width: 34px;
  height: 34px;
}

.galeria-interna {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.galeria-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
}

.galeria-img {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  transition: transform .35s ease;
}

.galeria-card:hover .galeria-img {
  transform: scale(1.08);
}

.galeria-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}

.galeria-info {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  color: #fff;
}

.galeria-info strong {
  font-size: .95rem;
  font-weight: 600;
}

.galeria-icone::before {
  content: "＋";
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-bottom: .5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111827;
  font-size: 1.2rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .conteudo-interna img {
    float: none;
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 0 1.5rem;
  }
}







/* =========================================================
   PÁGINA INTERNA / BÁSICO
   Blocos de links para páginas internas de cada categoria.
   ========================================================= */




.titulo {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: #073D97;
}

.basicoBotoes {
  list-style: none;
}

.card-servico {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.card-servico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.15), transparent);
  z-index: 1;
}

.card-servico span {
  position: relative;
  z-index: 2;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 3px 10px rgba(0,0,0,.45);
}

.card-servico:hover {
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

@media (max-width: 767.98px) {
  .card-servico {
    border-radius: 16px;
    aspect-ratio: 16 / 11;
  }
}

/* =========================================================
   PARCEIROS
   ========================================================= */


.parceiros-lista {
  margin-bottom: 3rem;
}

.parceiro-card {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.parceiro-card:hover {
  transform: translateY(-5px);
  border-color: #d1d5db;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

@media (max-width: 575.98px) {
  .parceiro-card {
    border-radius: 14px;
    aspect-ratio: 1 / 1;
  }
}

/* =========================================================
   CONTATO / CIDADE
   ========================================================= */
/* Página cidade / contato */

.cidade-header{
	border-bottom:1px solid #e5e7eb;
	padding-bottom:18px;
}

.cidade-label{
	display:inline-block;
	margin-bottom:8px;
	font-size:13px;
	font-weight:700;
	color:#0B5EE8;
	text-transform:uppercase;
	letter-spacing:.08em;
}

.cidade-titulo{
	margin:0;
	font-size:clamp(2rem, 4vw, 3rem);
	font-weight:800;
	color:#0f172a;
	line-height:1.15;
}

.cidade-titulo span{
	color:#94a3b8;
	font-weight:600;
}

.cidade-card{
	height:100%;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:16px;
	box-shadow:0 8px 24px rgba(15,23,42,.06);
	overflow:hidden;
}

.cidade-mapa{
	min-height:420px;
}

.cidade-mapa iframe{
	width:100%;
	height:100%;
	min-height:420px;
	border:0;
	display:block;
}

.cidade-info{
	padding:28px;
	color:#475569;
	font-size:15px;
	line-height:1.7;
}

.cidade-info h2,
.cidade-info h3,
.cidade-info strong{
	color:#0f172a;
	font-weight:800;
}

.cidade-info p{
	margin-bottom:14px;
}

.cidade-info a{
	color:#0B5EE8;
	font-weight:700;
	text-decoration:none;
}

.cidade-info a:hover{
	text-decoration:underline;
}

.cidade-info ul{
	padding-left:18px;
	margin-bottom:0;
}

.cidade-info li{
	margin-bottom:10px;
}

@media(max-width:991px){
	.cidade-mapa,
	.cidade-mapa iframe{
		min-height:340px;
	}

	.cidade-info{
		padding:22px;
	}
}

@media(max-width:576px){
	.cidade-header{
		padding-bottom:14px;
	}

	.cidade-label{
		font-size:12px;
	}

	.cidade-card{
		border-radius:14px;
	}

	.cidade-mapa,
	.cidade-mapa iframe{
		min-height:280px;
	}

	.cidade-info{
		padding:18px;
		font-size:14px;
	}
}