:root {
      --preto: #0f0f10;
      --grafite: #1b1b1d;
      --cinza: #2a2a2d;
      --cinza-claro: #b8b8bd;
      --dourado: #e0b72a;
      --dourado-escuro: #b8901a;
      --branco: #f5f5f5;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Poppins', Arial, sans-serif;
      background: var(--preto);
      color: var(--branco);
      line-height: 1.6;
    }
    h1, h2, h3 { font-family: 'Montserrat', Arial, sans-serif; line-height: 1.2; }
    section { padding: 56px 20px; }
    .container { max-width: 960px; margin: 0 auto; }
    .titulo { text-align: center; font-size: 1.7rem; margin-bottom: 8px; }
    .titulo::after {
      content: ""; display: block; width: 56px; height: 3px;
      background: var(--dourado); margin: 12px auto 32px; border-radius: 2px;
    }

    /* Botões */
    .btn {
      display: inline-block; background: var(--dourado); color: #111;
      padding: 14px 28px; border-radius: 999px; text-decoration: none;
      font-weight: 600; font-size: 1rem;
      box-shadow: 0 6px 18px rgba(224, 183, 42, .30);
      transition: transform .2s;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-zap { background: #25d366; color: #fff; box-shadow: 0 6px 18px rgba(37, 211, 102, .30); }

    /* Topo */
    .hero { text-align: center; padding: 28px 20px 56px; background: radial-gradient(ellipse at top, #2c2c2f 0%, var(--preto) 70%); }
    .logo {
      display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto 8px;
      -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 78%);
              mask-image: radial-gradient(ellipse at center, #000 52%, transparent 78%);
    }
    .hero h1 { font-size: 1.8rem; margin-bottom: 14px; }
    .hero h1 span { color: var(--dourado); }
    .hero p { max-width: 540px; margin: 0 auto 26px; color: var(--cinza-claro); font-size: 1.02rem; }
    .selo { margin-top: 14px; font-size: .85rem; color: var(--cinza-claro); }

    /* Marca no topo */
    .brand { margin: 0 auto 26px; }
    .emblem { display:block; width:112px; height:112px; margin:0 auto 14px; border-radius:50%; border:3px solid var(--dourado); box-shadow:0 8px 28px rgba(224,183,42,.25); }
    .wordmark { font-family:'Montserrat',Arial,sans-serif; font-weight:800; font-size:2rem; letter-spacing:.14em; color:var(--branco); line-height:1.1; padding-left:.14em; }
    .wordsub { font-family:'Poppins',Arial,sans-serif; font-weight:500; font-size:.85rem; letter-spacing:.55em; color:var(--dourado); padding-left:.55em; margin-top:4px; }

    /* Grid / cartões */
    .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .card {
      background: var(--grafite); border: 1px solid var(--cinza);
      border-top: 3px solid var(--dourado); border-radius: 12px; padding: 24px 20px;
    }
    .card .icone { font-size: 1.8rem; margin-bottom: 8px; }
    .card h3 { font-size: 1.1rem; margin-bottom: 6px; color: var(--dourado); }
    .card p { font-size: .93rem; color: var(--cinza-claro); }

    /* Como funciona */
    .passos { background: var(--grafite); }
    .passo { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--cinza); }
    .passo:last-child { border-bottom: 0; }
    .num {
      flex: 0 0 38px; height: 38px; border-radius: 50%;
      background: var(--dourado); color: #111; font-weight: 800;
      display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif;
    }
    .passo h3 { font-size: 1.02rem; margin-bottom: 2px; }
    .passo p { font-size: .92rem; color: var(--cinza-claro); }

    /* Portfólio */
    .portfolio .caixa {
      max-width: 560px; margin: 0 auto; text-align: center;
      background: var(--grafite); border: 1px solid var(--cinza); border-radius: 14px; padding: 28px 22px;
    }
    .portfolio h3 { color: var(--dourado); margin-bottom: 6px; }
    .portfolio p { color: var(--cinza-claro); margin-bottom: 18px; font-size: .95rem; }


    .sub-exemplos { text-align:center; color: var(--cinza-claro); max-width:520px; margin:-16px auto 24px; font-size:.95rem; }
    .exemplos { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:560px; margin:0 auto; }
    .ex { display:flex; align-items:center; gap:10px; background:var(--grafite); border:1px solid var(--cinza); border-radius:12px; padding:16px 14px; color:var(--branco); text-decoration:none; font-weight:600; font-size:.95rem; transition:transform .2s,border-color .2s; }
    .ex:hover { transform:translateY(-2px); border-color:var(--dourado); }
    .ex span { font-size:1.4rem; }
    @media (min-width:700px){ .exemplos{ grid-template-columns:repeat(3,1fr); max-width:760px; } }

    /* Preço */
    .preco { background: var(--grafite); text-align: center; }
    .preco .valor { font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--dourado); }
    .preco p { color: var(--cinza-claro); max-width: 520px; margin: 6px auto 0; font-size: .95rem; }

    /* Rodapé */
    footer { background: #000; color: var(--cinza-claro); text-align: center; padding: 30px 20px; font-size: .9rem; }
    footer a { color: var(--dourado); text-decoration: none; font-weight: 500; }
    footer p { margin-top: 6px; }

    /* WhatsApp flutuante */
    .zap {
      position: fixed; right: 16px; bottom: 16px; width: 58px; height: 58px;
      background: #25d366; color: #fff; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.7rem; text-decoration: none;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .5); z-index: 10;
    }

    @media (min-width: 700px) {
      .hero h1 { font-size: 2.5rem; }
      .grid { grid-template-columns: repeat(3, 1fr); }
    }
  

    /* Formulário de orçamento */
    .sub-orcamento { text-align: center; color: var(--cinza-claro); max-width: 520px; margin: -16px auto 24px; font-size: .95rem; }
    .form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; background: var(--grafite); border: 1px solid var(--cinza); border-radius: 14px; padding: 24px 20px; }
    .campo { display: flex; flex-direction: column; gap: 6px; border: 0; min-width: 0; }
    .campo label, .campo legend { font-weight: 600; font-size: .95rem; padding: 0; }
    .campo small { color: var(--cinza-claro); font-weight: 400; }
    .campo input[type="text"], .campo select {
      width: 100%; background: var(--preto); color: var(--branco);
      border: 1px solid var(--cinza); border-radius: 10px; padding: 12px 14px;
      font: inherit; font-size: 1rem;
    }
    .campo input::placeholder { color: #77777c; }
    .campo input:focus-visible, .campo select:focus-visible, .opcao input:focus-visible + span {
      outline: 2px solid var(--dourado); outline-offset: 2px;
    }
    .opcoes { gap: 10px; }
    .opcoes legend { margin-bottom: 8px; }
    .opcao { position: relative; display: block; font-weight: 500; }
    .opcao input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .opcao span { display: block; padding: 12px 14px; border: 1px solid var(--cinza); border-radius: 10px; background: var(--preto); font-size: .95rem; transition: border-color .2s, background .2s; }
    .opcao input:checked + span { border-color: var(--dourado); background: rgba(224, 183, 42, .12); color: var(--dourado); }
    .tentou input:invalid, .tentou select:invalid { border-color: #e5484d; }
    .aviso { color: #ff8a8e; font-size: .9rem; text-align: center; }
    .aviso a { color: var(--dourado); }
    .form .btn { border: 0; cursor: pointer; font-family: inherit; width: 100%; }
    .privacidade { text-align: center; color: var(--cinza-claro); font-size: .82rem; }
    @media (min-width: 700px) { .opcoes { display: grid; grid-template-columns: 1fr 1fr; } .opcoes legend { grid-column: 1 / -1; } }

    /* Filtro do portfólio */
    .filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 20px; }
    .filtros[hidden], .ex[hidden], .simulador[hidden], .sim-total div[hidden] { display: none; }
    .filtro { background: var(--grafite); color: var(--branco); border: 1px solid var(--cinza); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s; }
    .filtro:hover { border-color: var(--dourado); }
    .filtro[aria-pressed="true"] { background: var(--dourado); color: #111; border-color: var(--dourado); }
    .filtro:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

    /* Simulador */
    .simulador { background: var(--grafite); }
    .sim { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; align-items: stretch; text-align: center; }
    .sim .btn { text-align: center; }
    .sim-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--preto); border: 1px solid var(--dourado); border-radius: 10px; padding: 14px; text-align: left; font-weight: 600; }
    .sim-base strong { color: var(--dourado); white-space: nowrap; }
    .sim-opcoes { text-align: left; }
    .sim-opcoes .opcao em { display: block; font-style: normal; font-weight: 400; font-size: .85rem; color: var(--cinza-claro); margin-top: 2px; }
    .sim-opcoes .opcao input:checked + span em { color: var(--dourado); }
    .sim-total { font-size: 1.1rem; }
    .sim-total strong { font-family: 'Montserrat', sans-serif; font-size: 1.9rem; color: var(--dourado); }
    #sim-mensal { color: var(--cinza-claro); font-size: .95rem; margin-top: 2px; }

    .sim-total strong { display: block; font-size: 1.7rem; }

    /* Menu fixo */
    .navegacao { position: sticky; top: 0; z-index: 20; background: rgba(15, 15, 16, .94); border-bottom: 1px solid var(--cinza); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .nav-in { max-width: 960px; margin: 0 auto; padding: 0 16px; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .nav-marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--branco); font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; letter-spacing: .1em; font-size: .9rem; }
    .nav-marca img { border-radius: 50%; border: 1px solid var(--dourado); }
    .nav-marca span { display: none; }
    .nav-links { display: flex; align-items: center; gap: 4px; }
    .nav-links a { color: var(--cinza-claro); text-decoration: none; font-size: .82rem; font-weight: 500; padding: 8px 8px; border-radius: 999px; transition: color .2s, background .2s; }
    .nav-links a:hover { color: var(--branco); }
    .nav-links a.ativo { color: var(--dourado); }
    .nav-links a.nav-cta { background: var(--dourado); color: #111; font-weight: 600; padding: 8px 12px; }
    .nav-links a.nav-cta.ativo { box-shadow: 0 0 0 2px var(--dourado-escuro); }
    .nav-links a:focus-visible, .nav-marca:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
    section[id] { scroll-margin-top: 56px; }
    @media (max-width: 400px) { .nav-in { padding: 0 10px; gap: 6px; } .nav-links { gap: 0; } .nav-links a { font-size: .76rem; padding: 8px 6px; } .nav-links a.nav-cta { padding: 8px 10px; } }
    @media (min-width: 520px) { .nav-marca span { display: inline; } .nav-links a { font-size: .9rem; padding: 8px 12px; } }
    @media (max-width: 340px) { .nav-marca { display: none; } .nav-in { justify-content: center; } }

    .alternativa { text-align: center; font-size: .92rem; color: var(--cinza-claro); }
    .alternativa a { color: var(--dourado); font-weight: 600; }