/* ============================================================
   VOVO PET — COMPONENTES + HOME
   ============================================================ */

/* ---- Sobrepor cor inline residual (posts ANTIGOS, seguranca) ---- */
.entry-content h2[style]{ color:var(--vp-ink) !important; font-family:'Baloo 2',sans-serif !important; }
.entry-content h3[style]{ color:var(--vp-ink) !important; font-family:'Baloo 2',sans-serif !important; }
.entry-content strong[style]{ color:var(--vp-sky-d) !important; }
.entry-content details > summary[style]{ background:var(--vp-sky) !important; color:#fff !important; box-shadow:0 9px 0 -2px var(--vp-sky-d) !important; }
.entry-content [style*="Arial"]{ font-family:'Mulish',system-ui,sans-serif !important; }

/* ---------- BARRA DE PROGRESSO ---------- */
.vp-progress{ position:fixed; top:0; left:0; height:4px; width:0; background:linear-gradient(90deg,var(--vp-sky),var(--vp-grape)); z-index:9999; transition:width .1s; }

/* ---------- TOC LATERAL ---------- */
.vp-toc{ background:var(--vp-mist); border-radius:var(--vp-r-sm); padding:20px 22px; font-size:.95rem; }
.entry-content > .vp-toc{ float:right; width:250px; margin:0 0 24px 32px; position:static; }
@media(max-width:921px){ .entry-content > .vp-toc{ float:none; width:auto; margin:0 0 24px 0; position:static; } }
.vp-toc h4{ font-family:'Baloo 2'; font-weight:700; font-size:1rem; margin-bottom:12px; color:var(--vp-ink); }
.vp-toc a{ display:block; padding:7px 0 7px 24px; position:relative; color:var(--vp-ink-soft); font-weight:600; line-height:1.4; transition:.15s; }
.vp-toc a::before{ content:"🐾"; position:absolute; left:0; top:7px; font-size:.78rem; opacity:.5; }
.vp-toc a:hover,.vp-toc a.active{ color:var(--vp-sky-d); }

/* ---------- LINHA RESUMO + TOC (substitui o float; sem vácuo) ---------- */
/* O JS (vovopet-artigo.js) junta o resumo/GEO com o TOC dentro de
   .vp-intro-row. Os dois viram uma linha flex de mesma altura visual —
   nada de espaço em branco sobrando quando o resumo é mais curto que o TOC. */
.vp-intro-row{ display:flex; align-items:stretch; gap:32px; margin:2px 0 26px; }
.vp-intro-row > *:first-child{ flex:1 1 auto; min-width:0; margin:0 !important; display:flex; align-items:center; }
.vp-intro-row .vp-toc{ flex:0 0 250px; width:250px; margin:0; }
@media(max-width:921px){
  .vp-intro-row{ flex-direction:column; gap:20px; }
  .vp-intro-row .vp-toc{ width:100%; flex:none; }
}

/* ---------- BLOCO AFILIADO ---------- */
.wp-block-vovopet-afiliado,.vovopet-afiliado,[class*="vovopet-afiliado"]{ display:flex; gap:18px; align-items:center; background:#FFF6DA; border:2px solid var(--vp-sun); border-radius:var(--vp-r-sm); padding:18px; margin:30px 0; }
.wp-block-vovopet-afiliado img,[class*="vovopet-afiliado"] img{ width:120px; height:120px; object-fit:cover; border-radius:14px; flex:none; }
[class*="vovopet-afiliado"] .badge,.wp-block-vovopet-afiliado .vp-badge{ display:inline-block; background:var(--vp-sun-d); color:#fff; font-family:'Baloo 2'; font-weight:600; font-size:.72rem; padding:4px 10px; border-radius:var(--vp-r-pill); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
[class*="vovopet-afiliado"] a.button,[class*="vovopet-afiliado"] .ast-button{ background:var(--vp-sun-d); color:#fff; box-shadow:0 8px 0 -2px #C99400; }

/* ---------- EXPANDABLE ---------- */
.entry-content details{ margin:34px 0; }
.entry-content details > summary{ list-style:none; cursor:pointer; display:block; text-align:center; background:var(--vp-sky); color:#fff; font-family:'Baloo 2'; font-weight:700; font-size:1.12rem; padding:16px 28px; border-radius:14px; box-shadow:0 9px 0 -2px var(--vp-sky-d); transition:transform .16s; }
.entry-content details > summary::-webkit-details-marker{ display:none; }
.entry-content details > summary:hover{ transform:translateY(-2px); }
.entry-content details[open] > summary{ border-radius:14px 14px 0 0; box-shadow:none; }
.entry-content details > div,.entry-content details > .vp-exp-body{ background:var(--vp-mist); border-left:5px solid var(--vp-sky); border-radius:0 14px 14px 0; padding:26px 30px; margin-top:0; }
.entry-content details hr{ border:none; border-top:1px solid #DDE6F5; margin:22px 0; }
.entry-content .vp-exp-lead{ font-family:'Baloo 2'; font-weight:700; color:var(--vp-sky-d); padding-bottom:12px; border-bottom:1px dashed var(--vp-sky); margin-bottom:18px; }

/* ---------- CTA ---------- */
.vp-cta,.entry-content .vp-cta{ background:var(--vp-sky); color:#fff; border-radius:var(--vp-r-sm); padding:30px; text-align:center; margin:36px 0; }
.vp-cta h3{ color:#fff; font-size:1.5rem; margin-bottom:8px; }
.vp-cta a.button{ background:#fff; color:var(--vp-sky-d); box-shadow:0 8px 0 -2px rgba(0,0,0,.12); }

/* ---------- PAA ---------- */
.vp-paa{ background:var(--vp-mist); border-radius:var(--vp-r-sm); padding:24px 28px; margin:34px 0; }
.vp-paa .vp-eyebrow{ font-family:'Baloo 2'; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--vp-grape-d); margin-bottom:14px; }
.vp-paa .vp-qa{ border-bottom:1px solid #DDE6F5; padding:13px 0; }
.vp-paa .vp-qa:last-child{ border-bottom:none; }
.vp-paa .vp-q{ font-weight:700; color:var(--vp-ink); display:flex; gap:10px; align-items:flex-start; }
.vp-paa .vp-q .vp-mk{ color:var(--vp-sky); font-size:.7rem; margin-top:6px; flex:none; }
.vp-paa .vp-a{ font-size:.96rem; color:var(--vp-ink-soft); margin:6px 0 0 20px; }

/* ---------- FAQ ---------- */
.entry-content dl dt{ font-family:'Baloo 2'; font-weight:700; color:var(--vp-sprout-d); font-size:1.08rem; margin-top:18px; }
.entry-content dl dd{ margin:8px 0 0; padding:12px 16px; background:#EFFBF1; border-radius:12px; color:#3a3a3a; font-size:1rem; }

/* ---------- READER ---------- */
.vp-reader{ background:#FFEFF5; border:2px solid var(--vp-gum); border-radius:14px; padding:24px 28px; margin:34px 0; }
.vp-reader h3{ color:var(--vp-gum-d); font-size:1.18rem; margin-bottom:6px; }
.vp-reader p{ color:var(--vp-ink-soft); margin:0; }

/* ---------- FONTES ---------- */
.vp-sources{ background:#F4F5F9; border-radius:12px; padding:18px 22px; margin:30px 0; font-size:.92rem; color:var(--vp-ink-soft); }
.vp-sources strong{ color:var(--vp-ink); font-family:'Baloo 2'; }
.vp-sources ul{ margin:8px 0 0; padding-left:20px; list-style:disc; }

/* ---------- AUTOR ---------- */
.vp-author{ display:flex; gap:16px; align-items:flex-start; background:var(--vp-mist); border-radius:14px; padding:22px; margin:36px 0; }
.vp-author .vp-ava{ width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--vp-sky),var(--vp-grape)); display:grid; place-items:center; font-size:1.4rem; flex:none; }
.vp-author strong{ font-family:'Baloo 2'; color:var(--vp-ink); font-size:1.05rem; }
.vp-author p{ font-size:.94rem; color:var(--vp-ink-soft); margin:4px 0 0; }
.vp-author-link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:700; font-size:.85rem; color:#0077B5; }

/* ---------- COMPARTILHAR ---------- */
.vp-share{ display:flex; align-items:center; gap:10px; margin:30px 0; flex-wrap:wrap; }
.vp-share span{ font-family:'Baloo 2'; font-weight:600; color:var(--vp-ink-soft); }
.vp-share a{ width:42px; height:42px; border-radius:50%; background:var(--vp-mist); display:grid; place-items:center; font-size:1.1rem; transition:.16s; }
.vp-share a:hover{ transform:translateY(-3px); background:var(--vp-sky); color:#fff; }

/* ---------- COR POR CATEGORIA ---------- */
.vp-cat-saude{ background:var(--vp-gum); }
.vp-cat-bem-estar{ background:var(--vp-sprout-d); }
.vp-cat-alimentacao{ background:var(--vp-sun-d); }
.vp-cat-mobilidade{ background:var(--vp-grape); }

/* ============================================================
   HOME (front-page.php)
   ============================================================ */
.vp-home .wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }
.vp-hero{ padding:46px 0 30px; }
.vp-hero-grid{ max-width:1140px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }
.vp-kick{ display:inline-block; font-family:'Baloo 2'; font-weight:600; color:var(--vp-grape-d); background:#EEEAFF; padding:7px 16px; border-radius:var(--vp-r-pill); font-size:.92rem; margin-bottom:20px; }
.vp-hero-text h1{ font-family:'Baloo 2'; font-size:3.5rem; font-weight:800; letter-spacing:-.5px; color:var(--vp-ink); line-height:1.1; }
.vp-hero-text h1 mark{ background:none; color:inherit; position:relative; white-space:nowrap; }
.vp-hero-text h1 mark::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.08em; height:.36em; background:var(--vp-sun); border-radius:var(--vp-r-pill); z-index:-1; }
.vp-sub{ font-size:1.22rem; color:var(--vp-ink-soft); max-width:480px; margin:22px 0 32px; }
.vp-hero-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.vp-btn-sky{ background:var(--vp-sky); color:#fff; box-shadow:0 10px 0 -2px var(--vp-sky-d); border-radius:var(--vp-r-pill); font-family:'Baloo 2'; font-weight:600; padding:13px 26px; display:inline-block; }
.vp-btn-sky:hover{ transform:translateY(-3px); color:#fff; }
.vp-btn-ghost{ font-family:'Baloo 2'; font-weight:600; color:var(--vp-ink); }
.vp-btn-ghost:hover{ color:var(--vp-sky-d); }
.vp-stage{ position:relative; aspect-ratio:1/1; border-radius:42px; background:var(--vp-sun); display:grid; place-items:center; overflow:hidden; }
.vp-ring{ position:absolute; width:78%; height:78%; border-radius:50%; background:rgba(255,255,255,.35); }
.vp-dog-photo{ position:relative; width:76%; aspect-ratio:1/1; object-fit:cover; border-radius:50%; border:9px solid #fff; box-shadow:0 22px 44px -20px rgba(43,45,82,.55); animation:vp-bob 4.5s ease-in-out infinite; }
.vp-chip{ position:absolute; border-radius:var(--vp-r-pill); font-family:'Baloo 2'; font-weight:600; font-size:.92rem; color:#fff; padding:8px 15px; box-shadow:0 8px 18px -8px rgba(43,45,82,.5); animation:vp-bob 4.5s ease-in-out infinite; z-index:2; }
.vp-chip-one{ top:8%; left:6%; background:var(--vp-gum); animation-delay:.4s; }
.vp-chip-two{ bottom:10%; right:5%; background:var(--vp-sprout); animation-delay:.9s; }
@keyframes vp-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media(prefers-reduced-motion:reduce){ .vp-dog-photo,.vp-chip{ animation:none; } }
.vp-section-title{ font-family:'Baloo 2'; font-weight:800; font-size:2rem; color:var(--vp-ink); margin:40px 0 24px; }
.vp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.vp-card{ display:flex; flex-direction:column; transition:transform .18s; color:inherit; }
.vp-card:hover{ transform:translateY(-6px); }
.vp-ph{ aspect-ratio:3/2; border-radius:var(--vp-r-sm); overflow:hidden; position:relative; background:var(--vp-mist); }
.vp-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.vp-card:hover .vp-ph img{ transform:scale(1.05); }
.vp-tag{ position:absolute; top:14px; left:14px; font-family:'Baloo 2'; font-weight:600; font-size:.8rem; color:#fff; padding:5px 13px; border-radius:var(--vp-r-pill); }
.vp-card h3{ font-family:'Baloo 2'; font-size:1.3rem; font-weight:700; margin:16px 0 8px; color:var(--vp-ink); }
.vp-card p{ color:var(--vp-ink-soft); font-size:.98rem; }
.vp-card-meta{ margin-top:14px; font-family:'Baloo 2'; font-weight:500; font-size:.88rem; color:var(--vp-ink-soft); }
.vp-news{ margin:90px 0 40px; background:var(--vp-sky); border-radius:var(--vp-r); padding:56px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.vp-news h2{ font-family:'Baloo 2'; font-size:2.2rem; font-weight:800; color:#fff; }
.vp-news p{ opacity:.95; max-width:440px; margin:10px auto 26px; font-size:1.08rem; }
.vp-news-form{ display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.vp-news-form input{ flex:1; min-width:220px; border:none; outline:none; border-radius:var(--vp-r-pill); padding:15px 22px; font-family:'Mulish'; font-size:1rem; font-weight:600; color:var(--vp-ink); }
.vp-news-form .button{ background:var(--vp-ink); color:#fff; box-shadow:0 10px 0 -2px #1c1d39; }
.vp-news-form .button:hover{ transform:translateY(-3px); }
@media(max-width:921px){
  .vp-hero-grid{ grid-template-columns:1fr; }
  .vp-hero-text h1{ font-size:2.7rem; }
  .vp-stage{ max-width:420px; margin:0 auto; }
  .vp-cards{ grid-template-columns:1fr; }
}