/* ============================================================================
   kvoip.com.br — folha de estilo
   As variáveis, as fontes e os raios vêm do componente "Pacote KVOIP + Woulz"
   que já existe na home do site (bloco de HTML dentro do Elementor). Não
   inventei paleta: esta é a do site.
   ========================================================================== */
:root{
  --branco:#FCFCFC;
  --cinza-bg:#EEF0F6;
  --ciano:#58C9EA;
  --ciano-esc:#2fa8cc;
  --navy:#1A1F36;
  --azul:#036CE9;          /* a cor dos botões do site */
  --azul-esc:#0257bb;
  --texto:#4B5563;
  --texto-esc:#1A1F36;
  --wpp:#25D366;
  --wpp-esc:#1aad55;
  --borda:rgba(88,201,234,.18);
  --linha:#e3e7ef;
  --grafite:#333333;
  --grafite-2:#353535;
  --vinho:#2E0000;
  --r-sm:10px; --r-md:18px; --r-lg:28px;
  --maxw:1160px;
  --t:.35s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.7;
  color:var(--texto);background:var(--branco);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:'Roboto',system-ui,sans-serif;color:var(--texto-esc);line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.5vw,2.7rem);font-weight:700}
h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600}
p{font-size:1.05rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.centro{text-align:center}
.sec{padding:76px 0}
.sec-cinza{background:var(--cinza-bg)}
.sec-grafite{background:var(--grafite);color:#fff}
.sec-grafite h2,.sec-grafite h3{color:#fff}
.sec-grafite p{color:rgba(255,255,255,.78)}

/* ─── botões ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.98rem;
  padding:14px 26px;border-radius:var(--r-sm);border:2px solid transparent;
  transition:var(--t);cursor:pointer;white-space:normal;text-align:center}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-esc);transform:translateY(-2px)}
.btn-wpp{background:var(--wpp);color:#fff}
.btn-wpp:hover{background:var(--wpp-esc);transform:translateY(-2px)}
.btn-linha{background:transparent;color:var(--azul);border-color:var(--azul)}
.btn-linha:hover{background:var(--azul);color:#fff}
.btn-branco{background:#fff;color:var(--navy)}
.btn-branco:hover{transform:translateY(-2px)}
.btn-lg{padding:16px 32px;font-size:1.02rem}
.btn-sm{padding:10px 18px;font-size:.88rem}

/* ─── barra de topo (clara, como no site) ────────────────────────────── */
.barra-topo{background:#fff;border-bottom:1px solid var(--linha);font-size:.82rem;color:var(--texto)}
.barra-topo .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:9px;padding-bottom:9px}
.barra-topo a{color:var(--texto);transition:var(--t);display:inline-flex;align-items:center;gap:6px}
.barra-topo a:hover{color:var(--azul)}
.barra-rot{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--azul)}
.barra-login{display:flex;gap:26px;margin:0 auto}
.barra-dir{display:flex;gap:22px;align-items:center}

/* ─── cabeçalho ──────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:60;background:rgba(252,252,252,.96);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
.marca img{height:38px;width:auto}
.menu{display:flex;gap:24px;margin:0 auto;align-items:center}
.menu>a,.menu .abre{font-weight:500;font-size:.96rem;color:var(--texto-esc);transition:var(--t);
  padding:8px 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px}
.menu>a:hover,.menu .abre:hover,
.menu>a[aria-current=page],.menu .abre[aria-current=page]{color:var(--azul);border-bottom-color:var(--azul)}
.seta{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.6}

/* submenus: abrem no passar do mouse E no foco pelo teclado */
.tem-sub{position:relative}
.mega,.sub{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  background:#fff;border:1px solid var(--linha);border-radius:var(--r-md);
  box-shadow:0 22px 60px rgba(26,31,54,.14);padding:26px 30px;
  opacity:0;visibility:hidden;transition:var(--t);z-index:70}
.tem-sub:hover .mega,.tem-sub:hover .sub,
.tem-sub:focus-within .mega,.tem-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega{width:min(860px,92vw)}
.mega-wrap{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:30px}
.mega h4,.sub h4{font-family:'Roboto',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azul);margin-bottom:14px}
.mega ul,.sub ul{display:flex;flex-direction:column;gap:11px}
.mega a,.sub a{font-size:.94rem;color:var(--texto-esc);transition:var(--t);display:block}
.mega a:hover,.sub a:hover{color:var(--azul)}
.mega-cta{background:var(--cinza-bg);border-radius:var(--r-sm);padding:20px;margin:-6px -8px}
.mega-cta p{font-size:.9rem;margin-bottom:12px}
.mega-cta>a{font-weight:600;color:var(--azul)}
.sub{width:max-content;min-width:220px;padding:20px 24px}

/* ─── redes sociais no cabeçalho ─────────────────────────────────────── */
.menu-mob{display:none}
.topo-dir{display:flex;align-items:center;gap:14px}
.redes{display:flex;gap:13px;align-items:center}
.redes a{color:var(--texto);transition:var(--t);display:grid;place-items:center}
.redes a:hover{color:var(--azul);transform:translateY(-2px)}

/* ─── hero ───────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--cinza-bg) 0%,var(--branco) 100%);
  padding:64px 0 72px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--azul)}
.hero-lead{font-size:1.14rem;margin-bottom:28px;max-width:52ch}
.hero-acoes{display:flex;gap:12px;flex-wrap:wrap}
.hero-img img{border-radius:var(--r-lg)}

/* ─── faixa de atalhos ───────────────────────────────────────────────── */
.atalhos{background:var(--branco);border-bottom:1px solid var(--linha)}
.atalhos .wrap{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  padding-top:26px;padding-bottom:26px}
.atalhos .btn{min-width:172px}

/* ─── etiqueta ───────────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ciano-esc);
  background:rgba(88,201,234,.1);border:1px solid var(--borda);
  padding:7px 15px;border-radius:999px;margin-bottom:16px}
.tag span{width:7px;height:7px;border-radius:50%;background:var(--ciano)}

/* ─── grades e cartões ───────────────────────────────────────────────── */
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:center}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--r-md);
  padding:30px 26px;transition:var(--t)}
.cartao:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(26,31,54,.09);
  border-color:var(--borda)}
.cartao img{width:58px;height:58px;object-fit:contain;margin-bottom:16px}
.cartao h3{margin-bottom:10px}
.cartao p{font-size:.98rem}
.cartao-claro{background:transparent;border-color:rgba(255,255,255,.14)}
.cartao-claro:hover{background:rgba(255,255,255,.04)}
.cartao-claro img{margin:0 auto 16px}

/* ─── lista com check ────────────────────────────────────────────────── */
.checks{display:flex;flex-direction:column;gap:13px;margin:22px 0}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.checks svg{flex:none;margin-top:4px;color:var(--ciano-esc)}

/* ─── vídeo ──────────────────────────────────────────────────────────── */
.video-capa{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 12px 32px rgba(26,31,54,.10)}
/* AQUI estava o escuro que sobrou depois de eu tirar o véu.
   O `hqdefault.jpg` do YouTube tem 480×360 — quatro por três. O vídeo é
   dezesseis por nove. Então o arquivo traz o quadro no meio e TARJA PRETA
   em cima e embaixo, e era isso que aparecia: duas faixas pretas grudadas
   na miniatura, que não existem quando se assiste no YouTube.
   Recortar em 16/9 joga as tarjas para fora. Vale para qualquer miniatura
   que chegue, inclusive as de reserva. */
.video-capa img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
/* A capa NÃO leva véu escuro por cima.
   Havia aqui um `background:rgba(26,31,54,.18)` cobrindo a miniatura inteira,
   para o botão de play "destacar". O efeito colateral é que todo vídeo do site
   aparecia mais escuro do que é no YouTube — a miniatura clara virava cinza.
   O botão se destaca sozinho: é um círculo azul cheio, com um anel branco e
   uma sombra própria. A imagem fica como o autor a fez. */
.video-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;z-index:2;
  background:var(--azul);border-radius:50%;display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(255,255,255,.30), 0 10px 26px rgba(3,108,233,.40);
  transition:var(--t)}
.video-capa:hover .video-play{transform:scale(1.08);
  box-shadow:0 0 0 8px rgba(255,255,255,.38), 0 12px 30px rgba(3,108,233,.48)}
