/* Componentes da contabilidade institucional (base, tema escuro).

   ORIGEM. Este arquivo nasceu como um <style> inline dentro da
   src/content/contabilidade-consultiva.html. Ele não tem um único seletor de
   id: é a definição BASE dos componentes (.repos, .steps, .creds, .scope,
   .cform, os cards .pain.svc, a .tese), e a contabilidade.css só os repinta
   para o tema claro.

   POR QUE SAIU DE LÁ. A /contabilidade-em-blumenau precisa exatamente dos
   mesmos componentes. Enquanto a base morava inline numa página, a segunda
   carregava só a repintura e não a definição: o resultado era grid de uma
   coluna e SVG sem largura esticando para mais de 1200px de altura. A escolha
   era duplicar 7,6 KB de CSS ou promover a base a folha compartilhada, e o
   repositório proíbe duplicar.

   ORDEM DE CARGA. Esta folha vem ANTES da contabilidade.css, que sobrescreve
   para o tema claro. Inverter a ordem devolve o tema escuro.

   Quem carrega: /contabilidade-consultiva e /contabilidade-em-blumenau.
*/
/* ===== Cor da página ===== */
  :root{--page-c:var(--teal)}

  /* ===== Hero: trust em cor da página ===== */
  .hero .sub b{color:var(--white)}

  /* ===== Bloco de->para (status quo do mercado contábil) ===== */
  .repos{display:grid;gap:12px;max-width:880px;margin:48px auto 0;text-align:left}
  .repos-row{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:16px;padding:18px 22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  }
  .repos-row .de{color:var(--muted);font-size:15px;line-height:1.45}
  .repos-row .para{color:var(--white);font-size:15px;font-weight:500;line-height:1.45}
  .repos-row .arrow{
    flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    background:rgba(91,192,190,.1);border:1px solid rgba(91,192,190,.3);color:var(--teal);
  }
  .repos-row .arrow svg{width:15px;height:15px}
  @media(max-width:640px){
    .repos-row{grid-template-columns:1fr;gap:8px;text-align:left}
    .repos-row .arrow{transform:rotate(90deg);margin:2px 0}
  }

  /* ===== Tese em destaque ===== */
  .tese{
    max-width:880px;margin:48px auto 0;padding:34px 36px;border-radius:20px;text-align:center;
    background:linear-gradient(180deg,rgba(91,192,190,.06),rgba(57,114,253,.04));
    border:1px solid rgba(91,192,190,.18);
    box-shadow:0 0 60px -24px rgba(91,192,190,.4), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .tese p{font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.35;color:var(--white)}
  .tese p b{font-weight:700;color:var(--teal)}
  .tese .tese-sig{margin-top:14px;font-size:15px;color:var(--muted);font-weight:500}

  /* ===== Cards de serviço (pain reaproveitado, acento teal) ===== */
  .pain.svc .ic{color:#5E72A8}
  .pain.svc:hover .ic{color:var(--teal);background:rgba(91,192,190,.1)}
  .pain.svc .ic svg{width:19px;height:19px}
  .svc-note{text-align:center;margin-top:40px;font-size:15px;color:var(--muted)}
  .svc-note b{color:rgba(255,255,255,.9)}

  /* ===== Como funciona: passos ===== */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;text-align:left}
  .step{
    position:relative;border-radius:20px;padding:28px 26px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
    border:1px solid var(--line-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -36px rgba(0,0,0,.7);
    backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
    transition:transform .25s ease;
  }
  .step:hover{transform:translateY(-5px)}
  .step .num{
    font-family:'Maven Pro';font-size:13px;font-weight:700;letter-spacing:.14em;
    color:var(--teal);margin-bottom:14px;
  }
  .step h3{font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin-bottom:10px}
  .step p{font-size:14.5px;color:var(--muted);line-height:1.6}
  @media(max-width:900px){.steps{grid-template-columns:1fr;gap:14px}}

  /* ===== Credenciais (responsabilidade técnica) ===== */
  .creds{display:grid;grid-template-columns:1fr;gap:16px;max-width:680px;margin:44px auto 0;text-align:left}
  .cred{
    display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .cred .badge{
    flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--teal);
    background:rgba(91,192,190,.1);border:1px solid rgba(91,192,190,.28);
  }
  .cred .badge svg{width:20px;height:20px}
  .cred .nm{font-size:15.5px;font-weight:600;color:var(--white);letter-spacing:-.01em}
  .cred .reg{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
  @media(max-width:560px){.creds{grid-template-columns:1fr}}

  /* ===== Recorte de público (atende / não atende) ===== */
  .scope{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:48px auto 0;text-align:left}
  .scope-box{border-radius:18px;padding:26px 26px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .scope-box .stit{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--white);margin-bottom:16px}
  .scope-box .stit .dot{width:9px;height:9px;border-radius:50%}
  .scope-box.yes .stit .dot{background:var(--green)}
  .scope-box.no .stit .dot{background:var(--orange)}
  .scope-box ul{list-style:none;display:grid;gap:10px}
  .scope-box li{font-size:14px;color:var(--muted);line-height:1.5;display:flex;gap:10px;align-items:flex-start}
  .scope-box li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:8px}
  .scope-box.no li::before{background:var(--muted-2)}
  @media(max-width:640px){.scope{grid-template-columns:1fr}}

  /* ===== Contato (formulario de fechamento) copiado da home v1 ===== */
  .contato-head{max-width:760px;margin:0 auto}
  .cform{
    max-width:620px;margin:44px auto 0;text-align:left;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:22px;padding:30px 28px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -36px rgba(0,0,0,.7);
    backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  }
  .cform .field{margin-bottom:16px}
  .cform .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .cform label{display:block;font-size:13px;font-weight:600;color:var(--white);margin-bottom:7px;letter-spacing:-.01em}
  .cform label .req{color:var(--teal)}
  .cform input,.cform select,.cform textarea{
    width:100%;font-family:'Maven Pro',sans-serif;font-size:14.5px;color:var(--white);
    background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;transition:border-color .2s, background .2s;
  }
  .cform textarea{resize:vertical;min-height:96px}
  .cform input::placeholder,.cform textarea::placeholder{color:var(--muted-2)}
  .cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--teal);background:rgba(91,192,190,.06)}
  .cform select{appearance:none;-webkit-appearance:none;cursor:pointer}
  .cform-submit{width:100%;margin-top:6px}
  .cform-msg{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center;min-height:18px}
  .cform-msg.err{color:var(--orange-soft)}
  .cform-done{display:none;text-align:center;padding:30px 10px;max-width:620px;margin:44px auto 0}
  .cform-done.show{display:block}
  .cform-done .ok{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--green)}
  .cform-done h3{font-size:20px;font-weight:600;margin-bottom:8px}
  .cform-done p{font-size:14.5px;color:var(--muted);max-width:420px;margin:0 auto}
  .contato-alt{margin-top:26px;font-size:14px;color:var(--muted)}
  .contato-alt a{color:var(--teal);font-weight:600}
  @media(max-width:560px){.cform .two{grid-template-columns:1fr;gap:16px}}