/*
Theme Name: SPW LP Theme
Theme URI: https://suporteparawordpress.com.br/
Author: 2WP
Author URI: https://2wp.com.br/
Description: Tema leve e otimizado para SEO para a LP "Manutenção de Sites" com painel e banco de horas.
Version: 1.0.4
License: GPL-2.0-or-later
Text Domain: spw-lp
*/
:root{
  --brand:#20769C;        /* azul principal */
  --brand-ink:#0e4e69;    /* azul mais escuro p/ hovers */
  --ink:#000;             /* texto principal */
  --ink-2:#334155;        /* texto secundário */
  --bg:#fff;              /* fundo base */
  --muted:#5b6778;
  --line:#e2e8f0;
  --tint:#eaf5fa;         /* leve tinta azul (bg suave) */
  --tint-2:#f4fbff;       /* alternativo bem claro */
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--brand)}
a:hover{color:#000;text-decoration:none}
.container{width:min(1140px,94%);margin-inline:auto}

h3.post-title{
    font-weight: 600;
}
h3.post-title a{
    text-decoration: none;
}
.grid-3 a.btn{
    font-weight: 400;
    text-decoration: none;
    margin-top:20px;
}
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:.9rem;
  background:var(--brand); color:#fff; font-weight:400; border:1px solid var(--brand);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    text-decoration: none;
}
.btn:hover{transform:translateY(-1px); background:var(--brand-ink)}
.btn:focus{outline:3px solid rgba(32,118,156,.35); outline-offset:2px}
.btn--secondary{background:transparent; color:var(--brand); border-color:var(--brand)}
.btn--secondary:hover{background:var(--tint)}
.btn--inverse{background:#000; border-color:#000; color:#fff}
.btn--inverse:hover{background:#111}

.section{padding:64px 0}
.section-alt{background:var(--tint-2)}
.section-accent{background:linear-gradient(180deg, var(--tint), #fff)}
.hero{background:linear-gradient(180deg, var(--tint-2), rgba(255,255,255,0))}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px}
.hero p{font-size:clamp(16px,2vw,18px);color:#334155;max-width:720px}
.hero-cta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}

.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

.card{border:1px solid var(--line); border-radius:16px; padding:22px; background:#fff;
  transition:box-shadow .25s ease, border-color .25s ease}
.card:hover{box-shadow:0 8px 24px rgba(32,118,156,.10); border-color:#cfe7f3}
.card.card-accent{ border-color:#cfe7f3; overflow:hidden; position:relative }
.card.card-accent::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,#20769C,#0e4e69)}

.badge{display:inline-flex; align-items:center; gap:8px; background:var(--tint); border:1px solid #cfe7f3; color:var(--brand-ink); padding:6px 10px; border-radius:999px; font-weight:700}
.list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.kpi{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.kpi .box{background:#f1f5f9;border:1px solid #e2e8f0;padding:14px 16px;border-radius:12px;font-weight:700}

.pricing{gap:22px}
.pricing .card h3{margin-top:0}
.pricing .card.featured{border-color:var(--brand); box-shadow:0 8px 26px rgba(32,118,156,.16)}
.pricing .card.featured h3{color:var(--brand)}
.ribbon{position:relative; display:inline-block; margin-bottom:8px; font-size:12px; font-weight:800; color:#fff; background:var(--brand); padding:4px 8px; border-radius:999px}

.faq details{border:1px solid var(--line); border-radius:12px; padding:14px 18px; background:#fff}
.faq summary{cursor:pointer;font-weight:700}
.faq details:hover{border-color:#cfe7f3; box-shadow:0 6px 16px rgba(32,118,156,.08)}
.faq details+details{margin-top:10px}

.footer{background:#0b1220;color:#cbd5e1;padding:40px 0}
.footer a{color:#e2e8f0}
.breadcrumbs{font-size:14px;color:#64748b;margin:10px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Topbar */
.site-topbar{position:sticky; top:0; z-index:50; background:#fff; border-bottom:2px solid var(--tint)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.topnav{display:flex; align-items:center; gap:16px}
.topnav .menu{display:flex; gap:14px; list-style:none; margin:0; padding:0}
.topnav .menu a{color:var(--ink); font-weight:700}
.topnav .menu a:hover{color:var(--brand)}
.btn-login{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn-login:hover{background:var(--tint); color:var(--brand)}

.hr{height:1px;background:var(--line);margin:30px 0}

/* Posts grid */
.posts-grid { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .posts-grid{ grid-template-columns:1fr } }
.post-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .25s, border-color .25s }
.post-card:hover{ box-shadow:0 12px 30px rgba(32,118,156,.18); border-color:#cfe7f3 }
.post-thumb{ aspect-ratio:16/9; background:#eef6fa; object-fit:cover; width:100% }
.post-body{ padding:16px }
.post-meta{ font-size:12px; color:var(--ink-2); margin-bottom:6px }
.post-title{ font-weight:800; margin:0 0 8px; color:#0b2f3f }
.post-excerpt{ color:var(--ink-2); margin:0 0 12px }
.post-card .btn{ padding:.6rem .9rem }