/* ========== Variáveis de tema ========== */
    :root{
      --bg: #0b0b0b;            /* fundo geral (preto) */
      --panel: #ffffff;         /* cor dos painéis/textos claros */
      --accent: #ffd400;        /* amarelo da marca */
      --muted: #cfcfcf;         /* texto secundário */
      --max-width: 1100px;      /* largura máxima do conteúdo */
      --radius: 12px;
      --gap: 1.25rem;
      --shadow: 0 6px 20px rgba(0,0,0,0.45);
    }

    /* Reset simples */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:var(--bg);
      color:var(--panel);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }

    /* Container centralizado com largura máxima */
    .container{
      width:calc(100% - 2rem);
      max-width:var(--max-width);
      margin:0 auto;
    }

    /* ========== CABEÇALHO ========== */
    header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(11,11,11,0.85), rgba(11,11,11,0.65));
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--gap);
      padding:0.75rem 0;
    }

    /* Logo (esquerda) */
    .brand{
      display:flex;
      align-items:center;
      gap:0.75rem;
    }
    .brand img{
      width:52px;
      height:52px;
      object-fit:contain;
      border-radius:8px;
      background:#000000;
      box-shadow:var(--shadow);
    }
    .brand h1{
      margin:0;
      font-size:1.05rem;
      letter-spacing:0.2px;
      font-weight:700;
      color:var(--panel);
    }
    .brand small{
      display:block;
      margin-top:-2px;
      font-size:0.66rem;
      color:var(--muted);
      font-weight:600;
    }

    /* Menu principal (direita) */
    nav ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      gap:1rem;
      align-items:center;
    }
    nav a{
      text-decoration:none;
      color:var(--panel);
      padding:0.5rem 0.7rem;
      border-radius:8px;
      font-weight:600;
      font-size:0.95rem;
    }
    nav a:hover{
      background:rgba(255,255,255,0.03);
    }

    /* Botão destaque (Contatar) */
    .btn{
      background:linear-gradient(90deg,var(--accent), #f6d500);
      color:#000;
      padding:0.55rem 0.9rem;
      border-radius:10px;
      font-weight:700;
      box-shadow:0 6px 18px rgba(0,0,0,0.35);
    }

    /* ========== HERO / BANNER PRINCIPAL ========== */
    .hero{
      margin-top:0.75rem;
      border-radius:16px;
      overflow:hidden;
      position:relative;
      box-shadow:var(--shadow);
    }

    /* Imagem de fundo do banner (substitua img/banner.jpg) */
    .hero .bg{
      width:100%;
      min-height:340px;
      background-image: url('img/banner.jpg'); /* <--- substitua aqui */
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      position:relative;
    }

    /* Overlay escuro para contraste do texto */
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(0,0,0,0.68) 10%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.72) 100%);
      pointer-events:none;
    }

    .hero-content{
      position:relative; /* fica acima do overlay */
      z-index:2;
      padding:2.2rem;
      max-width:820px;
    }

    .hero h2{
      margin:0 0 0.6rem 0;
      font-size:clamp(1.35rem, 3.2vw, 2.25rem);
      color:var(--panel);
      line-height:1.05;
      letter-spacing:0.4px;
    }
    .hero p.lead{
      margin:0 0 1rem 0;
      color:var(--muted);
      max-width:60ch;
      font-size:1rem;
    }

    /* Pequenos cards de contato sobre o banner */
    .hero .contact-cards{
      display:flex;
      gap:0.75rem;
      margin-top:1rem;
      flex-wrap:wrap;
    }
    .card{
      background:rgba(255,255,255,0.06);
      padding:0.6rem 0.9rem;
      border-radius:10px;
      display:flex;
      align-items:center;
      gap:0.6rem;
      min-width:fit-content;
    }
    .card .icon{
      width:34px;
      height:34px;
      border-radius:8px;
      background:var(--accent);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      color:#000;
    }

    /* ========== PRINCIPAL (Sobre / Serviços / Contato) ========== */
    main{
      padding:1.5rem 0 3.5rem 0;
    }
    .sections{
      display:grid;
      grid-template-columns: 1fr;
      gap:1.25rem;
    }

    /* Sobre nós — destaque com fundo claro */
    .about{
      background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
      padding:1.25rem;
      border-radius:12px;
      display:flex;
      gap:1rem;
      align-items:center;
      overflow:hidden;
    }
    .about .about-text{
      flex:1;
    }
    .about h3{
      margin:0 0 .5rem 0;
      color:var(--accent);
      font-size:1.05rem;
      letter-spacing:0.6px;
    }
    .about p{ color:var(--panel); margin:0; }

    .about .about-img{
      width:180px;
      height:140px;
      border-radius:10px;
      overflow:hidden;
      flex-shrink:0;
      box-shadow:var(--shadow);
      background: #111;
    }
    .about .about-img img{ width:100%; height:100%; object-fit:cover; }

    /* Serviços em cards */
    .services{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:1rem;
    }
    .service-card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:1rem;
      border-radius:12px;
      display:flex;
      gap:1rem;
      align-items:center;
      box-shadow:var(--shadow);
    }
    .service-card img{
      width:120px;
      height:90px;
      object-fit:cover;
      border-radius:8px;
      flex-shrink:0;
    }
    .service-card h4{ margin:0 0 .4rem 0; color:var(--accent); }
    .service-card p{ margin:0; color:var(--panel); font-size:0.95rem; }

    /* Bloco de contato detalhado */
    .contact{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:1rem;
      border-radius:12px;
      display:flex;
      gap:1rem;
      align-items:center;
      justify-content:space-between;
      box-shadow:var(--shadow);
    }
    .contact .info{
      display:flex;
      flex-direction:column;
      gap:0.5rem;
    }
    .contact a{ color:var(--panel); text-decoration:none; font-weight:700; }
    .contact small{ color:var(--muted); display:block; }

    /* ========== RODAPÉ ========== */
    footer{
      margin-top:1.25rem;
      padding:1.2rem 0;
      border-top:1px solid rgba(255,255,255,0.03);
      color:var(--muted);
      font-size:0.9rem;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:center;
      flex-wrap:wrap;
    }

    /* ========== RESPONSIVIDADE ========== */
    @media (max-width:900px){
      .services{ grid-template-columns: 1fr; }
      .about{ flex-direction:column; align-items:flex-start; }
      .hero .bg{ min-height:420px; background-position: center 35%; } /* ajusta posição da imagem */
      nav ul{ display:none; } /* simplifica menu em telas menores */
    }
    @media (max-width:600px){
      .hero .bg{ min-height:360px; } /* banner menor */
      .brand h1{ font-size:0.95rem; } /* texto menor no logo */
      .brand img{ width:46px; height:46px; } /* logo menor */
      .hero-content{ padding:1.25rem; } /* menos padding no banner */
      .contact{ flex-direction:column; align-items:flex-start; gap:0.6rem; } /* empilha em telas pequenas */
    }

    /* Pequeno utilitário para container 'central' dentro do hero */
    .container-hero{
      display:flex; /**/
      align-items:center; /* fica acima do overlay */
    }


    #clientes .clientes-img img {
      width: 170px; /* Define a largura das imagens dos clientes */
      border-radius: 8px; /* Adiciona bordas arredondadas às imagens */
      margin-top: -20px; /* Adiciona uma margem superior negativa para ajustar o posicionamento vertical */
    }