/* ==========================================================================
   Citricus PostForge - Template "artblog" (frontend)
   Escopo: .artblog   |   Nao colide com o legado .pfWrap
   Cores/fontes herdam do tema via var() e font-family:inherit
   ========================================================================== */
/* ===================================================================
   ART CERCAS - TEMPLATE DE ARTIGO DE BLOG
   Cole inteiro dentro de UM unico Avada Code Block.
   Paleta editavel logo abaixo (--navy / --azul / --ciano).
   =================================================================== */
.artblog{
  --navy:#062b4f;      /* azul escuro */
  --azul:#0a58a6;      /* azul principal */
  --azul2:#1e88d4;     /* azul medio */
  --ciano:#35b6e8;     /* azul claro / destaque */
  --zap:#25d366;       /* verde whatsapp */
  --ink:#0e1622;--muted:#54606f;--soft:#7f8b99;
  --line:#e4ebf3;--line2:#eef3f9;--bg2:#f4f8fc;--bg3:#e9f2fa;
  --sh:0 14px 36px rgba(10,88,166,.14);--shs:0 4px 16px rgba(10,88,166,.09);
  font-family:inherit;color:var(--muted);line-height:1.75;font-size:16px;overflow:visible}
.artblog *{box-sizing:border-box}
.artblog img{max-width:100%;height:auto;display:block}
.artblog a{color:inherit;text-decoration:none}
/* Compensacao do container do tema (Avada).
   --pad-tema  = padding lateral que o tema aplica no conteudo
   --topo-tema = espaco acima do conteudo, para colar o hero no header
   Ajuste estes dois valores se o tema mudar. */
.artblog{--pad-tema:30px;--topo-tema:55px}
.artblog .ab-full{width:100vw;max-width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw!important;margin-right:-50vw!important}
/* primeira secao encosta no header */
.artblog>*:first-child{margin-top:calc(var(--topo-tema) * -1)}
/* fora das faixas .ab-full o tema JA limita a largura: nao aplicar inset de novo */
.artblog>.ab-sec>.ab-wrap{padding-left:0;padding-right:0}
.artblog .ab-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.artblog .ab-sec{padding:64px 0}

/* ---------- reveal ---------- */
.artblog .ab-rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.artblog .ab-rv.ab-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.artblog .ab-rv{opacity:1;transform:none}}

/* ---------- BOTOES ---------- */
.artblog .ab-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;border:none;position:relative;overflow:hidden;transition:.25s;text-decoration:none;line-height:1}
.artblog .ab-btn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.artblog .ab-btn::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-22deg);transition:left .55s;pointer-events:none}
.artblog .ab-btn:hover::after{left:130%}
.artblog .ab-btnZap,.artblog .ab-btnZap:hover,.artblog .ab-btnZap:visited{background:linear-gradient(180deg,#2fdc72,var(--zap));color:#fff!important;box-shadow:0 10px 24px rgba(37,211,102,.32)}
.artblog .ab-btnZap:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(37,211,102,.42)}

.artblog .ab-btnO,.artblog .ab-btnO:hover,.artblog .ab-btnO:visited{background:transparent;border:1.6px solid var(--azul);color:var(--azul)!important}
.artblog .ab-btnO:hover{background:var(--azul);color:#fff!important}

/* =================== 1. HERO =================== */
.artblog .ab-hero{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(6,43,79,.62),rgba(6,43,79,.80)),url('https://artcercas.com.br/wp-content/uploads/2026/05/banner-desktop-01.jpg') center/cover no-repeat}
.artblog .ab-heroIn{position:relative;z-index:2;max-width:900px;padding:90px 26px}
.artblog .ab-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px;backdrop-filter:blur(4px)}
.artblog .ab-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ciano);box-shadow:0 0 0 4px rgba(53,182,232,.3)}
.artblog .ab-hero h1{font-size:clamp(32px,5vw,56px);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em;margin:0 0 20px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.artblog .ab-hero h1 em{font-style:normal;color:var(--ciano)}
.artblog .ab-heroSub{font-size:clamp(16px,2vw,19px);color:rgba(255,255,255,.93);max-width:700px;margin:0 auto 26px}
.artblog .ab-heroMeta{display:inline-flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;font-size:13.5px;color:rgba(255,255,255,.9)}
.artblog .ab-heroMeta span{display:inline-flex;align-items:center;gap:7px}
.artblog .ab-heroMeta svg{width:16px;height:16px;stroke:var(--ciano);fill:none;stroke-width:2}
.artblog .ab-heroActions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

/* =================== 2. INTRO 2 COLUNAS + DROP CAP =================== */
.artblog .ab-ey{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--azul);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.artblog .ab-ey::before{content:"";width:26px;height:2px;background:var(--ciano)}
.artblog h2.ab-h2{font-size:clamp(25px,3.4vw,36px);font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin:0 0 26px}
.artblog h2.ab-h2 em{font-style:normal;color:var(--azul)}
.artblog .ab-introCols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.artblog .ab-introCols::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--ciano),var(--azul));border-radius:2px}
.artblog .ab-introCols p{font-size:17px;color:var(--ink);line-height:1.85;font-weight:500;margin:0;text-align:justify}
.artblog .ab-dropcap::first-letter{float:left;font-size:64px;line-height:.9;font-weight:800;color:var(--azul);margin:4px 12px 0 0;font-family:inherit}
@media (max-width:860px){.artblog .ab-introCols{grid-template-columns:1fr;gap:26px}.artblog .ab-introCols::before{display:none}}