.video-play svg{fill:#fff;margin-left:4px}
/* O player que entra no lugar da capa. A proporcao fica travada em 16:9 para
   a pagina nao dar um pulo quando a capa sai e o video entra. */
.video-caixa{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;
  border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:var(--sombra-md)}
.video-caixa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Nenhuma miniatura serviu: a moldura ganha o azul da marca em vez de ficar
   cinza — e, sobretudo, ganha uma ALTURA. Sem a imagem dentro dela o <a>
   virava 0x0 e sumia da tela. */
.video-capa.sem-capa{width:100%;aspect-ratio:16/9;
  background:linear-gradient(160deg,#1d4ed8,#0b1e4f)}

/* ─── certificações ──────────────────────────────────────────────────── */
.selos{display:flex;gap:44px;align-items:center;justify-content:center;flex-wrap:wrap}
.selos img{max-height:74px;width:auto;filter:grayscale(.15)}

/* ─── perguntas frequentes ───────────────────────────────────────────── */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:'Roboto',sans-serif;font-weight:600;font-size:1.06rem;color:#F0F0F0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;font-weight:400;color:var(--ciano);transition:var(--t)}
.faq details[open] summary::after{content:"\2212"}
.faq-texto{padding:0 0 22px;color:rgba(255,255,255,.76);font-size:.99rem}
.faq-texto p{font-size:.99rem;margin-bottom:9px}
.faq-texto p:last-child{margin-bottom:0}

/* ─── rodapé ─────────────────────────────────────────────────────────── */
.rodape{background:var(--vinho);color:rgba(255,255,255,.72);padding:64px 0 28px}
.rodape h3{color:#fff;font-size:1rem;margin-bottom:16px}
.rodape a{color:rgba(255,255,255,.72);transition:var(--t)}
.rodape a:hover{color:var(--ciano)}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
.rodape-grade ul{display:flex;flex-direction:column;gap:10px;font-size:.94rem}
.rodape img{height:40px;width:auto;margin-bottom:18px}
.rodape p{font-size:.94rem}
/* Razão social, endereço e CNPJ. Uma faixa própria entre os links e o aviso de
   direitos: são dados de identificação, não navegação. */
.rodape-empresa{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;font-size:.9rem;
  color:rgba(255,255,255,.62)}
.rodape-empresa strong{color:#fff;font-weight:600;letter-spacing:.02em}
.rodape-base{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;
  color:rgba(255,255,255,.5)}

/* ─── botão flutuante do WhatsApp ────────────────────────────────────── */
.wpp-flut{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;
  border-radius:50%;background:var(--wpp);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.42);transition:var(--t)}
.wpp-flut:hover{transform:scale(1.07)}

/* ─── celular ────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-img{order:-1}
  .grade-2{grid-template-columns:1fr;gap:28px}
  .rodape-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .barra-login{display:none}
}
@media (max-width:760px){
  .menu,.topo-dir{display:none}
  .barra-topo .wrap{justify-content:center}
  .menu-mob{display:flex;gap:8px;overflow-x:auto;padding:11px 18px;
    background:var(--navy);scrollbar-width:none}
  .menu-mob::-webkit-scrollbar{display:none}
  .menu-mob a{white-space:nowrap;font-size:.86rem;font-weight:500;color:#fff;
    background:rgba(255,255,255,.1);padding:8px 14px;border-radius:999px}
  .menu-mob a[aria-current=page]{background:var(--azul)}
  .grade-3{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr}
  .sec{padding:56px 0}
  .barra-topo .wrap{gap:14px;font-size:.78rem}
}
/* nada rola de lado: filho de grid nasce sem poder encolher */
@media (max-width:980px){
  .grade-2>*,.grade-3>*,.hero .wrap>*{min-width:0}
  h1,h2,h3,p,li{overflow-wrap:anywhere}
}

  /* ════════════════════════════════════════════
     KVP — Variáveis isoladas (não usa :root global)
  ════════════════════════════════════════════ */
  .kvp-pacote-section {
    --kvp-white:      #FCFCFC;
    --kvp-gray-bg:    #EEF0F6;
    --kvp-cyan:       #58C9EA;
    --kvp-cyan-dark:  #2fa8cc;
    --kvp-navy:       #1A1F36;
    --kvp-text-main:  #4B5563;
    --kvp-text-dark:  #1A1F36;
    --kvp-whatsapp:   #25D366;
    --kvp-whatsapp-d: #1aad55;
    --kvp-border:     rgba(88,201,234,0.18);
    --kvp-radius-sm:  10px;
    --kvp-radius-md:  18px;
    --kvp-radius-lg:  28px;
    --kvp-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ─── Reset escopado ao componente ─── */
  .kvp-pacote-section,
  .kvp-pacote-section *,
  .kvp-pacote-section *::before,
  .kvp-pacote-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .kvp-pacote-section {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    color: var(--kvp-text-main);
  }
  .kvp-pacote-section img { display: block; max-width: 100%; }
  .kvp-pacote-section a { text-decoration: none; color: inherit; }
  .kvp-pacote-section ul { list-style: none; }
  .kvp-pacote-section h2,
  .kvp-pacote-section h3 {
    font-family: 'Roboto', sans-serif;
    color: var(--kvp-text-dark);
    line-height: 1.2;
  }
  .kvp-pacote-section h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .kvp-pacote-section h3 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
  }
  .kvp-pacote-section p { font-size: 1.05rem; }

  /* ─── Container ─── */
  .kvp-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ─── Tag label ─── */
  .kvp-tag-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--kvp-cyan);
    background: rgba(88,201,234,0.12); border: 1px solid rgba(88,201,234,0.25);
    border-radius: 40px; padding: 6px 16px; margin-bottom: 20px;
  }
  .kvp-tag-label span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--kvp-cyan); display: inline-block;
  }

  /* ─── Buttons ─── */
  .kvp-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem;
    border-radius: 50px; padding: 14px 32px; cursor: pointer;
    border: none; transition: var(--kvp-transition); white-space: nowrap;
    position: relative; overflow: hidden;
  }
  .kvp-btn::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.15); opacity: 0;
    transition: opacity 0.2s;
  }
  .kvp-btn:hover::after { opacity: 1; }
  .kvp-btn-primary {
    background: linear-gradient(135deg, var(--kvp-cyan), var(--kvp-cyan-dark));
    color: #fff !important; box-shadow: 0 4px 24px rgba(88,201,234,0.35); 
  }
  .kvp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(88,201,234,0.45); }
  .kvp-btn-whatsapp {
    background: linear-gradient(135deg, var(--kvp-whatsapp), var(--kvp-whatsapp-d));
    color: #fff !important; box-shadow: 0 4px 24px rgba(37,211,102,0.35);
  }
  .kvp-btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(37,211,102,0.45); }

  /* ─── Reveal Animations ─── */
  /* O conteúdo nasce VISÍVEL. A animação só entra quando o JS confirma que
     está vivo (html.js). Sem isso, um bloqueador de script ou um erro de rede
     deixaria a seção inteira com opacidade zero — invisível, sem erro nenhum. */
  html.js .kvp-reveal {
    opacity: 0; transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  html.js .kvp-reveal.kvp-visible { opacity: 1; transform: none; }
  html.js .kvp-reveal-delay-1 { transition-delay: 0.1s; }
  html.js .kvp-reveal-delay-2 { transition-delay: 0.2s; }
  html.js .kvp-reveal-delay-3 { transition-delay: 0.3s; }

  /* ════════════════════════════════════════════
     PACOTE COMPLETO — Seção principal
  ════════════════════════════════════════════ */
  .kvp-pacote-section {
    background: linear-gradient(170deg, #0f1421 0%, var(--kvp-navy) 50%, #0e1a2e 100%);
    padding: 96px 0;
    position: relative;
    overflow: hidden;
  }
  .kvp-pacote-section::before {
    content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 400px;
    background: radial-gradient(ellipse, rgba(88,201,234,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .kvp-pacote-section::after {
    content: ''; position: absolute; bottom: -60px; right: -60px;
    width: 350px; height: 350px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37,211,102,0.07) 0%, transparent 70%);
    pointer-events: none;
  }

  .kvp-pacote-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 24px;
    position: relative; z-index: 1;
  }
  .kvp-pacote-header .kvp-tag-label { justify-content: center; }
  .kvp-pacote-header h2 { color: #fff; margin-bottom: 16px; }
  .kvp-pacote-header h2 em { font-style: normal; color: var(--kvp-cyan); }
  .kvp-pacote-header p {
    color: rgba(255,255,255,0.65); font-size: 1.1rem;
    line-height: 1.8; margin-bottom: 12px;
  }

  /* Anchor badge "incluso ao contratar VoIP" */
.kvp-pacote-anchor {
    display: flex;              /* era inline-flex */
    width: fit-content;
    margin: 0 auto 56px;        /* centraliza horizontalmente */
    align-items: center; gap: 10px;
    background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.3);
    border-radius: 40px; padding: 8px 20px;
    font-size: 0.82rem; font-weight: 600; color: var(--kvp-whatsapp);
    position: relative; z-index: 1;
}
  .kvp-pacote-anchor svg { flex-shrink: 0; }

  /* Grid de produtos */
  .kvp-pacote-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative; z-index: 1;
    margin-bottom: 48px;
  }
  .kvp-pacote-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(88,201,234,0.15);
    border-radius: var(--kvp-radius-md);
    padding: 28px 22px;
    transition: var(--kvp-transition);
    position: relative;
    overflow: hidden;
  }
  .kvp-pacote-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--kvp-cyan), transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s;
  }
  .kvp-pacote-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(88,201,234,0.35);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  }
  .kvp-pacote-card:hover::before { transform: scaleX(1); }

  .kvp-pacote-card-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--kvp-whatsapp);
    background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25);
    border-radius: 20px; padding: 3px 10px; margin-bottom: 16px;
  }
  .kvp-pacote-card-badge::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--kvp-whatsapp);
  }

  .kvp-pacote-card-icon { font-size: 2rem; margin-bottom: 14px; line-height: 1; }
  .kvp-pacote-card h3 {
    font-size: 1rem; font-weight: 700; color: #fff;
    margin-bottom: 10px; line-height: 1.3;
  }
  .kvp-pacote-card p {
    font-size: 0.85rem; color: rgba(255,255,255,0.55);
    line-height: 1.65;
  }

  /* Faixa de CTA inferior */
  .kvp-pacote-cta-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(88,201,234,0.18);
    border-radius: var(--kvp-radius-md);
    padding: 28px 36px;
    position: relative; z-index: 1;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .kvp-pacote-cta-strip-text strong {
    display: block; font-family: 'Roboto', sans-serif;
    font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 4px;
  }
  .kvp-pacote-cta-strip-text span {
    font-size: 0.9rem; color: rgba(255,255,255,0.55);
  }
  .kvp-pacote-cta-strip-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }

  /* ════════════════════════════════════════════
     RESPONSIVO
  ════════════════════════════════════════════ */
  @media (max-width: 1024px) {
    .kvp-pacote-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .kvp-pacote-section { padding: 64px 0; }
    .kvp-pacote-grid { grid-template-columns: 1fr 1fr; }
    .kvp-pacote-cta-strip { flex-direction: column; text-align: center; }
    .kvp-pacote-cta-strip-actions { justify-content: center; }
  }
  @media (max-width: 480px) {
    .kvp-pacote-grid { grid-template-columns: 1fr; }
  }
  
