:root{
    --bg:#ffffff;
    --bg-alt:#f5f8fc;
    --card:#ffffff;
    --card-border:#e2e7f0;
    --text:#12141c;
    --muted:#66707f;
    --accent1:#0062fd;
    --accent2:#3d8bff;
    --accent-dark:#0050d1;
    --accent-soft:rgba(0,98,253,.08);
    --accent-grad: linear-gradient(120deg, var(--accent1), var(--accent2));
    --whatsapp:#25d366;
    --whatsapp-dark:#1cae53;
    --good:#16a34a;
    --bad:#e0393e;
    --shadow-sm:0 1px 2px rgba(18,20,28,.04), 0 1px 3px rgba(18,20,28,.05);
    --shadow-md:0 8px 24px rgba(18,20,28,.07);
    --radius:18px;
    --maxw:1120px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  /* alguns navegadores mobile (Chrome/Android sobretudo) "aumentam" a fonte
     sozinhos pra caber mais texto legível numa coluna estreita, mesmo com o
     viewport certo — isso empurrava o menu de cima pra 2 linhas em telas
     reais mesmo quando media query nenhuma mandava quebrar. */
  html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{
    background:var(--bg);color:var(--text);
    font-family:'Inter',system-ui,sans-serif;line-height:1.5;
    overflow-x:hidden;width:100%;max-width:100vw;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-0.02em;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  ::selection{background:var(--accent1);color:#fff;}

  /* ---------- NAV ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:200;backdrop-filter:blur(14px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--card-border);}
  nav{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:14px 24px;}
  .nav-left{display:flex;align-items:center;gap:36px;min-width:0;}
  .logo{display:flex;align-items:center;gap:10px;color:var(--text);flex-shrink:0;}
  .logo-mark{height:53px;width:53px;object-fit:contain;display:block;}
  .logo-word{font-family:'Sora',sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.01em;color:var(--text);}
  .nav-links{display:flex;gap:26px;align-items:center;}
  .nav-links a{font-size:14px;font-weight:700;color:var(--text);transition:color .2s;}
  .nav-links a:hover{color:var(--accent1);}
  .nav-links a[href="/parceiro"]{color:var(--accent1);}
  .nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .nav-cta{background:var(--accent1);color:#fff!important;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s, box-shadow .2s, transform .15s;flex-shrink:0;}
  .nav-cta svg{width:18px;height:18px;stroke:#fff;fill:none;}
  .nav-cta:hover{background:var(--accent-dark);box-shadow:0 8px 20px rgba(0,98,253,.35);transform:translateY(-1px);}
  .burger{display:none;background:none;border:none;color:var(--text);font-size:24px;}
  @media (max-width:860px){
    .nav-links{position:fixed;top:63px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--card-border);max-height:0;overflow:hidden;transition:max-height .3s ease;box-shadow:var(--shadow-md);}
    .nav-links.open{max-height:320px;}
    .nav-links a{width:100%;padding:16px 24px;border-bottom:1px solid var(--card-border);}
  .burger{display:block;}
    /* logo um pouco menor no mobile — sobra margem de segurança em telas
       estreitas (320-360px) mesmo se o navegador aumentar a fonte sozinho */
    .logo-mark{height:36px;width:36px;}
    .logo-word{font-size:18px;}
  }

  /* ---------- HERO ---------- */
  .hero{position:relative;min-height:100vh;min-height:100dvh;padding:0;overflow:hidden;background:var(--bg);}

  /* fundo: degradê azul subindo do canto inferior esquerdo, se dissolvendo
     pro branco — troca o antigo canvas de "feixes" animados (marca agora é
     clara, então um fundo escuro animado não fazia mais sentido). */
  .hero-gradient{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 145% 110% at 4% 100%, rgba(0,98,253,.14), transparent 62%),
      radial-gradient(ellipse 94% 77% at 0% 100%, rgba(0,98,253,.18), transparent 55%),
      var(--bg);
  }

  /* o grupo inteiro (texto + carrossel + CTA) centraliza junto, como um bloco
     só, em vez de cada metade centralizar separado dentro de 50% da tela —
     isso evitava um vão vazio no meio quando o conteúdo de cada metade não
     enche os 50% inteiros. */
  .hero-split{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100dvh;padding:76px 0 10px;}
  .hero-top{display:flex;align-items:center;justify-content:center;padding:0 24px 8px;}
  .hero-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 24px;}

  .hero-inner{width:100%;max-width:800px;margin:0 auto;text-align:center;}
  .hero h1{font-size:clamp(35px,4.8vw,60px);font-weight:700;line-height:1.12;margin-bottom:10px;letter-spacing:-0.02em;}
  .hero h1 .grad{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .hero .sub{font-size:18px;color:var(--muted);max-width:520px;margin:0 auto;}

  /* diferenciais + CTA principal, agora abaixo do carrossel */
  .hero-actions{display:flex;flex-direction:column;align-items:center;gap:24px;}
  /* tag + botão ficam num grupo próprio, bem colados (gap pequeno) — os
     diferenciais embaixo têm o respiro normal do .hero-actions acima */
  .hero-cta-group{display:flex;flex-direction:column;align-items:center;gap:6px;}
  .hero-preview-tag{font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0.02em;}
  .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  /* especificidade de 2 classes de propósito: .btn-primary (mais abaixo no
     arquivo) tem a mesma especificidade de 1 classe e ganharia por ordem */
  .btn-primary.btn-hero-cta{background:var(--accent1);color:#fff;box-shadow:0 0 44px 6px rgba(0,98,253,.3);}
  .btn-primary.btn-hero-cta:hover{background:#4d95ff;box-shadow:0 0 54px 8px rgba(0,98,253,.42);}
  .btn-hero-cta svg{width:17px;height:17px;flex-shrink:0;transition:transform .2s ease;}
  .btn-hero-cta:hover svg{transform:translateX(3px);}
  .trust-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:13.5px;color:var(--muted);}
  .trust-row span{display:inline-flex;align-items:center;gap:7px;}
  .trust-row svg{width:15px;height:15px;stroke:var(--good);flex-shrink:0;}

  /* ---------- carrossel dos 3 modelos (metade de baixo da hero) ---------- */
  .hero-carousel{position:relative;width:100%;max-width:1100px;display:flex;align-items:center;justify-content:center;gap:6px;}
  /* cabra espiando por cima do carrossel, do lado direito — só decoração */
  .hero-carousel-mascot{position:absolute;top:-4px;right:17%;width:104px;height:104px;object-fit:contain;pointer-events:none;z-index:6;transform:rotate(-6deg);filter:drop-shadow(0 10px 18px rgba(18,20,28,.18));}
  @media (min-width:901px){.hero-carousel-mascot{top:4px;right:19%;width:128px;height:128px;}}
  @media (max-width:640px){.hero-carousel-mascot{width:68px;height:68px;top:8px;right:5%;}}
  /* touch-action:pan-y — sem isso, no celular, o navegador disputa o gesto
     com o JS do arrasto: ao primeiro movimento ele geralmente decide "isso é
     scroll da página" e cancela o pointer (dispara pointercancel) antes do
     drag ter chance de registrar qualquer distância, deixando o carrossel
     travado. pan-y deixa o scroll vertical nativo intacto e cede só o
     horizontal pro nosso pointermove/endDrag tratarem. */
  .hero-carousel-stage{position:relative;flex:1;height:210px;display:flex;align-items:center;justify-content:center;touch-action:pan-y;}
  .hero-carousel-card{
    position:absolute;top:50%;left:50%;width:250px;aspect-ratio:16/9;
    border-radius:14px;overflow:hidden;background:#eef2f8;cursor:pointer;
    border:1px solid var(--card-border);box-shadow:0 20px 44px -16px rgba(18,20,28,.35);
    transform:translate(-50%,-50%);transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    padding:0;touch-action:pan-y;
  }
  .hero-carousel.is-dragging .hero-carousel-card{transition:none;}
  .hero-carousel-card:focus-visible{outline:2.5px solid var(--accent1);outline-offset:3px;}
  .hero-carousel-card img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;-webkit-user-drag:none;}
  .hero-carousel-card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.05) 45%, transparent 65%);}
  .hero-carousel-label{position:absolute;left:14px;right:14px;bottom:10px;z-index:2;display:flex;flex-direction:column;color:#fff;text-align:left;pointer-events:none;}
  .hero-carousel-label strong{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.55);}
  .hero-carousel-label em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.75);text-shadow:0 1px 4px rgba(0,0,0,.55);}
  .hero-carousel-arrow{
    flex-shrink:0;width:38px;height:38px;border-radius:50%;
    background:#fff;border:1px solid var(--card-border);color:var(--text);
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;
    position:relative;z-index:5;box-shadow:var(--shadow-sm);
  }
  .hero-carousel-arrow:hover{background:var(--accent-soft);border-color:var(--accent1);color:var(--accent1);}
  .hero-carousel-arrow svg{width:17px;height:17px;}

  @media (min-width:641px) and (max-width:900px){
    .hero-carousel-stage{height:250px;}
    .hero-carousel-card{width:300px;}
  }
  /* PC: carrossel 20% maior (era stage 300px/card 380px) */
  @media (min-width:901px){
    .hero-carousel-stage{height:360px;}
    .hero-carousel-card{width:456px;}
  }

  /* mobile: comprime o texto pra abrir espaço, e o carrossel fica 40% maior
     que antes — a pedido, pode vazar pra fora da tela (o .hero tem
     overflow:hidden, então o excesso só some atrás da borda da tela, sem
     criar barra de rolagem horizontal). Setas de navegação somem: sobra
     arrastar/tocar num card lateral. */
  @media (max-width:640px){
    .hero-split{padding:88px 0 28px;}
    .hero-top{padding:0 20px 22px;}
    .hero-bottom{padding:0;gap:16px;}
    .hero h1{font-size:31px;line-height:1.18;margin-bottom:12px;}
    .hero .sub{font-size:14px;}
    .hero-preview-tag{font-size:14px;}
    .hero-ctas{gap:10px;}
    .hero-ctas .btn{padding:14.3px 26px;font-size:17.5px;}
    .trust-row{gap:4px 14px;font-size:10.5px;}
    .trust-row svg{width:12px;height:12px;}
    .hero-carousel-arrow{display:none;}
    .hero-carousel-stage{height:210px;}
    .hero-carousel-card{width:241px;border-radius:11px;}
    .hero-carousel-label strong{font-size:13.5px;}
    .hero-carousel-label em{font-size:10.5px;}
  }
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 28px;border-radius:100px;font-weight:700;font-size:15px;border:none;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;}
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--accent-grad);color:#fff;}
  .btn-primary:hover{box-shadow:0 10px 28px rgba(0,98,253,.28);}
  .btn-whatsapp{background:var(--whatsapp);color:#fff;}
  .btn-whatsapp:hover{background:var(--whatsapp-dark);box-shadow:0 10px 28px rgba(37,211,102,.3);}
  .btn-ghost{background:var(--accent-soft);color:var(--accent1);border:1px solid rgba(0,98,253,.2);}
  .btn-ghost:hover{background:rgba(0,98,253,.14);}
  .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;}

  /* ---------- SECTION shared ---------- */
  section{padding:88px 0;position:relative;}
  .section-head{max-width:640px;margin:0 auto 50px;text-align:center;}
  .section-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;margin-bottom:14px;}
  .section-head p{color:var(--muted);font-size:16px;}
  .section-alt{background:var(--bg-alt);}

  /* ---------- COMO FUNCIONA ---------- */
  .steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:var(--maxw);margin:0 auto;padding:0 24px;align-items:start;}
  .step-card{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:26px 22px;position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
    overflow:hidden;cursor:pointer;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;
  }
  .step-card:hover{border-color:rgba(0,98,253,.3);box-shadow:var(--shadow-md);}
  .step-card:focus-visible{outline:2px solid var(--accent1);outline-offset:2px;}
  .step-card .num{width:34px;height:34px;border-radius:10px;background:var(--accent-grad);color:#fff;font-weight:700;font-family:'Space Grotesk',sans-serif;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:15px;flex-shrink:0;}
  .step-card h3{font-size:16px;margin-bottom:8px;}
  .step-card p{font-size:14px;color:var(--muted);line-height:1.55;}

  /* imagem "borda infinita": sem moldura, sangra até a borda do card (margem
     negativa cancelando o padding do card) — contraste de propósito com o
     tratamento emoldurado (browser-frame) usado nos prints de modelo em
     outras seções do site. Uma linha quase invisível marca só a costura
     entre a imagem e o texto (o resto continua sem moldura nenhuma). */
  .step-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);margin:0 -22px;width:calc(100% + 44px);flex-shrink:0;transition:height .35s cubic-bezier(.2,.8,.2,1);}
  .step-card-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
  /* ímpares (1,3): imagem depois do texto (embaixo), sangra só a borda de baixo,
     costura (linha sutil) na borda de cima da imagem */
  .steps-row .step-card:nth-child(odd) .step-card-img{margin-top:20px;margin-bottom:-26px;border-top:1px solid rgba(18,20,28,.06);}
  /* pares (2,4): imagem sobe pra cima do texto via order, sangra só a borda de
     cima, costura na borda de baixo da imagem */
  .steps-row .step-card:nth-child(even) .step-card-img{order:-1;margin-bottom:20px;margin-top:-26px;border-bottom:1px solid rgba(18,20,28,.06);}

  /* zigzag: 1 e 3 sobem, 2 e 4 descem — fita ondulada em vez de fileira reta */
  .steps-row .step-card:nth-child(odd){transform:translateY(-30px);}
  .steps-row .step-card:nth-child(even){transform:translateY(30px);}

  @media (max-width:900px){.steps-row{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){
    .steps-row{grid-template-columns:1fr;gap:14px;}
    /* mobile: sem zigzag, sem sangria — cartão normal com número/texto à
       esquerda e a mesma imagem, agora contida (com moldura), à direita */
    .steps-row .step-card:nth-child(odd),
    .steps-row .step-card:nth-child(even){transform:none;}
    .step-card{flex-direction:row;align-items:center;gap:14px;padding:18px;}
    .steps-row .step-card:nth-child(even) .step-card-img,
    .steps-row .step-card:nth-child(odd) .step-card-img{order:initial;margin:0;border:1px solid var(--card-border);}
    .step-card-text{flex:1;min-width:0;}
    .step-card .num{margin-bottom:10px;}
    .step-card-img{
      width:96px;height:96px;flex-shrink:0;aspect-ratio:auto;
      border-radius:12px;
    }
  }

  /* ---------- lightbox das imagens do "Como funciona" ---------- */
  .step-lightbox-overlay{
    position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
    padding:40px;background:rgba(10,12,20,.78);backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .step-lightbox-overlay.open{opacity:1;pointer-events:auto;}
  .step-lightbox-overlay img{
    max-width:min(880px,90vw);max-height:85vh;width:auto;height:auto;
    border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);object-fit:contain;background:#fff;
    transform:scale(.94);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .step-lightbox-overlay.open img{transform:scale(1);}
  .step-lightbox-close{
    position:fixed;top:22px;right:22px;width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;
    cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;
    transition:background .2s;backdrop-filter:blur(6px);
  }
  .step-lightbox-close:hover{background:rgba(255,255,255,.28);}
  @media (max-width:560px){.step-lightbox-overlay{padding:20px;} .step-lightbox-close{top:14px;right:14px;}}

  /* ---------- MODELOS ---------- */
  .models-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  @media (max-width:820px){.models-grid{grid-template-columns:1fr;}}
  .model-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;box-shadow:var(--shadow-sm);}
  .model-card:hover{transform:translateY(-4px);border-color:rgba(0,98,253,.3);box-shadow:var(--shadow-md);}
  .browser-frame{background:#eef2f8;padding:9px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--card-border);}
  .browser-dots{display:flex;gap:5px;flex-shrink:0;}
  .browser-dots span{width:8px;height:8px;border-radius:50%;background:#c7cedb;}
  .browser-bar{flex:1;background:#fff;border:1px solid var(--card-border);border-radius:6px;padding:5px 10px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .model-shot-wrap{position:relative;overflow:hidden;aspect-ratio:16/10;background:#eef2f8;}
  .model-shot-wrap img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease;}
  .model-card:hover .model-shot-wrap img{transform:scale(1.04);}
  .model-body{padding:24px;}
  .model-tag{display:inline-block;font-size:12px;font-weight:600;color:var(--accent1);background:var(--accent-soft);border:1px solid rgba(0,98,253,.2);padding:4px 11px;border-radius:100px;margin-bottom:12px;}
  .model-body h3{font-size:21px;margin-bottom:6px;color:var(--text);}
  .model-body p{font-size:14px;color:var(--muted);margin-bottom:18px;}
  .model-actions{display:flex;gap:10px;flex-wrap:wrap;}
  .model-actions .btn{padding:11px 20px;font-size:13.5px;}

  /* ---------- FORMULARIO ---------- */
  .form-panel{max-width:760px;margin:0 auto;padding:0 24px;}
  .form-selected{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px;flex-wrap:wrap;box-shadow:var(--shadow-sm);}
  .form-selected .who{display:flex;align-items:center;gap:12px;}
  .form-selected .who img{width:46px;height:46px;border-radius:10px;object-fit:cover;}
  .form-selected .who strong{display:block;font-size:15px;}
  .form-selected .who span{font-size:12.5px;color:var(--muted);}
  .form-empty{background:var(--card);border:1px dashed var(--card-border);border-radius:var(--radius);padding:34px 24px;text-align:center;color:var(--muted);font-size:14.5px;}
  .form-empty a{color:var(--text);font-weight:600;text-decoration:underline;}

  .lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
  @media (max-width:560px){.lead-fields{grid-template-columns:1fr;}}

  .field-group{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
  .field-group summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;user-select:none;}
  .field-group summary::-webkit-details-marker{display:none;}
  .field-group summary .chev{transition:transform .2s ease;flex-shrink:0;}
  .field-group[open] summary .chev{transform:rotate(180deg);}
  .field-group summary .opt-badge{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-alt);border:1px solid var(--card-border);padding:3px 9px;border-radius:100px;margin-left:10px;}
  .field-group-body{padding:0 22px 22px;}
  .field-group-help{font-size:13px;color:var(--muted);margin:-6px 0 14px;}
  .advanced-toggle{display:flex;align-items:center;gap:8px;width:100%;background:var(--bg-alt);border:1px dashed var(--card-border);color:var(--text);font-weight:600;font-size:14px;padding:14px 18px;border-radius:12px;cursor:pointer;margin-bottom:14px;transition:background .2s;}
  .advanced-toggle:hover{background:var(--accent-soft);}
  .advanced-toggle svg{flex-shrink:0;color:var(--muted);}
  .advanced-toggle.is-open{background:var(--accent-soft);}
  .advanced-wrap[hidden]{display:none;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
  @media (max-width:560px){.field-row{grid-template-columns:1fr;}}

  /* ---------- seletor de domínio (campo pra escolher/checar o .br) ---------- */
  /* .field-group tem overflow:hidden (pra respeitar o border-radius) — sem
     essa exceção aqui o menu do dropdown de TLD ficava cortado embaixo da
     borda do card em vez de flutuar por cima. Esse card específico não tem
     nada que precise ser recortado nos cantos, então liberar geral é seguro. */
  #domainFieldGroup{overflow:visible;}
  .domain-picker-row{display:flex;gap:10px;align-items:stretch;}
  .domain-picker-row input[type=text]{flex:1;min-width:0;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:14.5px;transition:border-color .2s;}
  .domain-picker-row input[type=text]:focus{outline:none;border-color:var(--accent2);}
  .domain-tld-select{position:relative;flex-shrink:0;}
  .domain-tld-btn{height:100%;display:flex;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:12px 14px;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;font-family:inherit;}
  .domain-tld-btn svg{transition:transform .2s;flex-shrink:0;}
  .domain-tld-select.open .domain-tld-btn svg{transform:rotate(180deg);}
  .domain-tld-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--card-border);border-radius:10px;box-shadow:var(--shadow-md);overflow:hidden;z-index:5;min-width:130px;}
  .domain-tld-menu button{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:none;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;}
  .domain-tld-menu button:hover{background:var(--bg-alt);}
  .domain-tld-menu button.active{color:var(--accent1);}
  .domain-check-btn{margin-top:12px;}
  .domain-check-result{margin-top:12px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;}
  .domain-check-result:empty{display:none;}
  .domain-check-result svg{width:16px;height:16px;flex-shrink:0;}
  .domain-check-result.ok{color:var(--good);}
  .domain-check-result.taken{color:var(--bad);}
  .domain-check-result.err{color:var(--muted);}
  @media (max-width:480px){
    .domain-picker-row{flex-direction:column;}
    .domain-tld-select{flex-shrink:1;}
    .domain-tld-menu{left:0;right:0;}
  }
  .field{margin-bottom:14px;min-width:0;}
  /* textarea (depoimentos, FAQ etc) sempre ocupa a linha inteira, senão fica
     torto ao lado de um campo curto na mesma linha do grid */
  .field:has(textarea){grid-column:1 / -1;}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;}
  .field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{
    width:100%;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--text);
    border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;transition:border-color .2s;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent1);}
  .field textarea{resize:vertical;min-height:70px;}
  .field-color{display:flex;align-items:center;gap:10px;}
  .field-color input[type=color]{width:44px;height:38px;border-radius:9px;border:1px solid var(--card-border);background:var(--bg-alt);padding:2px;cursor:pointer;}
  .field-color input[type=text]{flex:1;}
  .field-image{display:flex;align-items:center;gap:12px;}
  .field-image .thumb{width:52px;height:52px;border-radius:9px;object-fit:cover;background:var(--bg-alt);border:1px solid var(--card-border);flex-shrink:0;}
  .field-image input[type=file]{flex:1;font-size:12.5px;color:var(--muted);}
  .field-help{font-size:12px;color:var(--muted);margin-top:5px;}

  /* liga/desliga (tratamentos, categorias de projeto) */
  .switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
  .switch input{opacity:0;width:0;height:0;}
  .switch-track{position:absolute;inset:0;background:#d5dae5;border-radius:100px;transition:background .2s;cursor:pointer;}
  .switch-track::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(18,20,28,.25);}
  .switch input:checked + .switch-track{background:var(--accent1);}
  .switch input:checked + .switch-track::before{transform:translateX(16px);}

  .cat-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
  @media (max-width:560px){.cat-cards{grid-template-columns:1fr;}}
  .cat-card{background:var(--bg-alt);border:1px solid var(--card-border);border-radius:12px;padding:16px;}
  .cat-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .section-toggle-head{background:var(--bg-alt);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;margin-bottom:16px;}
  .section-toggle-head strong{font-size:13.5px;}
  .cat-card-head strong{font-size:14px;}
  .cat-card input[type=file]{width:100%;font-size:12px;color:var(--muted);}
  .cat-card.custom-card{grid-column:1 / -1;}
  .cat-card.custom-card strong{display:block;margin-bottom:10px;font-size:14px;}
  .service-edit{margin-top:2px;}
  .service-edit summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);user-select:none;display:inline-flex;align-items:center;gap:5px;}
  .service-edit summary::-webkit-details-marker{display:none;}
  .service-edit summary::before{content:'+';font-weight:700;color:var(--accent1);}
  .service-edit[open] summary::before{content:'−';}
  .service-edit summary:hover{color:var(--text);}
  .service-edit .field{margin-bottom:0;}

  .submit-row{text-align:center;margin-top:24px;}
  .submit-row .btn{width:100%;padding:17px;font-size:16px;}
  .submit-note{font-size:12.5px;color:var(--muted);margin-top:12px;}
  .progress-wrap{margin-top:16px;}
  .progress-track{height:8px;border-radius:100px;background:var(--bg-alt);border:1px solid var(--card-border);overflow:hidden;}
  .progress-fill{height:100%;width:0%;border-radius:100px;background:var(--accent-grad);transition:width .25s ease;}
  .progress-fill.indeterminate{width:100%;background:linear-gradient(90deg,var(--card-border),var(--accent2),var(--card-border));background-size:200% 100%;animation:progressSweep 1.1s linear infinite;}
  @keyframes progressSweep{0%{background-position:200% 0;}100%{background-position:-40% 0;}}
  .progress-label{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center;}
  .form-error{background:rgba(224,57,62,.08);border:1px solid rgba(224,57,62,.3);color:var(--bad);padding:12px 16px;border-radius:10px;font-size:13.5px;margin-bottom:16px;display:none;}

  /* ---------- RESULTADO ---------- */
  .result-box{max-width:760px;margin:0 auto;padding:0 24px;}
  .result-card{background:var(--card);border:1px solid rgba(37,211,102,.3);border-radius:var(--radius);padding:28px;text-align:center;box-shadow:var(--shadow-sm);}
  .result-card h3{font-size:22px;margin-bottom:8px;}
  .result-card > p{color:var(--muted);font-size:14.5px;margin-bottom:22px;}
  .result-frame-wrap{border-radius:12px;overflow:hidden;border:1px solid var(--card-border);margin-bottom:20px;background:#fff;}
  .result-frame-wrap iframe{width:100%;height:420px;border:none;display:block;}
  .result-link-row{display:flex;gap:8px;margin-bottom:18px;}
  .result-link-row input{flex:1;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:11px 13px;font-size:13px;font-family:monospace;}
  .result-link-row button{padding:0 16px;border-radius:10px;border:1px solid var(--card-border);background:var(--bg-alt);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;}
  .result-countdown{font-size:13px;color:#b5760a;margin-bottom:18px;display:inline-flex;align-items:center;gap:6px;}
  .result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

  /* ---------- PLANOS ---------- */
  .plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;margin:0 auto;padding:0 24px;}
  @media (max-width:700px){.plans-grid{grid-template-columns:1fr;}}
  .plan-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px 26px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
  .plan-card.featured{border-color:rgba(0,98,253,.35);background:linear-gradient(180deg, var(--accent-soft), var(--card) 40%);}
  .plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent1);color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:100px;white-space:nowrap;}
  .plan-card h3{font-size:18px;margin-bottom:4px;}
  .plan-card .plan-sub{font-size:13px;color:var(--muted);margin-bottom:14px;}
  .plan-discount-row{display:flex;align-items:baseline;gap:9px;margin-bottom:2px;flex-wrap:wrap;}
  .plan-price-was{font-size:15px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--bad);}
  .plan-off-badge{background:rgba(224,57,62,.1);color:var(--bad);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .plan-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:38px;margin-bottom:2px;}
  .plan-price span{font-size:15px;font-weight:500;color:var(--muted);}
  .plan-price-note{font-size:13px;color:var(--good);font-weight:600;margin-bottom:22px;}
  .plan-features{list-style:none;margin-bottom:24px;flex:1;}
  .plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text);margin-bottom:12px;line-height:1.4;}
  .plan-features li svg{width:17px;height:17px;stroke:var(--good);flex-shrink:0;margin-top:1px;}
  .plan-features li.highlight{font-weight:600;}
  /* "à parte" = não incluso no preço, é um upsell opcional — por isso um
     ícone diferente (+ , não check) e texto mais apagado, pra não passar a
     entender que já vem junto com o plano. */
  .plan-features li.addon{color:var(--muted);}
  .plan-features li.addon svg{stroke:var(--muted);}
  .plan-card .btn{width:100%;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px;margin:0 auto;padding:0 24px;}
  .faq-item{background:var(--card);border:1px solid var(--card-border);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
  .faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:600;font-size:15px;user-select:none;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary .chev{transition:transform .2s ease;flex-shrink:0;stroke:var(--muted);}
  .faq-item[open] summary .chev{transform:rotate(180deg);}
  .faq-item .faq-a{padding:0 20px 18px;color:var(--muted);font-size:14.5px;line-height:1.6;}
  .faq-support{max-width:760px;margin:26px auto 0;padding:0 24px;text-align:center;}
  .faq-support p{color:var(--muted);font-size:14.5px;margin-bottom:14px;}
  .faq-support .btn{padding:13px 24px;font-size:14px;}

  /* ---------- CTA FINAL ---------- */
  .final-cta{max-width:760px;margin:0 auto;padding:48px 40px;background:var(--card);border:1px solid var(--card-border);border-radius:24px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-md);}
  .final-cta h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:12px;}
  .final-cta p{color:var(--muted);margin-bottom:26px;font-size:15.5px;}

  /* ---------- FOOTER (sticky reveal) ---------- */
  .footer-sticky-outer{
    position:relative;
    --footer-h: clamp(300px, 38vh, 420px);
    height:var(--footer-h);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .footer-fixed{ position:fixed; bottom:0; left:0; width:100%; height:var(--footer-h); }
  .footer-viewport{
    position:sticky;
    top:calc(100vh - var(--footer-h));
    top:calc(100dvh - var(--footer-h));
    height:var(--footer-h);
    overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between; gap:20px;
    padding:40px 0 24px;
    background:var(--bg-alt);
    border-top:1px solid var(--card-border);
  }
  .footer-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
  .footer-decor::before,.footer-decor::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(90px);opacity:.22;}
  .footer-decor::before{background:var(--accent1);top:-150px;left:-110px;}
  .footer-decor::after{background:var(--accent2);bottom:-160px;right:-90px;}

  .footer-top{position:relative;z-index:1;display:flex;gap:40px;flex-wrap:wrap;}
  .footer-brand{flex:1 1 260px;min-width:220px;}
  .footer-brand .logo{margin-bottom:14px;}
  .footer-tagline{color:var(--muted);font-size:14px;line-height:1.55;max-width:320px;margin-bottom:18px;}
  .footer-social{display:flex;gap:10px;}
  .footer-social-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--card-border);background:var(--card);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;}
  .footer-social-btn svg{display:block;}
  .footer-social-btn:hover{transform:translateY(-2px);border-color:var(--accent1);box-shadow:var(--shadow-sm);}

  .footer-col{flex:1 1 150px;min-width:140px;}
  .footer-col h3{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:14px;text-transform:uppercase;letter-spacing:.02em;}
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .footer-col a{color:var(--muted);font-size:14px;transition:color .2s;}
  .footer-col a:hover{color:var(--accent1);}

  .footer-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--card-border);padding-top:18px;}
  .footer-bottom p{color:var(--muted);font-size:13px;}
  .footer-bottom .admin-lock{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--muted);opacity:.55;transition:opacity .2s,color .2s,background .2s;}
  .footer-bottom .admin-lock:hover{opacity:1;color:var(--accent1);background:var(--accent-soft);}

  .footer-sticky-outer .reveal{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .6s ease,transform .6s ease,filter .6s ease;}
  .footer-sticky-outer .reveal:nth-child(2){transition-delay:.08s;}
  .footer-sticky-outer .reveal:nth-child(3){transition-delay:.16s;}
  .footer-sticky-outer .reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0);}

  @media (max-width:860px){
    .footer-sticky-outer{height:auto;clip-path:none;}
    .footer-fixed{position:static;height:auto;}
    .footer-viewport{position:static;top:auto;height:auto;overflow:visible;}
  }
  @media (max-width:700px){
    .footer-top{flex-direction:column;gap:28px;}
  }
  @media (prefers-reduced-motion: reduce){
    .footer-sticky-outer .reveal{opacity:1;transform:none;filter:none;transition:none;}
  }

  .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---------- MODAL DE ATIVAÇÃO ---------- */
  /* overflow-y:auto + margin:auto no box em vez de align-items:center no
     flex: com align-items:center, quando o conteúdo é mais alto que a tela
     (ex: os 2 cards de planos no mobile) o navegador trava a rolagem no
     topo do conteúdo — é um problema clássico de centralizar por flexbox
     com overflow. Assim, o overlay é só uma área rolável normal. */
  .modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(15,20,30,.6);backdrop-filter:blur(4px);overflow-y:auto;padding:40px 20px;}
  .modal-overlay[hidden]{display:none;}
  .modal-overlay:not([hidden]){animation:modalOverlayIn .2s ease;}
  .modal-overlay:not([hidden]) .modal-box{animation:modalBoxIn .28s cubic-bezier(.34,1.56,.64,1);}
  @keyframes modalOverlayIn{from{opacity:0;}to{opacity:1;}}
  @keyframes modalBoxIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
  @media (prefers-reduced-motion: reduce){
    .modal-overlay:not([hidden]),.modal-overlay:not([hidden]) .modal-box{animation:none;}
  }
  .modal-box{position:relative;background:#fff;border:1px solid var(--card-border);border-radius:20px;padding:32px;max-width:440px;width:100%;margin:0 auto;box-shadow:0 30px 80px rgba(18,20,28,.28);}
  .modal-close{position:absolute;top:16px;right:16px;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--muted);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .modal-close:hover{color:var(--text);background:#eef2f8;}
  .modal-box h3{font-size:20px;margin-bottom:8px;padding-right:24px;}
  .modal-sub{color:var(--muted);font-size:14px;margin-bottom:20px;line-height:1.5;}
  .checkout-summary{background:var(--bg-alt);border:1px solid var(--card-border);border-radius:12px;padding:16px;margin-bottom:20px;}
  .checkout-summary .row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;}
  .checkout-summary .row span:first-child{color:var(--muted);}
  .checkout-summary .row.total{border-top:1px dashed var(--card-border);margin-top:6px;padding-top:12px;font-weight:700;font-size:15px;}
  #checkoutEmail,#checkoutCoupon{width:100%;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;transition:border-color .2s;}
  #checkoutEmail::placeholder,#checkoutCoupon::placeholder{color:var(--muted);}
  #checkoutEmail:focus,#checkoutCoupon:focus{outline:none;border-color:var(--accent1);}
  .checkout-success-icon{width:52px;height:52px;border-radius:50%;background:rgba(37,211,102,.15);color:var(--whatsapp);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .checkout-success-icon .spinner{border-color:rgba(37,211,102,.3);border-top-color:var(--whatsapp);}

  /* ---------- Navegação entre páginas (novo fluxo multi-página) ---------- */
  .page-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:18px;}
  .page-back:hover{color:var(--accent1);}
  .page-back svg{width:15px;height:15px;flex-shrink:0;}
  .modal-box.modal-wide{max-width:760px;}
  .modal-box.modal-wide .plans-grid{max-width:none;padding:0;margin-top:4px;}
  .result-activate-row{margin-top:8px;}