/* =================== 3. DEPOIMENTOS (stories) =================== */
.artblog .ab-depo{background:linear-gradient(160deg,var(--navy) 0%,var(--azul) 100%);padding:70px 0;position:relative;overflow:hidden}
.artblog .ab-depo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%)}
.artblog .ab-depoHead{position:relative;z-index:2;text-align:center;margin-bottom:36px}
.artblog .ab-depoHead .ab-ey{color:var(--ciano);justify-content:center}
.artblog .ab-depoHead .ab-ey::before{background:var(--ciano)}
.artblog .ab-depoHead h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;margin:0 0 10px;letter-spacing:-.02em}
.artblog .ab-depoHead h2 em{font-style:normal;color:var(--ciano)}
.artblog .ab-depoHead p{color:rgba(255,255,255,.82);max-width:640px;margin:0 auto;font-size:16px}
.artblog .ab-depoGrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:620px){.artblog .ab-depoGrid{grid-template-columns:1fr;max-width:340px;margin:0 auto}}
.artblog .ab-depoCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px;transition:transform .3s,border-color .3s}
.artblog .ab-depoCard:hover{transform:translateY(-6px);border-color:var(--ciano)}
.artblog .ab-depoVid{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:9/16;cursor:pointer}
.artblog .ab-depoVid video{width:100%;height:100%;object-fit:cover;display:block}
.artblog .ab-depoOv{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.38);transition:opacity .35s,background .35s}
.artblog .ab-depoVid.ab-on .ab-depoOv{opacity:0;pointer-events:none}
.artblog .ab-depoSound{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.artblog .ab-depoVid:hover .ab-depoSound{transform:scale(1.08);background:rgba(255,255,255,.28)}
.artblog .ab-depoSound svg{width:32px;height:32px;fill:#fff}
.artblog .ab-depoHint{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.artblog .ab-depoCard h4{color:#fff;font-size:16.5px;font-weight:700;margin:0 6px 6px;line-height:1.3}
.artblog .ab-depoCard p{color:rgba(255,255,255,.72);font-size:14px;margin:0 6px 8px;line-height:1.6}
.artblog .ab-depoStars{width:130px;height:21px;margin:18px 6px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 24' fill='%23ffc531'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/g%3E%3Cg transform='translate(31,0)'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/g%3E%3Cg transform='translate(62,0)'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/g%3E%3Cg transform='translate(93,0)'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/g%3E%3Cg transform='translate(124,0)'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left center;background-size:contain}
.artblog .ab-depoStars svg{width:21px;height:21px;fill:#ffc531}

/* =================== 4. BANNER IMAGEM + OVERLAY =================== */
.artblog .ab-banner{position:relative;border-radius:24px;overflow:hidden;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:var(--sh)}
.artblog .ab-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.artblog .ab-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(6,43,79,.86) 0%,rgba(10,88,166,.68) 52%,rgba(53,182,232,.48) 100%)}
.artblog .ab-bannerIn{position:relative;z-index:2;padding:64px 28px;max-width:760px}
.artblog .ab-bannerIn h3{font-size:clamp(23px,3.2vw,36px);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.02em;margin:0 0 26px;text-shadow:0 3px 10px rgba(0,0,0,.35)}
.artblog .ab-bannerIn h3 em{font-style:normal;text-decoration-line:underline;text-decoration-color:var(--ciano);text-decoration-thickness:3px;text-underline-offset:6px}

/* =================== 5. 2 COLUNAS COM TITULO =================== */

/* =================== 6. 3 CARDS COM ICONE =================== */
.artblog .ab-zone{background:linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 40%,#fff 100%);position:relative;overflow:hidden}
.artblog .ab-zone::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(10,88,166,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(10,88,166,.16) 1px,transparent 1px),linear-gradient(rgba(10,88,166,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,88,166,.07) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
.artblog .ab-zone>*{position:relative;z-index:1}
.artblog .ab-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
@media (max-width:860px){.artblog .ab-cards3{grid-template-columns:1fr}}
.artblog .ab-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.artblog .ab-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ciano),var(--azul));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.artblog .ab-card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent}
.artblog .ab-card:hover::before{transform:scaleX(1)}
.artblog .ab-cIco{width:58px;height:58px;border-radius:16px;background:linear-gradient(150deg,var(--bg3),#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.artblog .ab-cIco svg{width:29px;height:29px;stroke:var(--azul);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.artblog .ab-card h4{font-size:18.5px;font-weight:700;color:var(--ink);margin:0 0 10px}
.artblog .ab-card p{font-size:14.8px;color:var(--muted);line-height:1.7;margin:0}

/* =================== 7. FAQ =================== */

/* =================== 8. BARRA CTA =================== */
.artblog .ab-cta{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(120deg,rgba(6,43,79,.92) 0%,rgba(10,88,166,.86) 55%,rgba(53,182,232,.66) 100%),url('https://artcercas.com.br/wp-content/uploads/2026/05/cerca-protecao-piscina-005.jpg') center/cover no-repeat}
.artblog .ab-ctaIn{position:relative;z-index:2;text-align:center;max-width:800px;padding:64px 26px}
.artblog .ab-cta h3{font-size:clamp(26px,4vw,40px);font-weight:800;color:#fff;line-height:1.14;letter-spacing:-.02em;margin:0 0 16px}
.artblog .ab-cta h3 em{font-style:normal;text-decoration-line:underline;text-decoration-color:var(--ciano);text-decoration-thickness:3px;text-underline-offset:6px}
.artblog .ab-cta p{color:rgba(255,255,255,.92);font-size:17px;margin:0 0 28px}
.artblog .ab-ctaStats{display:flex;gap:44px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.artblog .ab-ctaStats b{display:block;font-size:38px;font-weight:800;color:#fff;line-height:1}
.artblog .ab-ctaStats span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:6px}
.artblog .ab-ctaActions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* =================== 9. ASSINATURA =================== */
.artblog .ab-sig{position:relative;background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 55%,#fff 100%);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--sh);padding:20px}
.artblog .ab-sig::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;border:1.5px solid rgba(10,88,166,.16);top:-100px;right:-80px;pointer-events:none}
.artblog .ab-sig::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;border:1.5px solid rgba(53,182,232,.2);bottom:-78px;left:-58px;pointer-events:none}
.artblog .ab-sigGrid{position:relative;z-index:1;display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center}
@media (max-width:680px){.artblog .ab-sigGrid{grid-template-columns:1fr;gap:20px}}
.artblog .ab-sigImg{border-radius:20px;overflow:hidden;border:3px solid var(--azul);box-shadow:var(--shs)}
.artblog .ab-sigImg img{width:100%;height:330px;object-fit:cover;object-position:center}
.artblog .ab-sigBody{padding:6px 12px}
.artblog .ab-sigPill{display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.artblog .ab-sigPill svg{width:13px;height:13px;stroke:var(--ciano);fill:none;stroke-width:2.4}
.artblog .ab-sigBody h3{font-size:24px;font-weight:800;color:var(--ink);margin:0 0 6px;line-height:1.25}
.artblog .ab-sigBody h3 span{color:var(--azul)}

.artblog .ab-sigBody p{font-size:14.8px;line-height:1.75;margin:0 0 18px;max-width:620px}
.artblog .ab-sigActions{display:flex;flex-wrap:wrap;gap:12px}

/* =================== 10. BARRA DE SERVICOS =================== */
.artblog .ab-svc{position:relative;background:var(--bg2);border-top:1px solid var(--line);padding:64px 0;overflow:hidden}
.artblog .ab-svcHead{text-align:center;margin-bottom:36px}
.artblog .ab-svcHead .ab-pill2{display:inline-block;padding:7px 18px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.artblog .ab-svcHead h3{font-size:27px;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.02em}
.artblog .ab-svcHead h3 em{font-style:normal;color:var(--azul)}
.artblog .ab-svcRow{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.artblog .ab-svcItem{width:150px;text-align:center}
.artblog .ab-svcImg{width:122px;height:122px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 10px 26px rgba(10,88,166,.18);margin:0 auto 12px;transition:transform .25s,border-color .25s}
.artblog .ab-svcItem a:hover .ab-svcImg{transform:translateY(-5px);border-color:var(--ciano)}
.artblog .ab-svcImg img{width:100%;height:100%;object-fit:cover}
.artblog .ab-svcItem span{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;display:block}

/* ---------- divisores ---------- */

/* ===================================================================
   RESPONSIVO - ajustes finos
   =================================================================== */

/* --- ATENCAO: nao usar overflow/clip no .artblog. Qualquer valor diferente
       de visible cria contexto de recorte e impede as faixas .ab-full de
       escaparem do container do tema. Se aparecer scroll horizontal,
       resolva com overflow-x:hidden no BODY (nivel de tema), nunca aqui. --- */

/* --- TABLET --- */
@media (max-width:1024px){
  .artblog .ab-wrap{padding:0 22px}
  .artblog .ab-sec{padding:52px 0}
  .artblog .ab-introCols{gap:38px}
  
  .artblog .ab-depoGrid{gap:16px}
  .artblog .ab-depoCard{padding:10px}
  .artblog .ab-depoCard h4{font-size:15px}
  .artblog .ab-depoCard p{font-size:13px}
  .artblog .ab-depoSound{width:58px;height:58px}
  .artblog .ab-depoSound svg{width:25px;height:25px}
  .artblog .ab-depoHint{font-size:10px;bottom:12px}
  .artblog .ab-card{padding:26px 22px}
  .artblog .ab-sigImg img{height:290px}
}

/* --- MOBILE --- */
@media (max-width:768px){
  .artblog{font-size:15.5px}
  .artblog .ab-wrap{padding:0 18px}
  .artblog .ab-sec{padding:44px 0}

  /* texto justificado vira alinhado a esquerda (evita rios de espaco) */
  .artblog .ab-introCols p,
  .artblog .ab-introCols p{font-size:16px}
  
  .artblog .ab-dropcap::first-letter{font-size:52px;margin:2px 9px 0 0}

  /* hero */
  .artblog .ab-hero{min-height:auto}
  .artblog .ab-heroIn{padding:70px 20px}
  .artblog .ab-heroMeta{gap:8px 16px;font-size:12.5px}
  .artblog .ab-heroActions{margin-top:26px}

  /* botoes empilhados ocupam a largura util */
  .artblog .ab-heroActions,.artblog .ab-ctaActions,.artblog .ab-sigActions{flex-direction:column;align-items:stretch}
  .artblog .ab-heroActions .ab-btn,.artblog .ab-ctaActions .ab-btn,.artblog .ab-sigActions .ab-btn,.artblog .ab-bannerIn .ab-btn{
    width:100%;max-width:330px;margin:0 auto;justify-content:center;padding:15px 22px}

  /* depoimentos */
  .artblog .ab-depo{padding:52px 0}
  .artblog .ab-depoGrid{gap:20px}
  .artblog .ab-depoCard{padding:12px}
  .artblog .ab-depoCard h4{font-size:16px}
  .artblog .ab-depoCard p{font-size:13.8px}
  .artblog .ab-depoSound{width:66px;height:66px}
  .artblog .ab-depoSound svg{width:28px;height:28px}
  .artblog .ab-depoStars svg{width:19px;height:19px}

  /* banner com overlay */
  .artblog .ab-banner{min-height:330px;border-radius:18px}
  .artblog .ab-bannerIn{padding:46px 22px}

  /* cards */
  .artblog .ab-cards3{gap:16px;margin-top:26px}
  .artblog .ab-card{padding:24px 20px}
  .artblog .ab-cIco{width:52px;height:52px;margin-bottom:14px}
  .artblog .ab-cIco svg{width:26px;height:26px}

  /* faq */
  
  
  
  

  /* cta */
  .artblog .ab-cta{min-height:auto}
  .artblog .ab-ctaIn{padding:52px 20px}
  .artblog .ab-ctaStats{gap:0 26px;margin-bottom:26px}
  .artblog .ab-ctaStats b{font-size:29px}
  .artblog .ab-ctaStats span{font-size:10px}
  .artblog .ab-cta p{font-size:16px}

  /* assinatura */
  .artblog .ab-sig{padding:14px;border-radius:20px}
  .artblog .ab-sigImg img{height:240px}
  .artblog .ab-sigBody{padding:4px 4px 10px}
  .artblog .ab-sigBody h3{font-size:21px}

  /* servicos */
  .artblog .ab-svc{padding:48px 0}
  .artblog .ab-svcRow{gap:18px}
  .artblog .ab-svcItem{width:calc(33.333% - 12px);min-width:96px}
  .artblog .ab-svcImg{width:100%;height:auto;aspect-ratio:1/1;max-width:110px}
  .artblog .ab-svcItem span{font-size:12.5px}
}

/* --- CELULAR PEQUENO --- */
@media (max-width:420px){
  .artblog .ab-wrap{padding:0 15px}
  .artblog .ab-heroIn{padding:60px 15px}
  .artblog .ab-dropcap::first-letter{font-size:46px}
  .artblog .ab-ctaStats{gap:0 18px}
  .artblog .ab-ctaStats b{font-size:25px}
  .artblog .ab-svcItem{width:calc(50% - 9px)}
  .artblog .ab-banner{min-height:290px}
}

/* =================== CHECKLIST (12 itens, 2 colunas) =================== */
.artblog .ab-checkSec{background:#fff}
.artblog .ab-checkHead{text-align:center;margin-bottom:34px}
.artblog .ab-checkPill{display:inline-block;padding:7px 18px;border-radius:999px;background:var(--bg3);
  color:var(--azul);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.artblog .ab-checkHead h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--ink);
  line-height:1.18;letter-spacing:-.02em;margin:0;max-width:820px;margin-inline:auto}
.artblog .ab-checkHead h2 em{font-style:normal;color:var(--azul)}

.artblog .ab-checkList{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 42px;
  max-width:1000px;margin-inline:auto}
@media (max-width:820px){.artblog .ab-checkList{grid-template-columns:1fr;gap:0}}

.artblog .ab-checkList li{position:relative;display:flex;align-items:flex-start;gap:13px;
  padding:15px 0 15px 2px;border-bottom:1px solid var(--line2);
  font-size:15.8px;line-height:1.6;color:var(--ink);font-weight:500}
/* remove a borda do ultimo item de cada coluna */
.artblog .ab-checkList li:nth-last-child(-n+2){border-bottom:0}
@media (max-width:820px){
  .artblog .ab-checkList li:nth-last-child(-n+2){border-bottom:1px solid var(--line2)}
  .artblog .ab-checkList li:last-child{border-bottom:0}
}
/* caixinha de check azul */
.artblog .ab-checkList li::before{content:"";flex:0 0 24px;width:24px;height:24px;margin-top:1px;
  border-radius:7px;background:var(--azul);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size:15px 15px;background-repeat:no-repeat;background-position:center;
  box-shadow:0 3px 9px rgba(10,88,166,.28);transition:transform .2s}
.artblog .ab-checkList li:hover::before{transform:scale(1.08)}

/* =================== COMO FAZEMOS (2 colunas) =================== */
.artblog .ab-procSec{padding-top:0}
.artblog .ab-procHead{text-align:center;margin-bottom:30px}
.artblog .ab-procHead h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--ink);
  line-height:1.18;letter-spacing:-.02em;margin:0;max-width:760px;margin-inline:auto}
.artblog .ab-procHead h2 em{font-style:normal;color:var(--azul)}
.artblog .ab-procCols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;
  max-width:1000px;margin-inline:auto}
.artblog .ab-procCols::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:1px;
  transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--line),transparent)}
.artblog .ab-procCols p{margin:0;font-size:16.5px;line-height:1.85;color:var(--muted);text-align:justify}
@media (max-width:860px){
  .artblog .ab-procCols{grid-template-columns:1fr;gap:22px}
  .artblog .ab-procCols::before{display:none}
  .artblog .ab-procCols p{text-align:left;font-size:15.8px}
}

/* =================== FAQ (compacto e a prova de tema) ===================
   O .ab-fq e um <button>. Temas costumam declarar regras de botao com
   !important, o que derruba o display e faz o "+" cair para baixo do texto.
   Por isso o layout aqui e travado com !important nas 3 propriedades
   criticas: display, alinhamento e largura.
   ==================================================================== */
.artblog .ab-faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shs);margin-top:22px}
.artblog .ab-fitem{border-bottom:1px solid var(--line)}
.artblog .ab-fitem:last-child{border-bottom:0}

.artblog .ab-fq{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:14px;width:100%!important;box-sizing:border-box;
  margin:0!important;padding:15px 18px!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;text-align:left!important;text-transform:none!important;
  letter-spacing:normal!important;line-height:1.4!important;
  font-family:inherit;font-size:15.5px;font-weight:700;color:var(--ink);
  cursor:pointer;transition:background .18s}
.artblog .ab-fq:hover{background:var(--bg2)!important}
.artblog .ab-fq span{flex:1 1 auto;min-width:0}

.artblog .ab-ftog{flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--bg3);color:var(--azul);
  display:flex!important;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;line-height:1;
  transition:transform .22s,background .22s,color .22s}
