/* ============================================================
   Click Guincho — IDENTIDADE REAL (extraída do site)
   Roxo #4A07B3 · Verde #21C24E · Laranja #F26B0A · Preto #1C1C1C
   Carregar DEPOIS de site.css e layout-v3.css.
   ============================================================ */
:root{
  --brand:#4A07B3;          /* roxo principal (hero, footer) */
  --brand-deep:#37047F;
  --brand-2:#6A18D6;
  --green:#21C24E;          /* CTA / WhatsApp */
  --green-deep:#1AA340;
  --orange:#F26B0A;         /* acentos, kicker, logo, highlight */
  --orange-deep:#D25905;

  /* remapeia tokens existentes para a marca real */
  --amber:#F26B0A;          /* "amber" passa a ser laranja */
  --amber-deep:#D25905;
  --ink:#262626;            /* faixas escuras / texto forte */
  --ink-2:#1C1C1C;
  --ink-soft:#33313a;
  --red:#1C1C1C;            /* topbar usa var(--red) → preto */
  --red-deep:#0A0A0A;
  --paper:#F9F9F9;
  --paper-2:#F2EEFA;        /* lilás bem claro */
  --line:#E7E1F2;
  --muted:#6c6a78;
  --display:'Poppins', system-ui, sans-serif;
  --body:'Poppins', system-ui, sans-serif;
}

/* tipografia mais pesada combina com o site */
.lp-h2,.v2h2,.faq summary,.featc h3,.stat b,.eyebrow,.kicker,.lp-kick{letter-spacing:-.005em}
/* títulos um pouco mais finos (pedido do cliente) */
.lp-hero h1,.lp-h2,.waband h2{font-weight:800}
.featc h3,.lp-tabs .media .yrs b,.lp-hero .phone{font-weight:800}
.srv-item h3,.towc h3{font-weight:800}
.srv-left h2{font-weight:600;text-transform:none;letter-spacing:0}

