/* ============================================================
     ARQUIVO DE ESTILO (style.css) — Site Mercado do Óleo
     ============================================================
     Este arquivo controla TODA a aparência do site: cores,
     fontes, tamanhos, espaçamentos, animações, e como cada
     seção se organiza na tela (inclusive no celular).

     Ele está dividido em blocos com títulos tipo:
     /* ---------- NOME DA SEÇÃO ---------- * /
     Use Ctrl+F (ou Cmd+F) e procure pelo nome da seção que
     quer mexer, por exemplo "HERO" ou "RODAPÉ".

     O HTML (index.html) só tem a estrutura/conteúdo; é AQUI
     que a cor, fonte e tamanho de cada coisa são definidos.
     ============================================================ */

  /* Cores e valores reutilizados em todo o site.
     Se quiser trocar o tom de amarelo do site inteiro, por
     exemplo, é só mudar o valor de --yellow aqui embaixo que
     muda em todos os lugares que usam var(--yellow). */
  :root{
    --black: #14110F;     /* preto principal (fundo do header, hero, rodapé) */
    --black-2: #211D1A;   /* preto um pouco mais claro (hover de cartões) */
    --yellow: #DBB901;    /* amarelo principal da marca (extraído direto do logo) */
    --yellow-deep: #AF9400; /* amarelo mais escuro (detalhes, hover) */
    --paper: #F7F5F0;     /* branco levemente creme (fundo das seções claras) */
    --steel: #4B4B4B;     /* cinza pro texto secundário */
    --steel-light: #8a8580; /* cinza mais claro */
    --line: rgba(247,245,240,0.12); /* linhas divisórias sutis */
    --radius: 2px;
  }
  *{box-sizing:border-box; margin:0; padding:0;} /* reset básico do navegador */
  html{scroll-behavior:smooth;} /* rolagem suave ao clicar em links do menu (#servicos, #sobre...) */
  body{
    background:var(--paper);
    color:var(--black);
    font-family:'Inter', sans-serif; /* fonte usada nos textos corridos */
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden; /* evita rolagem horizontal indesejada */
  }
  h1{
    font-family:'Oswald', sans-serif; /* fonte "condensada" usada nos títulos */
    letter-spacing:0.01em;
    line-height:1.02;
  }
  /* Os títulos e textos do site usam a grafia exatamente como
     está escrita no index.html — só maiúscula onde a língua
     portuguesa pede (início de frase, nomes próprios). Nada de
     caixa alta forçada por CSS: é o padrão que o cliente pediu. */
  h2,h3,h4,.display{
    font-family:'Oswald', sans-serif;
    letter-spacing:0.01em;
    line-height:1.02;
  }
  .mono{font-family:'JetBrains Mono', monospace;} /* fonte tipo "painel digital", usada em telefones/horários */
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;} /* largura máxima do conteúdo, centralizado */
  ::selection{background:var(--yellow); color:var(--black);}

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:3px solid var(--yellow); outline-offset:2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* =========================================================
     CABEÇALHO (barra preta fixa no topo, com a logo e o menu)
     Fica "grudado" no topo da tela (position: sticky) mesmo
     quando o visitante rola a página pra baixo.
     ========================================================= */
  header{
    position:sticky; top:0; z-index:100;
    background:var(--black);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
  }
  .brand{display:flex; align-items:center;}
  .brand img{height:72px; width:auto;}
  .nav-links{display:flex; gap:30px; align-items:center;}
  .nav-links a{
    color:var(--paper); opacity:0.75; font-size:14px; font-weight:500;
    transition:opacity 0.15s;
  }
  .nav-links a:hover{opacity:1; color:var(--yellow);}
  .nav-cta{
    background:var(--yellow); color:var(--black) !important; opacity:1 !important;
    padding:10px 18px; font-weight:700; font-size:13px;
    letter-spacing:0.04em;
    border-radius:var(--radius);
    transition:background 0.15s, transform 0.15s;
  }
  .nav-cta:hover{background:#fff; transform:translateY(-1px);}
  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{width:24px; height:2px; background:var(--paper);}

  /* =========================================================
     HERO (a primeira "dobra" da página — título grande,
     texto de apresentação, botões e o mascote animado)
     ========================================================= */
  .hero{
    position:relative;
    background:var(--black);
    color:var(--paper);
    padding:70px 0 0;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(45deg, rgba(219,185,1,0.035) 0 2px, transparent 2px 34px);
    pointer-events:none;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
    position:relative; z-index:2;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono'; font-size:12.5px; letter-spacing:0.08em;
    color:var(--yellow); margin-bottom:20px;
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--yellow); display:inline-block;}
  .hero h1{
    font-size:clamp(40px, 6vw, 70px);
    font-weight:700;
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:normal; color:var(--yellow);
  }
  .hero p.lead{
    font-size:18px; line-height:1.55; color:rgba(247,245,240,0.75);
    max-width:480px; margin-bottom:34px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 26px; font-weight:700; font-size:14.5px;
    letter-spacing:0.03em;
    border-radius:var(--radius); border:2px solid transparent; cursor:pointer;
    transition:transform 0.15s, background 0.15s, border-color 0.15s;
    font-family:'Inter';
  }
  .btn-primary{background:var(--yellow); color:var(--black);}
  .btn-primary:hover{transform:translateY(-2px); background:#fff;}
  .btn-ghost{border-color:rgba(247,245,240,0.3); color:var(--paper);}
  .btn-ghost:hover{border-color:var(--yellow); color:var(--yellow);}

  .hero-stats{display:flex; gap:36px; flex-wrap:wrap;}
  .stat b{
    display:block; font-family:'Oswald'; font-size:34px; color:var(--yellow); font-weight:700;
  }
  .stat span{font-size:12.5px; color:rgba(247,245,240,0.6); letter-spacing:0.03em;}

  .hero-visual{
    position:relative; display:flex; justify-content:center; align-items:flex-end;
    height:100%;
  }
  .mascot-wrap{
    position:relative;
    width:min(480px, 95%);
    cursor:pointer;
  }
  .mascot-hero{
    width:100%;
    animation:float 4.5s ease-in-out infinite;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,0.5));
    position:relative; z-index:3;
    transition:transform 0.15s;
  }
  .mascot-wrap:hover .mascot-hero{ transform:scale(1.03); }
  .mascot-wrap.bounce .mascot-hero{ animation:float 4.5s ease-in-out infinite, bounce 0.4s ease; }
  @keyframes bounce{
    0%{transform:scale(1);} 35%{transform:scale(0.94,1.06);} 65%{transform:scale(1.05,0.95);} 100%{transform:scale(1);}
  }
  @keyframes float{
    0%,100%{transform:translateY(0px) rotate(-1deg);}
    50%{transform:translateY(-16px) rotate(1deg);}
  }
  .hero-visual .glow{
    position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle, rgba(219,185,1,0.25) 0%, transparent 70%);
    z-index:1;
  }
  .speech{
    position:absolute; top:4%; right:6%;
    background:var(--paper); color:var(--black);
    padding:11px 15px; border-radius:14px; font-size:13.5px; font-weight:600;
    max-width:175px; z-index:4;
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
    opacity:0; transform:translateY(8px) scale(0.95);
    transition:opacity 0.25s ease;
    pointer-events:none;
  }
  .speech::after{
    content:""; position:absolute; bottom:-8px; left:34px;
    border:8px solid transparent; border-top-color:var(--paper);
  }
  .speech.retap{ animation:pop 0.4s ease forwards; }
  @keyframes pop{ to{opacity:1; transform:translateY(0) scale(1);} }
  .typing-dots{
    position:absolute; top:4%; right:6%;
    background:var(--paper);
    padding:14px 18px; border-radius:14px; z-index:4;
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
    display:flex; align-items:center; gap:5px;
    opacity:0; transform:translateY(8px) scale(0.95);
  }
  .typing-dots.show{ animation:pop 0.35s ease forwards; }
  .typing-dots::after{
    content:""; position:absolute; bottom:-8px; left:34px;
    border:8px solid transparent; border-top-color:var(--paper);
  }
  .typing-dots span{
    width:6px; height:6px; border-radius:50%; background:var(--steel);
    display:inline-block; animation:typingBounce 1.1s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2){ animation-delay:0.15s; }
  .typing-dots span:nth-child(3){ animation-delay:0.3s; }
  @keyframes typingBounce{
    0%,60%,100%{ transform:translateY(0); opacity:0.5; }
    30%{ transform:translateY(-4px); opacity:1; }
  }
  .tap-hint{
    position:absolute; bottom:4%; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono'; font-size:11px; color:rgba(247,245,240,0.45);
    white-space:nowrap; z-index:4; letter-spacing:0.03em;
  }

  /* =========================================================
     FAIXA DE MARCAS (a lista amarela que corre sem parar
     com os nomes Texaco, Shell, Lubegard, Peak, TheEagle...)
     ========================================================= */
  .marquee-band{
    background:var(--yellow); color:var(--black);
    overflow:hidden; white-space:nowrap;
    border-top:1px solid rgba(0,0,0,0.08); border-bottom:1px solid rgba(0,0,0,0.08);
    padding:14px 0;
  }
  .marquee-track{
    display:inline-flex; gap:56px; animation:scroll 26s linear infinite;
  }
  .marquee-track span{
    font-family:'Oswald'; font-weight:700; font-size:17px; letter-spacing:0.04em;
    display:inline-flex; align-items:center; gap:14px;
  }
  .marquee-track span::before{content:"●"; font-size:9px; opacity:0.55;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* =========================================================
     ESTILOS GERAIS DE SEÇÃO (título + texto de introdução
     que se repetem em várias partes da página: "O que fazemos",
     "Onde estamos" etc — pra não repetir CSS em cada seção)
     ========================================================= */
  section{padding:96px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .kicker{
    font-family:'JetBrains Mono'; font-size:12.5px; letter-spacing:0.08em;
    color:var(--yellow-deep); margin-bottom:12px; display:block;
  }
  .section-head h2{font-size:clamp(30px,4vw,44px); font-weight:700; margin-bottom:14px;}
  .section-head p{font-size:16.5px; color:var(--steel); line-height:1.6; max-width:520px;}

  /* =========================================================
     SERVIÇOS (os 4 quadrados pretos: troca de óleo, câmbio,
     leva e traz, filtros)
     ========================================================= */
  .services{background:var(--paper);}
  .service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-strong,#e5e1d8);}
  .service-card{
    background:var(--black); color:var(--paper);
    padding:36px 30px; position:relative;
    transition:background 0.2s;
  }
  .service-card:hover{background:var(--black-2);}
  .service-num{font-family:'JetBrains Mono'; font-size:13px; color:var(--yellow); margin-bottom:22px; display:block;}
  .service-card h3{font-size:22px; font-weight:600; margin-bottom:12px; letter-spacing:0;}
  .service-card p{font-size:14.5px; color:rgba(247,245,240,0.65); line-height:1.55;}
  .service-icon{width:40px; height:40px; margin-bottom:18px; color:var(--yellow);}

  /* =========================================================
     VÍDEO (bloco escuro com o texto de um lado e o vídeo
     vertical — no formato de reels/story — do outro)
     ========================================================= */
  .video-cambio{background:var(--black); color:var(--paper);}
  .video-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
  .video-text .kicker{color:var(--yellow);}
  .video-text h2{color:var(--paper); font-size:clamp(28px,4vw,40px); margin-bottom:18px;}
  .video-text p{color:rgba(247,245,240,0.72); font-size:16px; line-height:1.7; margin-bottom:28px; max-width:480px;}
  .btn-video{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--yellow); color:var(--black);
    padding:15px 26px; border-radius:6px; font-weight:700; font-size:14px;
    letter-spacing:0.02em; font-family:'Oswald';
    transition:transform 0.15s;
  }
  .btn-video:hover{transform:translateY(-2px);}
  .video-frame{display:flex; justify-content:center;}
  .video-frame video{
    width:100%; max-width:320px; aspect-ratio:9/16; object-fit:cover;
    border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,0.55);
    background:#000;
  }

  /* =========================================================
     REVENDA (a faixa amarela "Também somos revenda" com o
     botão que chama o WhatsApp pra tirar dúvida)
     ========================================================= */
  .revenda{background:var(--yellow); color:var(--black); padding:52px 0;}
  .revenda-grid{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
  .revenda-text{max-width:640px;}
  .revenda-text span.kicker{color:var(--black); opacity:0.65;}
  .revenda-text h2{font-size:clamp(24px,3vw,32px); font-weight:700; margin-bottom:8px;}
  .revenda-text p{font-size:15px; line-height:1.5; opacity:0.85;}
  .revenda-cta{
    display:flex; align-items:center; gap:10px;
    background:var(--black); color:var(--paper);
    padding:16px 24px; border-radius:6px; font-weight:700; font-size:14px;
    letter-spacing:0.02em; white-space:normal;
    transition:transform 0.15s; max-width:100%; text-align:center;
  }
  .revenda-cta:hover{transform:translateY(-2px);}
  .revenda-cta svg{width:20px; height:20px; color:var(--yellow); flex-shrink:0;}

  /* =========================================================
     PRODUTOS (as colunas por categoria — óleo motor, aditivo
     radiador, aditivo câmbio — com uma esteira de fotos subindo
     sozinha, de baixo pra cima, sem parar)
     ========================================================= */
  .produtos{background:var(--paper);}
  .produtos-columns{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  }
  .produtos-col{
    background:#fff; border-radius:12px; padding:20px;
    box-shadow:0 8px 24px rgba(20,17,15,0.06); border:1px solid rgba(20,17,15,0.06);
  }
  .produtos-col h3{
    font-size:16px; font-weight:700;
    color:var(--black); margin-bottom:14px; text-align:center;
  }
  .produtos-strip{
    height:520px; overflow:hidden; border-radius:8px; background:var(--paper);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  }
  .produtos-track{
    display:flex; flex-direction:column; gap:14px; width:100%;
    animation:produtos-scroll 22s linear infinite;
  }
  .produtos-col:hover .produtos-track{animation-play-state:paused;}
  .produtos-track img{
    width:100%; height:250px; object-fit:contain; flex-shrink:0;
    background:#fff; border-radius:8px; padding:10px; box-sizing:border-box;
    box-shadow:0 6px 16px rgba(0,0,0,0.08); border:1px solid rgba(20,17,15,0.06);
  }
  @keyframes produtos-scroll{ from{transform:translateY(0);} to{transform:translateY(-50%);} }

  /* a rolagem sobe (translateY negativo); como a lista de fotos
     está duplicada dentro da track, ao chegar na metade o loop
     reinicia sem dar nenhum "pulo" visível */
  .produtos-col[data-cat="radiador"] .produtos-track{ animation-duration:16s; }


  /* =========================================================
     SOBRE NÓS (a seção preta com a história da empresa,
     a foto da loja e os selinhos de avaliação do Google)
     ========================================================= */
  .sobre{background:var(--black); color:var(--paper); position:relative;}
  .sobre-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .sobre-text .kicker{color:var(--yellow);}
  .sobre-text h2{color:var(--paper); font-size:clamp(28px,4vw,40px); margin-bottom:20px;}
  .sobre-text p{color:rgba(247,245,240,0.72); font-size:16px; line-height:1.7; margin-bottom:16px;}
  .sobre-badges{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
  .badge-review{
    display:flex; align-items:center; gap:10px;
    border:1px solid rgba(247,245,240,0.18); padding:10px 16px; border-radius:6px;
    font-size:13.5px; transition:border-color .15s, background .15s;
  }
  .badge-review:hover{border-color:var(--yellow); background:rgba(219,185,1,0.06);}
  .badge-review b{color:var(--yellow); font-family:'JetBrains Mono';}
  .sobre-photos{position:relative;}
  .sobre-photos img{border-radius:4px;}
  .photo-main{width:100%; box-shadow:0 24px 50px rgba(0,0,0,0.5);}
  .photo-tag{
    position:absolute; bottom:-18px; left:-18px;
    background:var(--yellow); color:var(--black);
    padding:12px 18px; font-family:'Oswald'; font-weight:700; font-size:14px;
    box-shadow:0 12px 24px rgba(0,0,0,0.35);
  }

  /* =========================================================
     UNIDADES (os dois cartões — Unidade Manaus e Unidade Av. Tito Muffato — com foto,
     endereço, telefone, horário e botões de WhatsApp/mapa)
     ========================================================= */
  .unidades{background:var(--paper);}
  .unit-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
  .unit-card{
    background:#fff; border:1px solid #e5e1d8; border-radius:6px; overflow:hidden;
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .unit-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(20,17,15,0.1);}
  .unit-photo{height:210px; overflow:hidden; position:relative;}
  .unit-photo img{width:100%; height:100%; object-fit:cover;}
  .unit-tag{
    position:absolute; top:16px; left:16px; background:var(--black); color:var(--yellow);
    padding:6px 12px; font-family:'JetBrains Mono'; font-size:11.5px; letter-spacing:0.05em;
    border-radius:3px;
  }
  .unit-body{padding:28px;}
  .unit-body h3{font-family:'Oswald'; font-size:24px; font-weight:700; margin-bottom:4px;}
  .unit-sub{color:var(--steel); font-size:14px; margin-bottom:20px;}
  .unit-row{display:flex; gap:12px; padding:10px 0; border-top:1px solid #eee; align-items:flex-start;}
  .unit-row:first-of-type{border-top:none;}
  .unit-row .ico{width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--yellow-deep);}
  .unit-row .txt{font-size:14.5px; line-height:1.5;}
  .unit-row .txt b{font-family:'JetBrains Mono'; font-weight:700;}
  .unit-actions{display:flex; gap:10px; margin-top:22px;}
  .btn-small{
    padding:11px 16px; font-size:13px; font-weight:700; border-radius:4px; letter-spacing:0.02em; flex:1; text-align:center;
    transition:transform 0.15s;
  }
  .btn-small:hover{transform:translateY(-2px);}
  .btn-wa{background:#25D366; color:#fff;}
  .btn-maps{background:var(--black); color:var(--paper);}

  /* =========================================================
     AGENDAMENTO (a seção escura final com o formulário que
     manda a mensagem pronta pro WhatsApp da loja escolhida)
     ========================================================= */
  .agendar{background:var(--black-2); color:var(--paper);}
  .agendar-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;}
  .agendar-text h2{color:var(--paper); font-size:clamp(28px,4vw,40px); margin-bottom:18px;}
  .agendar-text p{color:rgba(247,245,240,0.7); font-size:16px; line-height:1.7; margin-bottom:26px;}
  .quick-wa{
    display:flex; align-items:center; gap:14px;
    background:#25D366; color:#fff; padding:18px 22px; border-radius:6px;
    font-weight:700; font-size:14.5px; letter-spacing:0.02em;
    transition:transform 0.15s;
  }
  .quick-wa:hover{transform:translateY(-2px);}
  .quick-wa svg{width:26px; height:26px; flex-shrink:0;}

  form{background:var(--paper); color:var(--black); border-radius:6px; padding:34px; box-shadow:0 30px 60px rgba(0,0,0,0.35);}
  .form-row{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;}
  .field{margin-bottom:16px; text-align: center;}
  .field label{display:block; font-size:12.5px; font-weight:700; letter-spacing:0.04em; margin-bottom:7px; color:var(--steel);}
  .field input, .field select{ text-align: center;
    width:100%; padding:13px 14px; border:1.5px solid #ddd8cc; border-radius:4px;
    font-family:'Inter'; font-size:14.5px; background:#fff; color:var(--black);
    transition:border-color 0.15s;
  }
  .field input:focus, .field select:focus{border-color:var(--yellow-deep); outline:none;}
  .radio-group{display:flex; gap:10px; flex-wrap:wrap;}
  .radio-opt{
    flex:1; min-width:120px; border:1.5px solid #ddd8cc; border-radius:4px; padding:11px 14px;
    font-size:13.5px; text-align:center; cursor:pointer; font-weight:600; transition:all 0.15s;
  }
  .radio-opt input{display:none;}
  .radio-opt:has(input:checked){border-color:var(--yellow-deep); background:rgba(219,185,1,0.15);}
  .submit-btn{
    width:100%; background:var(--black); color:var(--yellow); border:none;
    padding:16px; font-family:'Inter'; font-weight:700; font-size:14.5px;
    letter-spacing:0.03em; border-radius:4px; cursor:pointer;
    transition:background 0.15s;
  }
  .submit-btn:hover{background:#000;}
  .form-note{font-size:12px; color:var(--steel); margin-top:12px; text-align:center;}

  /* =========================================================
     RODAPÉ (logo, endereços resumidos das duas lojas e a
     linha de baixo com o crédito "Site criado por Bruno Mota")
     ========================================================= */
  footer{background:var(--black); color:rgba(247,245,240,0.6); padding:56px 0 26px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:40px;}
  .footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .footer-brand img{height:30px; border-radius:3px;}
  .footer-brand span{color:var(--paper); font-family:'Oswald'; font-weight:700; font-size:17px;}
  .footer-col h4{color:var(--paper); font-size:13px; letter-spacing:0.05em; margin-bottom:16px; font-family:'JetBrains Mono';}
  .footer-col a{display:block; font-size:14px; margin-bottom:10px; opacity:0.75; transition:opacity 0.15s;}
  .footer-col a:hover{opacity:1; color:var(--yellow);}
  .footer-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px;}

  /* =========================================================
     BOTÃO FLUTUANTE DO WHATSAPP (o círculo verde que fica
     "grudado" no canto da tela enquanto a pessoa rola a página.
     O JS controla ele parar de flutuar perto do rodapé.)
     ========================================================= */
  .wa-float{
    position:fixed; bottom:24px; right:24px; z-index:200;
    background:#25D366; color:#fff; width:58px; height:58px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    transition:transform 0.2s;
  }
  .wa-float:hover{transform:scale(1.08);}
  .wa-float svg{width:28px; height:28px;}

  /* =========================================================
     RESPONSIVO (ajustes pra quando o site abre no celular —
     esconde o menu e mostra o "hambúrguer", empilha as colunas
     que no computador ficam lado a lado, etc)
     ========================================================= */
  @media (max-width:1080px){
    .service-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:920px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .hero-ctas{justify-content:center;}
    .hero-stats{justify-content:center;}
    .hero-visual{margin-top:20px;}
    .service-grid{grid-template-columns:1fr;}
    .sobre-grid{grid-template-columns:1fr;}
    .sobre-photos{order:-1;}
    .video-grid{grid-template-columns:1fr; text-align:center;}
    .video-text p{margin-left:auto; margin-right:auto;}
    .video-frame{order:-1; margin-bottom:8px;}
    .produtos-columns{grid-template-columns:1fr; max-width:420px; margin:0 auto; gap:20px;}
    .unit-grid{grid-template-columns:1fr;}
    .agendar-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr; gap:26px;}
    section{padding:64px 0;}
  }