.artblog .ab-fitem.ab-open .ab-ftog{transform:rotate(45deg);background:var(--azul);color:#fff}

.artblog .ab-fa{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .2s ease,padding .26s ease;
  padding:0 18px;font-size:15px;line-height:1.7;color:var(--muted)}
.artblog .ab-fitem.ab-open .ab-fa{max-height:600px;opacity:1;padding:0 18px 16px}

@media (max-width:768px){
  .artblog .ab-fq{padding:13px 15px!important;font-size:14.8px}
  .artblog .ab-fa{padding:0 15px;font-size:14.5px}
  .artblog .ab-fitem.ab-open .ab-fa{padding:0 15px 14px}
}

/* =================== ICONES (todos via CSS) ===================
   Nunca usar <svg> inline no HTML do post: o WordPress remove essas tags
   ao salvar (wp_kses_post) e os icones desaparecem. Pintando por
   background-image o icone vive na folha de estilo, fora do alcance de
   qualquer filtro de conteudo.
   ============================================================ */
.artblog .ab-ico{display:block;width:29px;height:29px;background-repeat:no-repeat;
  background-position:center;background-size:contain}
.artblog .ab-ico-0{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a58a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.artblog .ab-ico-1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a58a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8 4-16 3 8h4'/%3E%3C/svg%3E")}
.artblog .ab-ico-2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a58a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 4v16'/%3E%3C/svg%3E")}
.artblog .ab-ico-3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a58a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.artblog .ab-ico-4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a58a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.artblog .ab-ico-5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a58a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z'/%3E%3C/svg%3E")}

/* estrelas dos depoimentos: 5 copias do mesmo icone */
.artblog .ab-depoStars{height:21px;margin:18px 6px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z' fill='%23ffc531'/%3E%3C/svg%3E");background-repeat:repeat-x;
  background-size:21px 21px;width:calc(21px * 5 + 7px * 4);
  background-position:left center}

/* botao de som sobre o video */
.artblog .ab-depoSound{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 2.3v2.1c3 .9 5 3.5 5 7.6s-2 6.7-5 7.6v2.1c4.2-.9 7-4.7 7-9.7s-2.8-8.8-7-9.7z'/%3E%3C/svg%3E");background-repeat:no-repeat;
  background-position:center;background-size:28px 28px}

/* icone do WhatsApp nos botoes verdes */
.artblog .ab-btnZap::before{content:"";width:19px;height:19px;flex:0 0 19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.2-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.4zM12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:contain}

/* check da linha de meta do hero */
.artblog .ab-metaItem::before{content:"";width:16px;height:16px;flex:0 0 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335b6e8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:contain}
.artblog .ab-metaItem{display:inline-flex;align-items:center;gap:7px}

/* ── BLINDAGEM DE FONTE ──────────────────────────────────────────────
   Regras globais de terceiros (Font Awesome, Bootstrap, plugins) podem
   definir font-family em nomes genericos. Como todo o layout aqui herda
   a fonte do tema, declaramos inherit explicitamente nos elementos de
   texto: se algo externo tentar impor uma fonte, esta regra vence pela
   especificidade do escopo .artblog.
   ────────────────────────────────────────────────────────────────── */
.artblog,.artblog *,.artblog *::before,.artblog *::after{font-family:inherit}
/* excecao: os icones SVG nao usam fonte, e o ::first-letter do drop cap
   precisa herdar tambem (senao pega a fonte do UA) */
.artblog .ab-dropcap::first-letter{font-family:inherit}