@media (max-width: 480px) {
  .kvp-pacote-cta-strip {
    padding: 24px 18px;
  }

  .kvp-pacote-cta-strip-text strong {
    font-size: 1.05rem;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .kvp-pacote-cta-strip-text span {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .kvp-pacote-cta-strip-actions {
    width: 100%;
  }

  .kvp-pacote-cta-strip-actions .kvp-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── busca do blog ──────────────────────────────────────────────────── */
.sr-so{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-busca{margin-bottom:30px}
.blog-busca input{width:100%;padding:14px 18px;border:1px solid var(--linha);
  border-radius:var(--r-sm);font:inherit;font-size:1rem;background:#fff;color:var(--texto-esc)}
.blog-busca input:focus{outline:2px solid var(--ciano);outline-offset:1px;border-color:var(--ciano)}
.blog-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.blog-chip{font:inherit;font-size:.86rem;font-weight:500;padding:8px 16px;border-radius:999px;
  border:1px solid var(--linha);background:#fff;color:var(--texto);cursor:pointer;transition:var(--t)}
.blog-chip:hover{border-color:var(--ciano)}
.blog-chip.on{background:var(--azul);border-color:var(--azul);color:#fff}
.post-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--t)}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(26,31,54,.09)}
.post-card-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card h3{font-size:1.08rem;margin:0 20px 10px;line-height:1.35}
.post-card h3 a:hover{color:var(--azul)}
.post-card p{font-size:.94rem;margin:0 20px 16px;flex:1}
.post-meta{display:block;margin:18px 20px 8px;font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ciano-esc)}
.post-meta .tempo{color:var(--texto);font-weight:400;text-transform:none;letter-spacing:0}
.link-mais{margin:0 20px 20px;font-weight:600;font-size:.92rem;color:var(--azul)}
.blog-vazio{text-align:center;padding:40px 0;color:var(--texto)}
@media (max-width:980px){.post-grade{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.post-grade{grid-template-columns:1fr}}

/* ============================================================================
   PÁGINAS INSTITUCIONAIS — .prosa
   O texto veio do WordPress em HTML corrido: <h2>, <h3>, <p>, <ul>, <img>.
   Estas regras dão ritmo de leitura a esse HTML sem exigir que cada parágrafo
   tenha classe. Só valem dentro de .prosa, então nada aqui alcança a home,
   a /planos/ ou os posts.
   ========================================================================== */
.prosa{max-width:74ch;margin:0 auto}
.prosa h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:0 0 20px}
.prosa h2{font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.2;margin:40px 0 14px}
.prosa h3{font-size:1.12rem;line-height:1.3;margin:30px 0 10px;color:var(--texto-esc)}
.prosa h4{font-size:1rem;margin:24px 0 8px;color:var(--texto-esc)}
.prosa p{margin:0 0 16px;line-height:1.75}
.prosa ul,.prosa ol{margin:0 0 18px;padding-left:22px}
.prosa ul{list-style:disc}
.prosa ol{list-style:decimal}
.prosa li{margin:0 0 8px;line-height:1.7}
.prosa a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.prosa a.btn,.prosa a.btn-wpp{text-decoration:none}
.prosa strong,.prosa b{color:var(--texto-esc)}
.prosa img{max-width:100%;height:auto;border-radius:var(--r-lg);display:block;margin:24px auto}
.prosa .tag{margin-bottom:14px}
.prosa .btn{margin:6px 10px 6px 0}
.prosa table{width:100%;border-collapse:collapse;margin:0 0 20px;display:block;overflow-x:auto}
.prosa th,.prosa td{border:1px solid var(--borda);padding:10px 12px;text-align:left;font-size:.95rem}
.prosa th{background:var(--cinza-bg);color:var(--texto-esc)}
/* As páginas legais são longas e sem imagem: coluna um pouco mais estreita e
   títulos menores, para não parecerem uma sucessão de manchetes. */
.prosa-legal{max-width:68ch}
.prosa-legal h2{font-size:1.2rem;margin:32px 0 10px}
.prosa-legal h3{font-size:1.02rem;margin:22px 0 8px}
.prosa-legal p,.prosa-legal li{font-size:.97rem}

/* ============================================================================
   CORPO DO ARTIGO — os 79 posts do blog
   As classes que o gerador de artigo usa (artigo-cabeca, artigo-corpo,
   art-share, art-tag…) não tinham NENHUM estilo nesta folha: ela nasceu para a
   home, a /planos/ e a listagem. O resultado eram posts com o texto todo
   centralizado, listas desalinhadas e os botões de compartilhar amontoados.
   As regras abaixo vêm do site que já publica posts há mais tempo
   (discador.online), com as cores trocadas pelas do KVOIP.
   ========================================================================== */
:root{ --r-pill:999px; --sombra-md:0 10px 30px rgba(26,31,54,.10); --fonte-titulo:Roboto,sans-serif; }

/* O artigo é texto corrido: alinhado à esquerda, sempre. O modelo é recortado
   da listagem do blog, cujo topo é centralizado — sem esta regra o post inteiro
   herdava o `text-align:center` e ficava com cara de convite de casamento. */


.post-meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--azul);margin-bottom:12px;
}
.post-meta .tempo{color:var(--texto);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:12px}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--borda)}
.art-tag{
  font-size:12.5px;font-weight:600;color:var(--azul);
  background:rgba(3,108,233,.09);border:1px solid rgba(3,108,233,.2);
  border-radius:var(--r-pill);padding:5px 13px;
}
.art-tag:hover{background:rgba(3,108,233,.16)}
.artigo-corpo{max-width:720px;margin:0 auto}
.artigo-corpo h2{font-size:clamp(21px,2.4vw,29px);color:var(--texto-esc);margin:44px 0 14px}
.artigo-corpo h3{font-size:19px;color:var(--texto-esc);margin:30px 0 10px}
.artigo-corpo p{font-size:17px;color:var(--texto);line-height:1.78;margin-bottom:18px}
.artigo-corpo ul,.artigo-corpo ol{margin:0 0 22px;padding-left:4px;display:flex;flex-direction:column;gap:10px}
.artigo-corpo ul li{position:relative;padding-left:26px;font-size:16.5px;color:var(--texto);line-height:1.68}
.artigo-corpo ul li::before{
  content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--azul-esc),var(--ciano));
}
.artigo-corpo ol{counter-reset:oi;list-style:none}
.artigo-corpo ol li{counter-increment:oi;position:relative;padding-left:38px;font-size:16.5px;color:var(--texto);line-height:1.68}
.artigo-corpo ol li::before{
  content:counter(oi);position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:8px;background:rgba(3,108,233,.12);color:var(--azul);
  font-family:var(--fonte-titulo);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.artigo-corpo a{color:var(--azul);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* botões dentro do texto não podem herdar a cor de link do artigo */
.artigo-corpo a.btn,.caixa-cta a.btn,.artigo-corpo a.art-tag{text-decoration:none;font-weight:700}
.artigo-corpo a.btn-p,.artigo-corpo a.btn-i,.artigo-corpo a.btn-w,.artigo-corpo a.btn-fantasma,
.caixa-cta a.btn-p,.caixa-cta a.btn-i,.caixa-cta a.btn-w,.caixa-cta a.btn-fantasma{color:#fff}
.artigo-corpo a.btn-linha,.caixa-cta a.btn-linha{color:var(--texto-esc)}
.artigo-corpo a.art-tag{color:var(--azul);font-weight:600}
.artigo-corpo strong{color:var(--texto-esc)}
.artigo-corpo blockquote{
  border-left:3px solid var(--ciano);background:var(--cinza-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;margin:0 0 24px;
  font-size:16.5px;color:var(--texto);line-height:1.7;
}
.artigo-corpo table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:24px}
.artigo-corpo th,.artigo-corpo td{padding:12px 14px;border-bottom:1px solid var(--borda);text-align:left}
.artigo-corpo th{background:var(--cinza-bg);font-family:var(--fonte-titulo);font-size:14px;color:var(--texto-esc)}
.artigo-capa{max-width:880px;margin:26px auto 34px}
.artigo-capa img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-lg);border:1px solid var(--borda);box-shadow:var(--sombra-md);
}
.artigo-cabeca{max-width:720px;margin:0 auto 8px}
.artigo-cabeca h1{font-size:clamp(28px,3.6vw,42px);color:var(--texto-esc);margin-bottom:16px;text-wrap:balance}
.artigo-resumo{font-size:18.5px;color:var(--texto);line-height:1.7;margin-bottom:22px}
.artigo-info{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--texto);
  padding-bottom:26px;border-bottom:1px solid var(--borda);margin-bottom:12px;
}
.artigo-corpo p,.artigo-corpo ul li,.artigo-corpo ol li{font-size:16px}
.artigo-corpo img{border-radius:var(--r-md);margin:18px 0}
.artigo-corpo h2{margin-top:30px}
.artigo-corpo h3{margin-top:20px}
.artigo-corpo p,.artigo-corpo li{margin:12px 0;line-height:1.75}
.artigo-corpo ul,.artigo-corpo ol{padding-left:24px}
.artigo-corpo ul{list-style:disc}
/* ==========================================================================
   Simetria do corpo do post
   ==========================================================================
   Estas regras vem DEPOIS das outras de proposito: elas fecham os buracos que
   deixavam um post sair diferente do outro, sem mexer no que ja funcionava.

   - text-align:left explicito. Sem isso, um bloco herdava "center" de uma
     secao acima e um paragrafo do meio do texto saia centralizado.
   - imagem, video, tabela e bloco de codigo nao podem estourar a largura da
     coluna no celular; a imagem mantem a proporcao (height:auto).
   - margem dos titulos com espaco maior ANTES do que DEPOIS: e o que faz a
     hierarquia se enxergar, porque o titulo fica colado no texto dele.
   ========================================================================== */