/* ---------- TOPBAR (preto) ---------- */
.topbar{background:#1C1C1C;color:#fff;letter-spacing:.04em}
.topbar .dot{background:var(--green)}

/* ---------- HEADER (branco) ---------- */
header{background:#fff;border-bottom:1px solid #ECE7F5}
.logo b{color:#3A0A9E}
.logo small{color:var(--orange)}
.logo .mark{background:var(--orange);color:#fff}
.nav-links a{color:#33303B}
.nav-links a:hover{color:var(--orange)}
.menu-btn{color:#3A0A9E}

/* ---------- BOTÕES ---------- */
.btn-wa{background:var(--green);color:#fff;box-shadow:0 10px 26px -10px rgba(33,194,78,.55)}
.btn-wa:hover{background:var(--green-deep)}
.btn-call{background:var(--orange);color:#fff;box-shadow:0 10px 26px -10px rgba(242,107,10,.5)}
.btn-call:hover{background:var(--orange-deep)}
.btn-amber{background:var(--orange);color:#fff;box-shadow:0 10px 26px -10px rgba(242,107,10,.5)}
.btn-amber:hover{background:var(--orange-deep)}

/* ---------- HERO (roxo) ---------- */
.lp-hero{background:var(--brand)}
.lp-hero::after{background:
  linear-gradient(180deg, rgba(60,8,150,.74) 0%, rgba(45,5,118,.70) 45%, rgba(34,4,92,.86) 100%),
  radial-gradient(900px 480px at 80% -5%, rgba(120,50,230,.45), transparent 60%);}
.lp-hero .eyebrow2{background:var(--green);color:#fff;padding:9px 18px;border-radius:999px;letter-spacing:.04em}
.lp-hero .eyebrow2 .check{color:#fff}
.lp-hero .callnow{color:#3FE680}
.lp-hero .phone{color:#fff}
.lp-hero .phone svg{color:#FF9A4D}
.lp-hero .lp-quick a.solid{background:var(--green);border-color:var(--green);color:#fff}
.lp-hero .lp-quick a.solid svg{color:#fff}
.lp-hero .lp-quick a:hover{border-color:#FF9A4D;background:rgba(242,107,10,.16)}
.lp-hero .lp-quick a svg{color:#FF9A4D}
.lp-hero .lp-allserv:hover{color:#FF9A4D;border-color:#FF9A4D}

/* ---------- KICKERS / HIGHLIGHTS (laranja) ---------- */
.lp-kick,.kicker{color:var(--orange-deep)}
.lp-h2 .hl,.v2h2 .hl{color:var(--orange-deep)}

/* ---------- ATENDIMENTO 24h (charcoal) ---------- */
.atend{background:#262626}
.atend .lp-kick{color:#FF9A4D}

/* ---------- FORM WHATSAPP (roxo) ---------- */
.waform{background:var(--brand)}
.waform .lp-kick{color:#FF9A4D}
.waform .lp-h2{color:#fff}
.waform p{color:#E8E0F7}
.waform input:focus{outline-color:var(--brand-2)}

/* ---------- TABS badge ---------- */
.lp-tabs .media .yrs{background:#262626}
.lp-tabs .media .yrs b{color:var(--orange)}
.tabs-head button.active{background:var(--brand);border-color:var(--brand)}

/* ---------- CTA BAND (charcoal) ---------- */
.waband{background:#262626}
.waband h2 .hl{color:#3FE680}

/* ---------- FAQ ---------- */
.faq[open]{border-color:var(--orange)}
.faq[open] summary .pm{background:var(--orange)}
.faq[open] summary .pm svg{color:#fff}

/* ---------- REGION LINKS / CHIPS ---------- */
.lp-rl:hover{border-color:var(--orange)}
.lp-rl:hover svg{color:var(--orange-deep)}
.cats a:hover{border-color:var(--orange)}
.cats a svg{color:var(--brand)}
.cities-inline svg{color:var(--brand)}

/* ---------- FOOTER (roxo) ---------- */
footer{background:var(--brand-deep)}
.foot-grid a{color:#d9ccf2}
.foot-grid a:hover{color:#FF9A4D}
.foot-about p{color:#cdbeec}
.foot-bottom{border-top-color:rgba(255,255,255,.14);color:#b6a6d8}
.news input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.news button{background:var(--orange);color:#fff}

/* ---------- STICKY / FLOAT ---------- */
.sticky-cta{background:rgba(28,28,28,.96)}
.wa-float{background:var(--green);box-shadow:0 12px 30px -8px rgba(33,194,78,.6)}

/* ============================================================
   AJUSTES — títulos em ROXO da marca + seções refinadas
   ============================================================ */
/* títulos (antes pretos) agora em roxo; .hl continua laranja */
.lp-h2{color:var(--brand)}
.featc h3,.towc h3,.faq summary{color:var(--brand)}

/* Seção "Confira alguns de nossos serviços": fundo e botão roxos */
.srv-right{background:var(--brand)}
.srv-right::before{background:radial-gradient(600px 500px at 10% -10%, rgba(255,255,255,.10), transparent 60%)}
.srv-quote{background:var(--brand-deep)}
.srv-quote:hover{background:#2a0463}
.srv-item h3{color:#fff}
.srv-item .ic{color:#FFB070}

/* "Linha completa de serviços" — grid organizado de cards */
#cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1060px;margin:44px auto 0}
#cats a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;justify-content:flex-start;gap:13px;font-size:13.5px;letter-spacing:.01em;box-shadow:0 8px 22px -16px rgba(74,7,179,.5);transition:transform .18s,box-shadow .2s,border-color .2s}
#cats a:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 16px 28px -16px rgba(74,7,179,.55)}
#cats a svg{width:38px;height:38px;padding:9px;border-radius:10px;background:var(--paper-2);color:var(--brand);box-sizing:border-box;flex:none}
@media(max-width:980px){#cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){#cats{grid-template-columns:repeat(2,1fr)}}