/*
  Identidade do CW2 Cloud PBX.
  As cores vêm medidas do logo.png da marca, não escolhidas a olho:
  #007AC3 e #0CD8A7 são os dois arcos do símbolo, #054C80 é o texto "cw2".
  Compartilhado entre a landing e a página de recursos para que uma mudança de
  marca não precise ser feita duas vezes — e não fique feita pela metade.
*/
  :root {
    /* Medidas do logo.png da marca, não escolhidas a olho:
       #007AC3 e #0CD8A7 são os dois arcos, #054C80 é o texto "cw2". */
    --azul:        #007AC3;
    --azul-escuro: #054C80;
    --azul-claro:  #38A9E8;
    --verde:       #0CD8A7;
    --verde-fundo: #06A87D;

    /* o escuro da marca é o próprio marinho, não um preto azulado */
    --noite:       #043055;
    --noite-2:     #06406E;
    --noite-3:     #0A5288;

    --claro:       #FFFFFF;
    --claro-2:     #F2F7FB;
    --tinta:       #062A47;
    --tinta-media: #40627E;
    --tinta-fraca: #7B95AC;
    --linha:       #DFE9F1;
    --linha-noite: #0D5C97;
    --verde-claro: #3EE6BC;
    --areia:       #BFD8EA;

    /* assinatura da marca: os dois arcos do símbolo viram um gradiente */
    --marca: linear-gradient(115deg, var(--azul) 0%, var(--verde) 100%);

    --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --r:     10px;
    --r-sm:  8px;
    --larg:  1160px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0; background: var(--claro); color: var(--tinta);
    font-family: var(--fonte); font-size: 17px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .area { max-width: var(--larg); margin: 0 auto; padding: 0 24px; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; border-radius: 4px; }

  h1, h2, h3 { text-wrap: balance; letter-spacing: -.025em; margin: 0; }

  /* ===================================================== topo */
  /* Topo claro para a logo aparecer como ela é: o texto "cw2" é marinho e
     some em fundo escuro, e é a logo que tira a página da cara de genérica. */
  .topo {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, .93); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linha);
  }
  .topo .area { display: flex; align-items: center; gap: 26px; height: 72px; }
  /* Marca do produto: o símbolo e o "cw2" vêm do logo da CW2, e "Cloud PBX"
     entra como nome do produto — a mesma lógica de marca-mãe e produto que
     qualquer casa usa. Não existe logo própria do Cloud PBX; inventar uma
     seria criar marca nova sem ninguém ter pedido. */
  .marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  .marca img { height: 30px; width: auto; display: block; }
  .marca .produto {
    font-size: 19px; font-weight: 600; letter-spacing: -.02em;
    color: var(--azul-escuro); padding-left: 11px;
    border-left: 1px solid var(--linha); line-height: 1.1;
  }
  @media (max-width: 400px) {
    .marca .produto { font-size: 16px; padding-left: 9px; }
    .marca img { height: 26px; }
  }
  .menu { margin-left: auto; display: flex; gap: 26px; font-size: 15px; color: var(--tinta-media); }
  .menu a { text-decoration: none; }
  .menu a:hover { color: var(--azul); }
  @media (max-width: 880px) { .menu { display: none; } }

  /* ===================================================== botões */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-size: 16px; font-weight: 600; text-decoration: none;
    padding: 13px 24px; border-radius: var(--r-sm); border: 1px solid transparent;
    cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease;
    white-space: nowrap;
  }
  .btn-1 { background: var(--azul); color: #fff; box-shadow: 0 10px 24px -14px rgba(0,122,195,.9); }
  .btn-1:hover { background: var(--azul-escuro); }
  .btn-2 { border-color: var(--linha); color: var(--tinta); background: var(--claro); }
  .btn-2:hover { border-color: var(--tinta-fraca); }
  .btn-claro { border-color: rgba(255,255,255,.28); color: #fff; background: transparent; }
  .btn-claro:hover { border-color: #fff; }
  .btn-p { padding: 9px 17px; font-size: 15px; }
  .btn:active { transform: translateY(1px); }
  .btn[disabled] { opacity: .55; cursor: not-allowed; }

  /* ===================================================== hero */
  /* O hero escuro azul é o lugar-comum de todo SaaS. Aqui ele é claro e quem
     carrega a marca é o gradiente dos dois arcos, na borda e nos detalhes. */
  .hero {
    background: var(--claro); color: var(--tinta); padding: 66px 0 84px;
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--marca);
  }
  .hero::after {
    content: ""; position: absolute; z-index: 0;
    width: 620px; height: 620px; right: -230px; top: -180px; border-radius: 50%;
    background: var(--marca); opacity: .07; pointer-events: none;
  }
  .hero .area { position: relative; z-index: 1; }
  .hero .area { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
  .hero .area > * { min-width: 0; }
  @media (max-width: 980px) { .hero .area { grid-template-columns: 1fr; gap: 44px; } }

  .selo {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(12,216,167,.12); border: 1px solid rgba(6,168,125,.35);
    color: var(--verde-fundo); border-radius: 999px; padding: 6px 14px;
    font-size: 13.5px; font-weight: 600;
  }
  .bolinha { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-fundo); }
  @media (prefers-reduced-motion: no-preference) {
    .bolinha { animation: pisca 2.2s ease-in-out infinite; }
    @keyframes pisca { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
  }

  .hero h1 { margin: 20px 0 0; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; font-weight: 700; }
  .hero h1 span {
    background: var(--marca); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--azul);
  }
  .hero .apoio { margin: 18px 0 0; font-size: 18.5px; color: var(--tinta-media); max-width: 48ch; }
  .acoes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
  .sob-acoes { margin: 16px 0 0; font-size: 14.5px; color: var(--tinta-fraca); }

  /* ------------------------------------- faixa de credibilidade
     Números reais, e o pequeno vira argumento: quem atende milhares não sabe
     o nome de ninguém. Inventar volume seria pior que não ter — basta o
     prospecto pedir a lista de clientes. */
  .credito { background: var(--claro-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 30px 0; }
  .credito .area { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  @media (max-width: 760px) { .credito .area { grid-template-columns: 1fr; gap: 22px; text-align: center; } }
  /* mono só onde há número: em texto puro ele lê como código */
  .credito .n {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 29px; font-weight: 700; letter-spacing: -.03em; color: var(--azul-escuro);
    display: block; line-height: 1;
  }
  .credito .n.texto { font-family: var(--fonte); letter-spacing: -.025em; }
  .credito p { margin: 8px 0 0; font-size: 15px; color: var(--tinta-media); line-height: 1.5; max-width: 34ch; }
  @media (max-width: 760px) { .credito p { margin-left: auto; margin-right: auto; } }

  /* ------------------------------------- painel de chamadas */
  .painel {
    background: var(--noite-2); border: 1px solid var(--linha-noite);
    border-radius: 14px; padding: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
  }
  .painel-topo {
    display: flex; align-items: center; gap: 10px; padding-bottom: 14px;
    border-bottom: 1px solid var(--linha-noite); margin-bottom: 14px;
  }
  .painel-topo h2 { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0; }
  .painel-topo .conta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--tinta-fraca); }

  .chamada {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
    padding: 12px 13px; border-radius: var(--r-sm); background: var(--noite-3);
    border: 1px solid transparent; margin-bottom: 9px;
  }
  .chamada:last-child { margin-bottom: 0; }
  .chamada.ativa { border-color: rgba(15,163,152,.45); background: rgba(15,163,152,.09); }
  .ic {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: rgba(56,169,232,.16); color: var(--azul-claro);
  }
  .chamada.ativa .ic { background: rgba(43,199,186,.18); color: var(--verde-claro); }
  .ic svg { width: 17px; height: 17px; }
  .quem { min-width: 0; }
  /* número e descrição em linhas próprias: como spans em linha, o texto longo
     quebrava no meio e empurrava o cartão */
  .quem .n {
    display: block; font-family: var(--mono); font-size: 14.5px; color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .quem .d {
    display: block; font-size: 12.5px; color: var(--areia); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .estado { font-size: 12.5px; font-weight: 600; color: var(--areia); text-align: right; white-space: nowrap; }
  .chamada.ativa .estado { color: var(--verde-claro); }
  .estado .t { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--tinta-fraca); font-weight: 400; font-variant-numeric: tabular-nums; }

  .painel-pe {
    margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--linha-noite);
    display: flex; gap: 22px; font-size: 12.5px; color: var(--tinta-fraca);
  }
  .painel-pe b { display: block; font-family: var(--mono); font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; }
  .ilustrativo { margin: 10px 0 0; font-size: 11.5px; color: #55708A; text-align: center; }

  /* ===================================================== seções */
  section { padding: 78px 0; }
  .cinza { background: var(--claro-2); }

  .titulo { max-width: 60ch; }
  .titulo h2 { font-size: clamp(27px, 3.3vw, 37px); line-height: 1.15; font-weight: 700; }
  .titulo p { margin: 14px 0 0; font-size: 18px; color: var(--tinta-media); }

  .grade { display: grid; gap: 22px; margin-top: 46px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
  .cartao {
    background: var(--claro); border: 1px solid var(--linha); border-radius: var(--r);
    padding: 26px 24px;
  }
  .cinza .cartao { box-shadow: 0 12px 32px -26px rgba(12,27,42,.5); }
  .cartao .ic-c {
    width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: rgba(0,122,195,.1); color: var(--azul); margin-bottom: 16px;
  }
  .cartao .ic-c svg { width: 20px; height: 20px; }
  .cartao h3 { font-size: 18px; font-weight: 650; margin-bottom: 7px; }
  .cartao p { margin: 0; font-size: 15.5px; color: var(--tinta-media); }

  /* ------------------------------------- como funciona */
  .passos { display: grid; gap: 26px; margin-top: 46px; grid-template-columns: repeat(3, 1fr); counter-reset: p; }
  @media (max-width: 820px) { .passos { grid-template-columns: 1fr; } }
  .passo { padding-top: 22px; border-top: 3px solid var(--azul); }
  .passo h3 { font-size: 19px; font-weight: 650; margin-bottom: 8px; }
  .passo p { margin: 0; color: var(--tinta-media); font-size: 15.5px; }

  /* ------------------------------------- planos */
  .planos { display: grid; gap: 22px; margin-top: 46px; grid-template-columns: repeat(3, 1fr); align-items: start; }
  @media (max-width: 900px) { .planos { grid-template-columns: 1fr; } }
  .plano {
    background: var(--claro); border: 1px solid var(--linha); border-radius: var(--r);
    padding: 30px 26px; display: flex; flex-direction: column; gap: 18px;
  }
  .plano.destaque {
    border-color: var(--azul); box-shadow: 0 20px 44px -28px rgba(0,122,195,.6);
    position: relative; padding-top: 34px;
  }
  .fita {
    position: absolute; top: 0; left: 26px; transform: translateY(-50%);
    background: var(--azul); color: #fff; font-size: 12.5px; font-weight: 650;
    padding: 5px 13px; border-radius: 999px;
  }
  .plano h3 { font-size: 20px; font-weight: 700; }
  .plano .para { margin: -12px 0 0; font-size: 14.5px; color: var(--tinta-fraca); }
  .preco { display: flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .preco b { font-size: 38px; font-weight: 700; letter-spacing: -.035em; }
  .preco small { font-size: 13.5px; color: var(--tinta-fraca); font-family: var(--fonte); }
  .plano ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .plano li { display: flex; gap: 10px; font-size: 15.5px; color: var(--tinta-media); }
  .plano li svg { flex: none; width: 18px; height: 18px; color: var(--verde); margin-top: 2px; }
  .plano .btn { width: 100%; margin-top: auto; }

  .nota {
    margin-top: 26px; font-size: 15.5px; color: var(--tinta-media);
    max-width: 70ch; padding-top: 18px; border-top: 1px solid var(--linha);
  }
  .nota b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); }

  /* ------------------------------------- quem cuida */
  .cuida { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
  .cuida > * { min-width: 0; }
  @media (max-width: 880px) { .cuida { grid-template-columns: 1fr; gap: 30px; } }
  .marcos { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
  .marco { background: var(--claro); padding: 20px 22px; }
  .marco b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--azul); letter-spacing: -.03em; }
  .marco span { font-size: 14.5px; color: var(--tinta-media); }

  /* ------------------------------------- perguntas */
  .perg { margin-top: 40px; border-top: 1px solid var(--linha); }
  .perg details { border-bottom: 1px solid var(--linha); }
  .perg summary {
    cursor: pointer; padding: 19px 0; font-size: 17.5px; font-weight: 600;
    list-style: none; display: flex; align-items: center; gap: 14px;
  }
  .perg summary::-webkit-details-marker { display: none; }
  .perg summary::after {
    content: ""; margin-left: auto; flex: none; width: 11px; height: 11px;
    border-right: 2px solid var(--tinta-fraca); border-bottom: 2px solid var(--tinta-fraca);
    transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
  }
  .perg details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
  .perg p { margin: 0 0 20px; color: var(--tinta-media); max-width: 68ch; font-size: 16px; }

  /* ------------------------------------- cadastro */
  .fecho { background: var(--noite); color: #fff; padding: 84px 0; }
  .fecho .area { display: grid; grid-template-columns: 1fr 452px; gap: 56px; align-items: start; }
  .fecho .area > * { min-width: 0; }
  @media (max-width: 940px) { .fecho .area { grid-template-columns: 1fr; gap: 40px; } }
  .fecho h2 { font-size: clamp(29px, 4vw, 44px); line-height: 1.1; font-weight: 700; }
  .fecho p { margin: 16px 0 0; font-size: 18.5px; color: var(--areia); max-width: 48ch; }

  .garantias { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .garantias li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; color: var(--areia); }
  .garantias svg { flex: none; width: 18px; height: 18px; color: var(--verde-claro); margin-top: 3px; }
  .fecho .tel { margin-top: 30px; font-size: 15.5px; color: var(--tinta-fraca); }
  .fecho .tel a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }

  .ficha {
    background: var(--claro); border-radius: 14px; padding: 30px;
    box-shadow: 0 34px 70px -30px rgba(0,0,0,.75); color: var(--tinta);
  }
  .ficha h3 { font-size: 21px; font-weight: 700; }
  .ficha .sub { margin: 7px 0 24px; font-size: 15px; color: var(--tinta-media); }

  .campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
  .campo label { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
  .campo input, .campo select {
    font: inherit; font-size: 16px; color: var(--tinta); background: var(--claro);
    padding: 12px 13px; border: 1px solid var(--linha); border-radius: var(--r-sm);
    width: 100%; transition: border-color .16s ease, box-shadow .16s ease;
  }
  .campo input:hover, .campo select:hover { border-color: var(--tinta-fraca); }
  .campo input:focus, .campo select:focus {
    outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,122,195,.16);
  }
  .campo input::placeholder { color: var(--tinta-fraca); }
  .campo select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D93A8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 17px; padding-right: 38px;
  }
  .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: end; }
  @media (max-width: 420px) { .dupla { grid-template-columns: 1fr; gap: 0; } }

  .campo.erro input, .campo.erro select { border-color: #D23B3B; }
  .campo.erro input:focus, .campo.erro select:focus { box-shadow: 0 0 0 3px rgba(210,59,59,.16); }
  .recado { font-size: 13.5px; color: #C22E2E; }

  /* campo isca: some da tela e do leitor de tela, robô preenche */
  .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .ficha .btn { width: 100%; margin-top: 6px; }
  .ficha .letra-miuda { margin: 15px 0 0; font-size: 13px; color: var(--tinta-fraca); line-height: 1.5; }
  .aviso {
    margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-sm);
    background: #FCEDED; border: 1px solid #F0C6C6; color: #9B2323; font-size: 14.5px;
  }

  .pronto { text-align: center; padding: 14px 0 8px; }
  .pronto .marca-ok {
    width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
    background: rgba(15,163,152,.12); color: var(--verde);
    display: flex; align-items: center; justify-content: center;
  }
  .pronto .marca-ok svg { width: 27px; height: 27px; }
  .pronto h3 { font-size: 21px; }
  .pronto p { margin: 12px 0 0; font-size: 15.5px; color: var(--tinta-media); }
  .pronto b { color: var(--tinta); }

  .girando { display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: gira .7s linear infinite; }
  @keyframes gira { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2s; } }

  footer { background: var(--noite); color: #6E88A2; padding: 0 0 44px; font-size: 14.5px; }
  footer .area { border-top: 1px solid var(--linha-noite); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
  footer a { color: var(--areia); text-decoration: none; }
  footer a:hover { color: #fff; }

  /* No rodapé quem assina é a empresa, não o produto: aqui vai a logo
     completa, com "tecnologia". Fica em selo claro porque o "cw2" é marinho. */
  .rodape-marca { display: flex; align-items: center; gap: 14px; }
  .rodape-marca img { height: 30px; width: auto; background: #fff; padding: 7px 10px; border-radius: 6px; }
  @media (max-width: 560px) { .rodape-marca { flex-direction: column; align-items: flex-start; gap: 10px; } }

  /* ------------------------------------- zap */
  /* O widget de chat ocupa o canto direito com uma área invisível maior que o
     próprio botão, e ela engolia o clique daqui. Este vai para a esquerda: os
     dois canais convivem e cada um recebe o próprio toque. */
  .zap {
    position: fixed; left: 20px; bottom: 20px; z-index: 50;
    display: inline-flex; align-items: center; gap: 9px;
    background: #128C7E; color: #fff; text-decoration: none;
    padding: 13px 19px; border-radius: 999px; font-weight: 600; font-size: 15px;
    box-shadow: 0 14px 30px -12px rgba(18,140,126,.75);
  }
  .zap:hover { background: #0F7A6C; }
  .zap svg { width: 19px; height: 19px; }
  /* no celular o botão flutuante cobre o botão do formulário; sai de cena
     enquanto o cadastro está na tela, onde o WhatsApp não é a ação principal */
  .zap { transition: opacity .2s ease, visibility .2s ease; }
  .zap.recolhido { opacity: 0; visibility: hidden; }
  @media (max-width: 560px) { .zap span { display: none; } .zap { padding: 15px; left: 16px; bottom: 16px; } }