.artigo-corpo, .art-body { text-align: left; }
.artigo-corpo img, .art-body img,
.artigo-corpo video, .art-body video,
.artigo-corpo iframe, .art-body iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.artigo-corpo figure, .art-body figure { max-width: 100%; margin: 22px 0; }
.artigo-corpo table, .art-body table { width: 100%; display: block; overflow-x: auto; }
.artigo-corpo pre, .art-body pre { max-width: 100%; overflow-x: auto; }
.artigo-corpo h2, .art-body h2 { margin-top: 44px; margin-bottom: 14px; }
.artigo-corpo h3, .art-body h3 { margin-top: 30px; margin-bottom: 10px; }
.artigo-corpo h2:first-child, .art-body h2:first-child,
.artigo-corpo h3:first-child, .art-body h3:first-child { margin-top: 0; }
.artigo-corpo p, .art-body p { line-height: 1.78; }
.artigo-corpo li, .art-body li { line-height: 1.68; }
.artigo-corpo > *:last-child, .art-body > *:last-child { margin-bottom: 0; }
/* ==========================================================================
   Figura gerada no corpo do post
   ==========================================================================
   A imagem de IA entra como <figure class="art-figura">. As regras aqui sao
   deliberadamente poucas: cantos, respiro e a legenda menor que o texto.

   - aspect-ratio + object-fit: a caixa ja tem altura ANTES de a imagem
     carregar, entao o texto nao pula quando ela chega (o "salto de layout"
     que o Google penaliza).
   - a legenda e centralizada e menor: ela comenta a imagem, nao concorre com
     o corpo do texto.
   ========================================================================== */
.artigo-corpo .art-figura, .art-body .art-figura { margin: 26px 0; }
.artigo-corpo .art-figura img, .art-body .art-figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.artigo-corpo .art-figura figcaption, .art-body .art-figura figcaption {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.5;
  opacity: .72;
  text-align: center;
}
.artigo-corpo .art-figura .art-credito, .art-body .art-figura .art-credito {
  display: block;
  font-size: 12px;
  opacity: .78;
}
.artigo-corpo .art-figura .art-credito a, .art-body .art-figura .art-credito a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ==========================================================================
   Colagem com formatação no painel
   ==========================================================================
   O corpo do post virou um editor onde dá para colar do Word, do Google Docs
   e de sites. Estas duas tags passaram a chegar e não tinham regra: sem isto
   o h4 sai no tamanho padrão do navegador e o itálico some em alguns temas.
   ========================================================================== */
.artigo-corpo h4, .art-body h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.artigo-corpo em, .art-body em { font-style: italic; }
.artigo-corpo td p:last-child, .art-body td p:last-child { margin-bottom: 0; }
/* ==========================================================================
   Compartilhar o post
   ==========================================================================
   São links comuns, não widgets: nenhum script de rede social entra no site.
   O botão oficial de cada rede traz centenas de kB de outro domínio e marca
   quem lê com cookie antes de a pessoa clicar em nada — um <a href> faz o
   mesmo e não custa nada.
   ========================================================================== */
.art-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--borda, #e6eaf2);
}
.art-share-label { font-size: 13.5px; font-weight: 700; margin-right: 4px; }
.art-share-bt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 50px; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid var(--borda, #e6eaf2); background: #fff; color: #334155;
  cursor: pointer; font-family: inherit; transition: transform .12s ease, box-shadow .12s ease;
}
.art-share-bt:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.10); }
/* A cor da marca só entra no hover: em repouso a barra fica sóbria e não
   compete com o texto do artigo. */
.art-share-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.art-share-linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.art-share-facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.art-share-x:hover        { background: #0f172a; border-color: #0f172a; color: #fff; }
.art-share-email:hover    { background: #475569; border-color: #475569; color: #fff; }
.art-share-copiar.ok      { background: #dcfce7; border-color: #86efac; color: #166534; }
.art-share { gap: 6px; }
.art-share-bt { padding: 8px 12px; font-size: 12.5px; }
.art-share-label { width: 100%; margin-bottom: 2px; }
/* --------------------------------------------------------------------------
   A mesma barra, no topo, com outro peso
   --------------------------------------------------------------------------
   No fim do post a barra pode ser cheia: não há mais nada disputando atenção.
   No topo não — ali é o espaço mais caro da página, e uma fileira de botões
   entre o título e o primeiro parágrafo empurra o texto para baixo e atrapalha
   quem veio ler. Então a versão de cima vira uma linha de links do tamanho da
   data e do autor: ocupa quase nada e lê como informação do post.
   -------------------------------------------------------------------------- */
.art-share-topo {
  margin: 10px 0 0; padding-top: 0; border-top: 0; gap: 4px 10px; font-size: 13px;
}
.art-share-topo .art-share-label { font-weight: 600; opacity: .75; margin-right: 0; }
.art-share-topo .art-share-bt {
  padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 13px; font-weight: 600; color: var(--azul2, #1e4db7);
  text-decoration: none;
}
.art-share-topo .art-share-bt:hover {
  transform: none; box-shadow: none; background: none;
  color: var(--azul, #0a2463); text-decoration: underline;
}
/* Ponto separando os links, como numa linha de crédito. */
.art-share-topo .art-share-bt + .art-share-bt::before {
  content: '·'; margin-right: 10px; opacity: .45; text-decoration: none;
  display: inline-block; color: inherit;
}
.art-share-topo .art-share-copiar.ok { background: none; color: #166534; }
.art-share-topo { font-size: 12.5px; gap: 3px 8px; }
.art-share-topo .art-share-label { width: auto; margin-bottom: 0; }
.art-share-topo .art-share-bt + .art-share-bt::before { margin-right: 8px; }
/* --------------------------------------------------------------------------
   Compartilhar: rótulo à esquerda, ícones à direita
   --------------------------------------------------------------------------
   Ícone diz o mesmo que o nome escrito e ocupa um terço do espaço — a barra
   deixa de ser um bloco e vira uma linha discreta no fim do texto.
   Cinza em repouso, cor da marca no hover: em repouso ela não compete com o
   artigo; no hover confirma para onde o clique vai.
   -------------------------------------------------------------------------- */
.art-share { justify-content: space-between; gap: 16px; }
.art-share .art-share-label {
  font-size: 15px; font-weight: 700; color: var(--azul2, #1e4db7); margin: 0;
}
.art-share-bts { display: inline-flex; align-items: center; gap: 22px; }
.art-share .art-share-bt {
  padding: 0; border: 0; background: none; border-radius: 6px;
  color: #64748b; line-height: 0;
}
.art-share .art-share-bt:hover { transform: none; box-shadow: none; background: none; }
.art-share-ico { width: 20px; height: 20px; display: block; }
.art-share-bt:hover .art-share-ico { opacity: 1; }
/* Enquanto os arquivos oficiais das redes não estiverem na pasta, o botão
   mostra o nome. Some no dia em que os ícones entrarem. */
.art-share-nome { font-size: 13px; font-weight: 600; line-height: 1; }
.art-share-whatsapp:hover { color: #25d366; background: none; }
.art-share-linkedin:hover { color: #0a66c2; background: none; }
.art-share-facebook:hover { color: #1877f2; background: none; }
.art-share-x:hover        { color: #0f172a; background: none; }
.art-share-email:hover,
.art-share-copiar:hover,
.art-share-nativo:hover   { color: #0f172a; background: none; }
/* "Link copiado!" ao lado do ícone, sem apagar o desenho. */
.art-share-copiar { position: relative; }
.art-share-copiar.ok { color: #16a34a; }
.art-share-copiar.ok::after {
  content: 'Link copiado!'; position: absolute; right: 0; bottom: calc(100% + 8px);
  background: #16a34a; color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap;
}
.art-share { gap: 10px; }
.art-share .art-share-label { font-size: 14px; }
.art-share-bts { gap: 18px; }
/* O botão nasce com o atributo hidden e o JS o acende quando o navegador sabe
   fazer aquilo. Só que qualquer regra de display na folha vence o hidden, e o
   botão aparecia mesmo desligado — no computador surgia um "Compartilhar" que
   não fazia nada. Esta linha devolve ao hidden a última palavra. */
.art-share-bt[hidden] { display: none !important; }

/* Uma coluna só para o artigo inteiro.
   Antes cada pedaço tinha a sua própria largura: o texto ficava centralizado em
   720px, mas os botões de compartilhar do fim e as etiquetas nasciam colados na
   borda da página. Agora o <article class="artigo"> manda em todos. */
.artigo{max-width:760px;margin:0 auto;text-align:left}
.artigo > *{max-width:100%}
.artigo-cabeca{margin:0 0 26px}
.artigo-corpo{max-width:100%;margin:0}
.artigo-capa{margin:0 0 30px}
.art-tags{margin-top:32px}

/* Os botões de compartilhar têm de quebrar linha no celular.
   Sem isto a fila de botões media 385px numa tela de 390 e, com o recuo da
   coluna, empurrava a página inteira para o lado: 409px de largura numa tela
   de 390. Rolagem lateral no post inteiro por causa de uma linha de botões. */
.art-share{flex-wrap:wrap;gap:10px 14px}
.art-share-bts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
@media(max-width:560px){
  .art-share{flex-direction:column;align-items:flex-start}
  .art-share-label{margin-bottom:2px}
}

/* ============================================================================
   ALINHAMENTO DO ARTIGO — o que o print do João mostrou
   ========================================================================== */

/* 1. O cabeçalho do post estava centralizado e o corpo à esquerda: o título e
      o resumo herdavam o `text-align:center` do invólucro da listagem, de onde
      o modelo é recortado. Aqui a coluna inteira é alinhada à esquerda, sem
      depender de o modelo estar certo. */
.artigo,.artigo-cabeca,.artigo-cabeca h1,.artigo-resumo,.artigo-info,
.artigo-corpo,.art-tags,.art-share{text-align:left}

/* 2. As imagens do corpo vêm do WordPress como <figure class="wp-block-image">.
      Essas classes não existiam nesta folha, então cada foto era desenhada no
      seu tamanho de arquivo e centralizada — uma com 371px, a outra com 422px,
      numa coluna de 460. Daí a sensação de página torta. Agora toda figura
      ocupa a largura da coluna, e todas começam e terminam na mesma linha
      vertical do texto. */
.artigo-corpo figure,.artigo-corpo .wp-block-image{margin:26px 0;max-width:100%}
.artigo-corpo figure img,
.artigo-corpo .wp-block-image img,
.artigo-corpo > img,
.artigo-corpo p > img{width:100%;height:auto;display:block;border-radius:12px;margin:0}
.artigo-corpo figcaption,.artigo-corpo .wp-block-image figcaption{
  margin-top:9px;font-size:13px;line-height:1.5;opacity:.72;text-align:left;
}
/* O WordPress marca alinhamento no bloco; dentro de uma coluna estreita isso
   só desalinha. */
.artigo-corpo .aligncenter,.artigo-corpo .alignleft,.artigo-corpo .alignright{
  margin-left:0;margin-right:0;float:none;
}

/* 3. A capa do post segue a mesma largura do texto. */
.artigo-capa img{width:100%;height:auto;display:block;border-radius:12px}

/* 4. «Compartilhe esse artigo» ficava centralizado sobre botões alinhados à
      esquerda. */
.art-share-label{text-align:left}

/* ============================================================================
   PÁGINA DE CONTATO
   Uma página de contato tem um trabalho só: levar a pessoa ao canal que ela
   prefere no menor número de cliques. Por isso os canais são cartões grandes,
   com o valor que ela procura (o telefone, o e-mail) em destaque — e não uma
   lista de itens onde o número se esconde no meio da frase.
   ========================================================================== */
.contato-acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.canais{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
/* O WhatsApp toma a linha inteira e fica deitado: é o canal que responde na
   hora, e cinco cartões iguais numa grade de quatro deixavam o quinto órfão. */
.canal.destaque{grid-column:1/-1;flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}
.canal.destaque .canal-ico{margin-bottom:0;width:54px;height:54px}
.canal.destaque h3{margin:0}
.canal.destaque .canal-valor,.canal.destaque .canal-apoio{margin:0}
.canal.destaque .canal-link{margin-top:0;margin-left:auto}
.canal.destaque .canal-texto{flex:1 1 320px;min-width:0}
.canal-texto{display:flex;flex-direction:column;min-width:0}
.canal{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);
  padding:26px 24px;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.canal:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(26,31,54,.10);border-color:var(--azul)}
/* O WhatsApp é o canal que responde na hora; o cartão diz isso sem precisar
   de um rótulo escrito "recomendado". */
.canal.destaque{border-color:var(--wpp);background:linear-gradient(170deg,rgba(37,211,102,.06),var(--branco) 60%)}
.canal-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-bottom:16px;
  background:rgba(3,108,233,.10);color:var(--azul);flex:none;
}
.canal.destaque .canal-ico{background:rgba(37,211,102,.14);color:var(--wpp)}
.canal h3{font-size:1.02rem;margin:0 0 6px;color:var(--texto-esc)}
.canal-valor{font-size:1.24rem;font-weight:700;color:var(--texto-esc);margin:0 0 8px;line-height:1.25;
  /* rede de segurança: nada vaza para fora do cartão. */
  overflow-wrap:break-word}
/* O e-mail é o único valor comprido. No corpo dos outros ele quebrava no meio
   do domínio ("equipe@kvoip.com" / ".br"), o que fica pior do que uma letra
   menor. Aqui ele cabe inteiro numa linha só. */
.canal-valor.longo{font-size:1.02rem;letter-spacing:-.01em}
.canal.destaque .canal-valor{font-size:1.02rem;font-weight:600;color:var(--texto)}
.canal-apoio{font-size:.93rem;margin:0 0 18px;line-height:1.6}
.canal-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:.95rem;color:var(--azul);text-decoration:none;
}
.canal-link svg{transition:transform .2s}
.canal:hover .canal-link svg,.canal-link:hover svg{transform:translateX(3px)}
.canal.destaque .canal-link{color:var(--wpp-esc)}

/* Vídeo + texto lado a lado. O Short é vertical: a caixa precisa de 9/16, e
   não dos 16/9 do vídeo da home, senão sobra tarja preta dos dois lados. */
.contato-video{display:grid;gap:40px;grid-template-columns:1.15fr .85fr;align-items:center}
/* `width:100%` é obrigatório: as margens automáticas fazem o item da grade
   encolher até o conteúdo, e sem a imagem (capa que não carregou) a moldura
   virava 0×0 e sumia da tela. */
.video-vert{width:100%;max-width:330px;margin-left:auto;margin-right:auto;display:block}
.video-vert.sem-capa{aspect-ratio:9/16}
.video-vert img{aspect-ratio:9/16;object-fit:cover;width:100%;border-radius:var(--r-lg)}
.video-caixa.vert{aspect-ratio:9/16;max-width:330px;margin-left:auto;margin-right:auto}

/* Os dois cartões tinham alturas diferentes porque cada um parava onde o seu
   texto acabava. `stretch` iguala a altura; o link do mapa desce para a base
   com `margin-top:auto`, então os dois terminam na mesma linha. */
.contato-onde{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:stretch}
.contato-onde .cartao{display:flex;flex-direction:column}
.contato-onde .cartao h3{margin:0 0 10px}
.contato-onde .cartao>p{margin:0 0 14px}
.contato-onde .canal-link{margin-top:auto}
.horarios{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.horarios li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--borda);font-size:.95rem}
.horarios li:last-child{border-bottom:0;padding-bottom:0}
.horarios strong{color:var(--texto-esc);text-align:right}

@media(max-width:1080px){ .canais{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  .contato-video{grid-template-columns:1fr;gap:28px}
  .contato-onde{grid-template-columns:1fr}
}
@media(max-width:560px){
  .canais{grid-template-columns:1fr}
  .canal.destaque{flex-direction:column;align-items:flex-start;gap:14px}
  .canal.destaque .canal-link{margin-left:0}
  /* Em coluna, o «flex:1 1 320px» do texto virava 320px de ALTURA e abria um
     buraco branco no meio do cartão do WhatsApp. */
  .canal.destaque .canal-texto{flex:0 1 auto}
}


/* ══ páginas de produto (PABX, Discador, 0800, Número Único) ═══════════════
   Elas eram o texto do WordPress numa coluna só. Aqui ganham a mesma
   apresentação da home e do contato: um topo com ilustração, blocos que
   alternam texto e foto, recursos em cartões e os planos em cartões de preço. */
.pg-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;
  padding:52px 0 46px}
.pg-hero h1{font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.15;margin:14px 0 0}
.pg-hero .hero-lead{margin:18px 0 26px;max-width:56ch}
.pg-hero-acoes{display:flex;flex-wrap:wrap;gap:12px}
.pg-hero-img{justify-self:center;max-width:420px;width:100%}
.pg-hero-img img{width:100%;height:auto;display:block}

.pg-bloco{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.pg-bloco.invertido .pg-bloco-img{order:-1}
.pg-bloco h2{margin:12px 0 0}
.pg-bloco p{margin:16px 0 0}
.pg-bloco .btn{margin-top:24px}
.pg-bloco-img img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgba(26,31,54,.12)}

/* "Por que usar" — cartões de recurso, com ícone.
   Flex, e não grade de 3 colunas: com 4 ou 5 recursos a grade deixava o último
   cartão sozinho na linha de baixo, com cara de coisa quebrada. Em flex a
   última linha se centraliza, e 3, 4 ou 5 cartões cabem sem sobra. */
.porque{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.porque .cartao{display:flex;flex-direction:column;gap:10px}
/* A largura base decide quantos cartões cabem por linha, e isso depende de
   QUANTOS são: com 5, uma base larga dá 3+2 centrados (bonito); uma base
   estreita daria 4+1, com o último órfão. Por isso a contagem vem marcada
   no HTML. */
.porque.n3 .cartao{flex:1 1 300px;max-width:380px}
.porque.n4 .cartao{flex:1 1 220px;max-width:300px}
.porque.n5 .cartao{flex:1 1 300px;max-width:360px}
.porque h3{font-size:1.02rem;margin:0;line-height:1.35}
.porque p{margin:0;font-size:.94rem}

/* Cartões de preço */
.precos{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);align-items:stretch}
.preco{display:flex;flex-direction:column;position:relative}
.preco.destaque{border-color:var(--azul);box-shadow:0 16px 40px rgba(29,78,216,.16)}
.preco-selo{position:absolute;top:-11px;left:22px;background:var(--azul);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px}
.preco h3{font-size:.94rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto);margin:0 0 12px;font-weight:700}
.preco-valor{font-size:1.95rem;font-weight:800;color:var(--texto-esc);line-height:1.1;margin:0}
.preco-unid{font-size:.92rem;font-weight:500;color:var(--texto)}
.preco-sub{font-size:.9rem;margin:8px 0 0}
.preco .checks{margin:20px 0 22px;gap:11px}
.preco .checks li{font-size:.92rem;align-items:flex-start}
.preco .checks svg{margin-top:3px;flex:0 0 auto}
.preco .btn{margin-top:auto;justify-content:center;width:100%}

/* Passo a passo numerado (reserva do 0800 na ABR Telecom) */
.passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;
  counter-reset:passo}
.passos li{display:flex;gap:14px;align-items:flex-start;counter-increment:passo}
.passos li::before{content:counter(passo);flex:0 0 auto;width:30px;height:30px;
  border-radius:50%;background:var(--azul);color:#fff;font-weight:700;font-size:.92rem;
  display:flex;align-items:center;justify-content:center}
.passos a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.passo-figs{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:26px;max-width:1000px;margin-left:auto;margin-right:auto}
.passo-figs figure{margin:0}
.passo-figs figcaption{font-size:.9rem;margin-bottom:8px;color:var(--texto)}
.passo-figs img{width:100%;height:auto;display:block;border-radius:var(--r-md);
  border:1px solid var(--borda)}

/* Cobertura: a lista de DDDs, com busca. No lugar do [table id=3 /] que
   aparecia como texto cru na página. */
.ddd-busca{display:block;width:100%;max-width:340px;margin:0 auto 24px;padding:12px 16px;
  border:1px solid var(--borda);border-radius:var(--r-md);font:inherit;background:var(--branco)}
.ddd-busca:focus{outline:2px solid var(--azul);outline-offset:1px}
.ddds{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  list-style:none;margin:0;padding:0}
.ddds li{display:flex;align-items:baseline;gap:8px;background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--r-md);padding:11px 14px}
.ddds b{font-size:1.05rem;color:var(--texto-esc)}
.ddds span{font-size:.86rem;color:var(--texto)}
.ddd-vazio{text-align:center;color:var(--texto);margin:18px 0 0}

/* Missão e visão (Nossa Empresa) e os pilares da revenda */
/* Flex e não grade: a Nossa Empresa tem 2 cartões e a Revenda tem 3 — em
   grade de 3 colunas os 2 ficariam encostados à esquerda, com um buraco. */
.pilares{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.pilares>*{flex:1 1 300px;max-width:400px}
.pilar{display:flex;flex-direction:column;gap:12px}
.pilar h3{margin:0;font-size:1.05rem}
.pilar p{margin:0}
.pilar .checks{margin:0;gap:10px}
.pilar .checks li{font-size:.95rem;align-items:flex-start}
.pilar .checks svg{margin-top:3px;flex:0 0 auto}
.pilar .canal-ico{margin-bottom:0}

@media(max-width:980px){
  .pg-hero{grid-template-columns:1fr;gap:30px;padding:40px 0 36px}
  .pg-hero-img{max-width:330px}
  .pg-bloco{grid-template-columns:1fr;gap:26px}
  .pg-bloco.invertido .pg-bloco-img{order:0}
  .precos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .precos,.passo-figs{grid-template-columns:1fr}
  .pilares>*{flex:1 1 100%;max-width:none}
  .porque .cartao{flex:1 1 100%;max-width:none}
}

/* ══ Central de Ajuda ══════════════════════════════════════════════════════
   Mesma marca do kvoip.com.br, tratamento próprio.

   Uma central de ajuda não é um site institucional: quem chega já tem um
   problema na mão e quer sair dali com ele resolvido. Por isso a busca é a
   primeira coisa da página, cada gaveta tem um símbolo que se reconhece de
   longe, e o vídeo — que é o que esta central mais tem — aparece na home em
   vez de ficar escondido dentro do artigo.

   O azul do site (#036CE9) é escuro demais para brilhar sobre fundo preto:
   sobre o marinho ele some. Aqui ele ganha um irmão mais claro (#2f81fb) que
   só é usado no fundo escuro, e um ciano que já é da marca para o brilho.
   Nada disto vaza para o site principal — tudo está preso a `.ca-pag`. */

.ca-pag{
  --ca-tinta:#070c1a;            /* fundo do herói */
  --ca-tinta-2:#101a38;
  --ca-azul:#2f81fb;             /* o azul da marca, clareado para fundo escuro */
  --ca-azul-forte:#036CE9;       /* o azul do site, para fundo claro */
  --ca-ciano:#58C9EA;
  --ca-papel:#fff;
  --ca-fundo:#f5f7fb;            /* cinza com uma gota de azul, não cinza puro */
  --ca-linha:#e6eaf3;
  --ca-linha-2:#d3daea;
  --ca-txt:#59637a;
  --ca-txt-forte:#0d1425;
  --ca-r:16px;
  --ca-r-g:24px;
  background:var(--ca-fundo);
}
.ca-pag main{background:var(--ca-fundo)}

/* ── Cabeçalho: fino, grudado no topo, com o fundo desfocado ─────────────
   Grudado porque numa central de ajuda a pessoa rola muito: a busca e o
   caminho de volta têm de estar sempre a um clique. O desfoque existe para
   o texto continuar legível quando uma imagem do artigo passa por baixo. */
.ca-pag .topo{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ca-linha);
  padding:11px 0;
}
.ca-pag .topo .marca-sub{color:var(--ca-txt);font-weight:500}
.ca-pag .menu a{color:var(--ca-txt);font-weight:500;position:relative;padding-bottom:3px}
.ca-pag .menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--ca-azul-forte);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.ca-pag .menu a:hover,.ca-pag .menu a.on{color:var(--ca-txt-forte)}
.ca-pag .menu a:hover::after,.ca-pag .menu a.on::after{transform:scaleX(1)}

/* ── O herói ─────────────────────────────────────────────────────────────
   Dois brilhos redondos sobre o marinho, em vez de um degradê chapado de
   canto a canto: o chapado é o que faz um topo parecer modelo pronto. Os
   cantos de baixo são arredondados e o conteúdo sobe por cima, para a página
   não ser uma pilha de faixas retangulares. */
.ca-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ca-tinta);
  color:#fff;
  padding:74px 0 104px;
}
/* Os brilhos ficam DENTRO da caixa (inset:0). Já estiveram com -10% de cada
   lado, para o degradê espalhar: o `overflow:hidden` escondia a sobra, mas ela
   continuava contando na largura rolável — 429px numa tela de 390. Não dava
   barra de rolagem, mas era largura falsa num lugar onde ela não deveria
   existir. O espalhamento vem das porcentagens do próprio degradê, que podem
   passar da borda sem precisar que a caixa cresça. */
.ca-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(68% 78% at 14% -12%, rgba(47,129,251,.58), transparent 62%),
    radial-gradient(60% 70% at 96% 18%, rgba(88,201,234,.34), transparent 64%),
    linear-gradient(168deg,#0d1a3c,#070c1a 62%);
}
/* Uma trama de pontos bem fraca. Dá textura ao fundo sem virar desenho, e
   custa zero: é um degradê repetido, não uma imagem baixada. */
.ca-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.ca-hero .wrap{position:relative}
.ca-selo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.79rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 14px;margin-bottom:20px;
}
.ca-selo .pt{width:7px;height:7px;border-radius:50%;background:var(--ca-ciano);
  box-shadow:0 0 0 4px rgba(88,201,234,.22)}
.ca-hero h1{
  color:#fff;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2.05rem,4.6vw,3.35rem);line-height:1.08;
  margin:0 0 14px;text-wrap:balance;
}
.ca-hero h1 em{
  font-style:normal;
  background:linear-gradient(94deg,var(--ca-ciano),#9ad9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ca-hero p{color:rgba(255,255,255,.7);max-width:54ch;margin:0 auto;font-size:1.04rem}

/* ── A busca ─────────────────────────────────────────────────────────────
   Alta, branca e com sombra: é o único elemento claro sobre o marinho, e é
   para ela que o olho vai primeiro. O botão só aparece a partir do tablet —
   no celular ele roubaria metade da largura do campo. */
.ca-busca{position:relative;max-width:660px;margin:32px auto 0}
.ca-busca input{
  width:100%;height:62px;padding:0 128px 0 56px;
  border:0;border-radius:999px;
  background:#fff;color:var(--ca-txt-forte);
  font-size:1.03rem;font-family:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 40px rgba(3,10,30,.38);
  transition:box-shadow .25s,transform .25s;
}
.ca-busca input::placeholder{color:#93a0b8}
.ca-busca input:focus{
  outline:0;transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(88,201,234,.5),0 20px 46px rgba(3,10,30,.44);
}
/* O ícone da lupa é um <svg> sem classe. Sem esta regra ele entra na conta da
   altura da caixa — 91px em vez de 62 — e o botão "Buscar", que se apoia nas
   bordas dela, sai flutuando fora do campo. */
.ca-busca>svg{
  position:absolute;left:21px;top:50%;transform:translateY(-50%);
  width:21px;height:21px;color:#8d9ab4;pointer-events:none;z-index:2;
}
.ca-busca .ir{
  position:absolute;right:7px;top:7px;bottom:7px;
  display:none;align-items:center;
  padding:0 24px;border:0;border-radius:999px;cursor:pointer;
  background:var(--ca-azul-forte);color:#fff;
  font:600 .93rem/1 inherit;font-family:inherit;
  transition:background .2s,transform .2s;
}
.ca-busca .ir:hover{background:#0257bb;transform:translateY(-1px)}
@media(min-width:620px){.ca-busca .ir{display:inline-flex}}
@media(max-width:619px){.ca-busca input{padding-right:22px}}

.ca-atalhos{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.ca-atalhos a{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;padding:7px 15px;font-size:.87rem;font-weight:500;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.ca-atalhos a:hover{
  background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.34);
  color:#fff;transform:translateY(-1px);
}

/* O conteúdo sobe por cima da barriga do herói, como um painel opaco de cantos
   arredondados. Opaco de propósito: se fosse só a margem negativa, o marinho do
   herói continuaria pintado por cima do título da seção. */
.ca-sobe{
  position:relative;z-index:2;
  margin-top:-44px;
  background:var(--ca-fundo);
  border-radius:var(--ca-r-g) var(--ca-r-g) 0 0;
  padding-top:36px!important;
}

/* ── Cartões de assunto ──────────────────────────────────────────────────
   Cada gaveta tem um símbolo. Não é enfeite: com 19 gavetas numa grade,
   o símbolo é o que deixa a pessoa achar a certa sem ler as 19 — ela
   reconhece o telefone, o gráfico, a engrenagem.

   Sem moldura visível parado; a moldura e a sombra aparecem no passar do
   mouse. Moldura em tudo, o tempo todo, achata a hierarquia. */
.ca-cats{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.ca-cat{
  position:relative;display:flex;flex-direction:column;gap:11px;
  background:var(--ca-papel);
  border:1px solid var(--ca-linha);
  border-radius:var(--ca-r);padding:22px 22px 18px;
  box-shadow:0 1px 2px rgba(13,20,37,.04);
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s,border-color .26s;
}
.ca-cat:hover{
  transform:translateY(-4px);
  border-color:#c7d9f6;
  box-shadow:0 14px 34px rgba(13,20,37,.10);
}
.ca-cat .ca-simbolo{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(150deg,#e9f1ff,#dbeafe);
  color:var(--ca-azul-forte);flex:0 0 auto;
  transition:background .26s,color .26s;
}
.ca-cat:hover .ca-simbolo{background:linear-gradient(150deg,var(--ca-azul-forte),#0257bb);color:#fff}
.ca-cat h3{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.015em;
  color:var(--ca-txt-forte);line-height:1.3}
.ca-cat p{margin:0;font-size:.915rem;line-height:1.55;color:var(--ca-txt)}
.ca-cat .ca-conta{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;gap:7px;
  font-size:.85rem;color:var(--ca-txt);
  border-top:1px solid var(--ca-linha);
}
.ca-cat .ca-conta b{color:var(--ca-txt-forte);font-weight:700}
.ca-cat .ca-seta{
  margin-left:auto;color:var(--ca-azul-forte);display:inline-flex;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.ca-cat:hover .ca-seta{transform:translateX(4px)}

/* ── Faixa de vídeos na home ─────────────────────────────────────────────
   85 dos 123 artigos têm vídeo, e a home antiga não mostrava nenhum. Esta
   faixa rola de lado no celular e vira grade no computador. */
.ca-fitas{margin-top:8px}
.ca-fita{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:15px;
}
/* No celular a grade viraria uma pilha de oito cartões altos, e quem quer
   chegar nos assuntos rola oito telas. Vira uma prateleira que corre de lado,
   com o encaixe que faz o cartão parar sempre inteiro na tela. */
@media(max-width:760px){
  .ca-fita{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:6px;
    margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .ca-fita .ca-clip{flex:0 0 74%;max-width:290px;scroll-snap-align:start}
  .ca-fita .ca-clip:hover{transform:none}
}
.ca-clip{
  display:flex;flex-direction:column;
  background:var(--ca-papel);border:1px solid var(--ca-linha);
  border-radius:var(--ca-r);overflow:hidden;
  box-shadow:0 1px 2px rgba(13,20,37,.04);
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s,border-color .26s;
}
.ca-clip:hover{transform:translateY(-4px);border-color:#c7d9f6;
  box-shadow:0 14px 34px rgba(13,20,37,.10)}
.ca-clip .capa{
  position:relative;aspect-ratio:16/9;
  background:linear-gradient(150deg,#1d4ed8,#0b1e4f);
  overflow:hidden;
}
.ca-clip .capa img{width:100%;height:100%;object-fit:cover;display:block}
/* Quando nenhuma capa do YouTube existe, o fundo azul da marca fica no lugar
   dela — em vez do retângulo cinza que o YouTube devolve como "não tenho". */
.ca-clip .capa.sem-capa img{display:none}
.ca-clip .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ca-azul-forte);
  box-shadow:0 6px 18px rgba(3,10,30,.32);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.ca-clip:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.ca-clip .txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.ca-clip .txt b{
  color:var(--ca-txt-forte);font-weight:600;font-size:.94rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ca-clip .txt span{font-size:.8rem;color:var(--ca-txt)}

/* ── Título de seção ─────────────────────────────────────────────────────*/
.ca-secao-tit{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ca-secao-tit h2{margin:0;font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:800;
  letter-spacing:-.03em;color:var(--ca-txt-forte)}
.ca-secao-tit p{margin:4px 0 0;font-size:.95rem;color:var(--ca-txt)}
.ca-secao-tit .tudo{
  font-size:.9rem;font-weight:600;color:var(--ca-azul-forte);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.ca-secao-tit .tudo svg{transition:transform .22s}
.ca-secao-tit .tudo:hover svg{transform:translateX(3px)}

/* ── Lista de artigos ────────────────────────────────────────────────────*/
.ca-lista{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.ca-item{
  background:var(--ca-papel);border:1px solid var(--ca-linha);border-radius:14px;
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.ca-item:hover{border-color:#c7d9f6;box-shadow:0 8px 22px rgba(13,20,37,.08);
  transform:translateX(3px)}
.ca-item a{display:flex;align-items:center;gap:14px;padding:15px 18px;color:var(--ca-txt-forte)}
.ca-item .ca-ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:#eef4ff;color:var(--ca-azul-forte);
}
.ca-item .ca-tit{font-weight:600;line-height:1.4;min-width:0;font-size:.98rem}
.ca-item .ca-marca{
  margin-left:auto;flex:0 0 auto;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--ca-azul-forte);background:#eef4ff;
  border-radius:999px;padding:4px 11px;
}
.ca-vazio{text-align:center;color:var(--ca-txt);padding:34px 0}

/* ── Artigo ──────────────────────────────────────────────────────────────*/
.ca-artigo{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:48px;align-items:start}
/* Artigo sem sumário: uma coluna só, centrada e com largura de leitura.
   Texto corrido esticado em 1112px cansa — a linha fica longa demais para o
   olho achar o começo da seguinte. */
.ca-artigo.sozinho{grid-template-columns:minmax(0,860px);justify-content:center}
/* O artigo fica numa folha branca sobre o cinza da página.
   Não é só estética: muito parágrafo colado do Google Docs veio com
   `background:#fff` escrito dentro. Sobre um fundo cinza, cada um desses
   parágrafos vira uma faixa branca com um vão cinza entre elas — o texto sai
   listrado. Na folha branca eles somem, que é o que sempre se quis. */
.ca-corpo{
  min-width:0;font-size:1.055rem;line-height:1.78;color:#3d4659;
  background:var(--ca-papel);
  border:1px solid var(--ca-linha);
  border-radius:var(--ca-r-g);
  padding:34px 40px 30px;
  box-shadow:0 1px 2px rgba(13,20,37,.04);
}
.ca-corpo>*:first-child{margin-top:0}
.ca-corpo .ca-videos{margin-top:4px}
.ca-corpo h2{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;
  margin:44px 0 15px;scroll-margin-top:96px;color:var(--ca-txt-forte)}
.ca-corpo h3{font-size:1.16rem;font-weight:700;letter-spacing:-.015em;
  margin:32px 0 11px;scroll-margin-top:96px;color:var(--ca-txt-forte)}
.ca-corpo p{margin:0 0 17px;font-size:inherit}
.ca-corpo ul,.ca-corpo ol{margin:0 0 18px;padding-left:23px}
.ca-corpo li{margin-bottom:8px}
.ca-corpo a{color:var(--ca-azul-forte);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(3,108,233,.32)}
.ca-corpo a:hover{text-decoration-color:var(--ca-azul-forte)}
.ca-corpo img{max-width:100%;height:auto;border-radius:14px;
  border:1px solid var(--ca-linha);box-shadow:0 6px 20px rgba(13,20,37,.07);margin:6px 0}
.ca-corpo table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem}
.ca-corpo th,.ca-corpo td{border:1px solid var(--ca-linha);padding:10px 13px;text-align:left}
.ca-corpo th{background:#f2f5fb;color:var(--ca-txt-forte);font-weight:600}
.ca-corpo pre{background:#0b1220;color:#dbe4f5;padding:16px 19px;border-radius:14px;
  overflow-x:auto;margin:18px 0;font-size:.9rem;line-height:1.65}
.ca-corpo code{background:#eef2f9;padding:2px 6px;border-radius:6px;font-size:.92em;
  color:#0f2a52}
.ca-corpo pre code{background:none;padding:0;color:inherit}
.ca-corpo blockquote{
  border-left:3px solid var(--ca-azul-forte);margin:0 0 18px;
  padding:4px 0 4px 18px;color:var(--ca-txt);font-style:normal;
}
.ca-tabela{overflow-x:auto;margin:18px 0;border-radius:12px}
.ca-tabela table{margin:0}

/* Cabeçalho do artigo */
.ca-cabeca{padding:34px 0 10px}
.ca-cabeca h1{font-size:clamp(1.75rem,3.6vw,2.55rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.14;margin:12px 0 0;text-wrap:balance;
  color:var(--ca-txt-forte)}
.ca-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  font-size:.88rem;color:var(--ca-txt)}
.ca-meta .fita{
  display:inline-flex;align-items:center;gap:6px;
  background:#eef4ff;color:var(--ca-azul-forte);
  border-radius:999px;padding:5px 12px;font-weight:600;font-size:.82rem;
}

/* Sumário: um trilho fino à esquerda, e o item onde a pessoa está acende. */
.ca-sumario{
  position:sticky;top:96px;
  background:var(--ca-papel);border:1px solid var(--ca-linha);
  border-radius:var(--ca-r);padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(13,20,37,.04);
}
.ca-sumario h4{margin:0 0 14px;font-size:.73rem;letter-spacing:.09em;
  text-transform:uppercase;color:#8d97ab;font-weight:700}
.ca-sumario ol{list-style:none;margin:0;padding:0 0 0 13px;
  border-left:2px solid var(--ca-linha);
  display:flex;flex-direction:column;gap:11px;
  max-height:62vh;overflow-y:auto}
.ca-sumario li{position:relative}
.ca-sumario .n3{padding-left:13px;font-size:.87rem}
.ca-sumario a{color:var(--ca-txt);line-height:1.42;display:block;font-size:.91rem;
  transition:color .2s}
.ca-sumario a:hover{color:var(--ca-txt-forte)}
.ca-sumario a.on{color:var(--ca-azul-forte);font-weight:600}
.ca-sumario a.on::before{
  content:"";position:absolute;left:-15px;top:.45em;
  width:2px;height:1.15em;border-radius:2px;background:var(--ca-azul-forte);
}

/* Vídeo do artigo */
.ca-videos{display:flex;flex-direction:column;gap:18px;margin:0 0 30px}
.ca-videos .video-capa{border-radius:var(--ca-r);overflow:hidden;
  box-shadow:0 16px 40px rgba(13,20,37,.13)}
.ca-videos .video-caixa{border-radius:var(--ca-r);overflow:hidden;
  box-shadow:0 16px 40px rgba(13,20,37,.13)}
.ca-video-nota{font-size:.87rem;color:var(--ca-txt);margin:10px 0 0}

/* Fim do artigo */
.ca-fim{margin-top:46px;padding-top:28px;border-top:1px solid var(--ca-linha)}
.ca-vizinhos{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:24px}
.ca-viz{
  display:block;background:var(--ca-papel);border:1px solid var(--ca-linha);
  border-radius:14px;padding:15px 18px;
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.ca-viz:hover{border-color:#c7d9f6;box-shadow:0 10px 26px rgba(13,20,37,.09);
  transform:translateY(-2px)}
.ca-viz span{display:block;font-size:.76rem;color:#8d97ab;margin-bottom:5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ca-viz b{color:var(--ca-txt-forte);font-weight:600;line-height:1.38;font-size:.95rem}
.ca-viz.dir{text-align:right}

/* Caminho de migalhas */
.ca-trilha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.86rem;
  color:var(--ca-txt);list-style:none;margin:0;padding:0}
.ca-trilha a{color:var(--ca-txt);transition:color .2s}
.ca-trilha a:hover{color:var(--ca-azul-forte)}
.ca-trilha li::after{content:"›";margin-left:8px;color:var(--ca-linha-2)}
.ca-trilha li:last-child::after{content:""}

/* Herói pequeno, das categorias */
.ca-hero.curto{padding:52px 0 64px}
.ca-hero.curto h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}

/* Chamada do fim */
.ca-chamada{
  background:linear-gradient(150deg,#0d1a3c,#070c1a);
  border-radius:var(--ca-r-g);color:#fff;
  padding:46px 28px;text-align:center;margin:56px 0 0;
  position:relative;overflow:hidden;isolation:isolate;
}
.ca-chamada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 90% at 50% 0%, rgba(47,129,251,.4), transparent 68%);
}
.ca-chamada h2{color:#fff;margin:0 0 10px;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.8vw,2.1rem)}
.ca-chamada p{color:rgba(255,255,255,.72);margin:0 auto 22px;max-width:48ch}
.ca-chamada .botoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:940px){
  .ca-artigo{grid-template-columns:1fr;gap:28px}
  .ca-sumario{position:static;order:-1;max-height:none}
  .ca-sumario ol{max-height:none}
}
@media(max-width:560px){
  .ca-hero{padding:56px 0 84px}
  .ca-hero.curto{padding:42px 0 54px}
  .ca-busca input{height:56px;padding-left:48px;font-size:1rem}
  .ca-busca>svg{left:17px}
  .ca-sobe{margin-top:-30px;border-radius:20px 20px 0 0;padding-top:26px!important}
  .ca-vizinhos{grid-template-columns:1fr}
  .ca-viz.dir{text-align:left}
  .ca-corpo{font-size:1.01rem;line-height:1.72;padding:22px 18px 20px;border-radius:16px}
  .ca-chamada{padding:36px 20px;border-radius:18px}
}

/* Quem pediu menos animação no sistema recebe menos animação. */
@media(prefers-reduced-motion:reduce){
  .ca-cat,.ca-clip,.ca-item,.ca-viz,.ca-busca input,.ca-atalhos a,
  .ca-cat .ca-seta,.ca-clip .play,.ca-secao-tit .tudo svg{
    transition:none!important;transform:none!important;
  }
}

/* Conteúdo colado de fora (Google Docs, Elementor) traz largura fixa escrita
   em cada bloco — 750px dentro de uma tela de 390. `max-width` vence `width`,
   então uma regra basta e não precisa de !important. */
.ca-corpo *{max-width:100%}
.ca-corpo table{max-width:none}          /* a tabela rola dentro da .ca-tabela */
.ca-corpo iframe{width:100%}

/* Palavra ou endereço comprido não empurra a página de lado. */
.ca-corpo{overflow-wrap:break-word}

/* Os 3 artigos que vieram em HTML inteiro trazem grades próprias, pensadas
   para tela larga. No celular elas ficam lado a lado e saem da tela. Aqui, e
   só aqui dentro, tudo vira uma coluna. O !important é porque estou vencendo
   o estilo que veio junto com o artigo. */
@media(max-width:620px){
  .artigo-embutido [class],.artigo-embutido [style]{
    grid-template-columns:1fr!important;flex-wrap:wrap!important;
    float:none!important;width:auto!important}
  /* O mesmo vale para a grade escrita direto no estilo de um bloco, dentro de
     qualquer artigo: três colunas de 169px não cabem numa tela de 390. A regra
     só alcança quem de fato declarou grade ou flex ali. */
  .ca-corpo [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .ca-corpo [style*="display:flex"],.ca-corpo [style*="display: flex"]{flex-wrap:wrap!important}
  .ca-corpo [style*="display:grid"],.ca-corpo [style*="display: grid"]{grid-template-columns:1fr!important}
}