/* ==========================================================================
   app.css — Core globals, tokens e componentes compartilhados (sem header/footer)
   ========================================================================== */

/* ===== Tokens / Resets ===== */
:root{
  --brand:#2f6fb0; --brand-600:#4e8bc3; --ink:#264e64; --muted:#475569; --bg:#FFFFFF; --line:#E5E7EB;
  --success:#22C55E; --mx:22px; --radius:16px; --tap:48px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}

/* A11y */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-contrast: more){ :focus-visible{ outline-width:3px; } }

/* Containers */
.wrap{
  max-width:1180px;
  margin:0 auto;
  /* respiro lateral consistente + safe-areas */
  padding-left: max(var(--mx), 16px, env(safe-area-inset-left));
  padding-right: max(var(--mx), 16px, env(safe-area-inset-right));
}

/* Tipografia base */
h1{font-size:clamp(32px,5.2vw,56px);line-height:1.06;margin:8px 0 10px;letter-spacing:-.2px}
h2{font-size:clamp(24px,3.2vw,36px);margin:0 0 6px;letter-spacing:-.2px}
.muted{color:var(--muted)}

/* ===== Utilitários ===== */
.grid{display:grid;gap:20px}
@media(min-width:960px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
}
.sep{border:none;border-top:1px solid var(--line);margin:16px 0}
.list-plain{list-style:none;padding:0;margin:0}

/* Segurança contra overflow de mídia/conteúdo */
img, svg, video{ max-width:100%; height:auto; }
h1, h2, h3, p, a, li{ overflow-wrap:anywhere; }

/* ===== Hero ===== */
.hero {
  padding: 60px 0;
  background: linear-gradient(to bottom, #F3F6FF 0%, #fff 60%);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1100px) {
  .hero .wrap {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
}

.kicker {
  display: inline-block;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.sub {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: var(--muted);
  max-width: 700px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 12px;
  border: 2px solid var(--brand);
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.2s;
}
.btn.primary {
  background: var(--brand);
  color: #fff;
}
.btn.primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(47, 111, 176, 0.3);
}
.btn.ghost {
  color: var(--brand);
  background: #fff;
}
.btn.ghost:hover {
  background: #f8fafc;
  transform: translateY(-2px);
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Mobile: botões em linha cheia */
@media (max-width: 600px) {
  .hero {
    padding: 40px 0;
  }
  .cta {
    flex-direction: column;
  }
  .cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== KPIs ===== */
.kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}
@media (min-width: 640px) {
  .kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.kpi strong {
  font-size: 0.95rem;
  color: var(--ink);
  display: block;
}
.kpi .muted {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ===== Logos ===== */
.logos{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos ul{
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center;
  list-style:none;margin:0;padding:0
}

/* ===== Cards, Painéis e Seções ===== */
section{padding:30px 0}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff;box-shadow:0 6px 16px rgba(2,6,23,.04)}

.section-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bundle{display:grid;gap:18px;margin-top:18px}
@media(min-width:1100px){.bundle{grid-template-columns:1.2fr 1fr}}

.panel{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 18px rgba(2,6,23,.05);overflow:hidden}
.panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#F8FAFC;border-bottom:1px solid var(--line)}
.panel header h3{margin:0;font-size:18px}
.panel .body{padding:14px 18px}

.kv{display:flex;flex-wrap:wrap;gap:8px}
.kv .pill{background:#ECFEF5;color:#065F46;border:1px solid #86EFAC;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}

.list{display:grid;gap:10px;margin:10px 0 0}
.item{display:flex;gap:10px;align-items:flex-start}
.check{min-width:18px;height:18px;border-radius:4px;border:2px solid #3ba035;color:#3ba035;display:grid;place-items:center;font-size:12px;line-height:1}
.note{font-size:12px;color:#64748B;margin-top:8px}

.split{display:grid;gap:14px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}

.callout{border:1px dashed #CBD5E1;border-radius:14px;padding:14px;background:#F8FAFF}
.callout strong{color:#264e64}
.cta-inline{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* ===== Portfólio ===== */
.thumb{
  width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#F8FAFC
}

/* ===== Banner CTA ===== */
.banner{background:var(--brand);color:#fff;border-radius:22px;padding:24px;display:grid;gap:12px}
@media(min-width:900px){.banner{grid-template-columns:1.6fr .8fr;align-items:center}}
.banner .btn{border-color:#fff;color:var(--brand);background:#fff}

/* ===== FAB (WhatsApp) ===== */
.fab{
  position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;
  background:var(--success);display:grid;place-items:center;color:#fff;font-weight:900;
  box-shadow:0 10px 24px rgba(0,0,0,.18);z-index:90
}

/* ===== Sticky CTA (one-hand + safe areas) ===== */
.sticky-cta{
  position:sticky; bottom:0; z-index:70; background:#fff;
  padding:12px max(22px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-right));
  border-top:1px solid var(--line);
}
.sticky-cta .btn{ width:100%; height:52px; font-size:16px; }

/* ===== Motion-safe ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ===== Tweak de densidade para telas muito estreitas ===== */
@media (max-width: 480px){
  :root{ --mx: 16px; } /* reduz margem base, mantendo respiro lateral */
}

/* ===== Seções do Index ===== */
.plano-section {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: white;
  padding: 40px 0;
  margin-top: 40px;
}
.plano-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .plano-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.plano-title {
  color: white;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 0 16px;
  font-weight: 800;
}
.plano-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  margin: 0 0 24px;
  color: rgba(255,255,255,0.95);
}
.plano-inclusos {
  background: rgba(255,255,255,0.15);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.plano-inclusos h3 {
  color: white;
  margin: 0 0 12px;
  font-size: 1rem;
}
.plano-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 0.9rem;
}
@media (min-width: 480px) {
  .plano-lista {
    grid-template-columns: 1fr 1fr;
  }
}
.plano-preco {
  background: white;
  color: #15803d;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 24px;
}
.plano-preco > p:first-child {
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.plano-valor {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
}
.plano-preco > p:last-child {
  margin: 4px 0 0;
  font-size: 1rem;
}
.btn-plano {
  background: white;
  color: #15803d;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  width: 100%;
  text-align: center;
}
@media (min-width: 480px) {
  .btn-plano {
    width: auto;
  }
}

/* Regularize Section */
.regularize-section {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: white;
  padding: 40px 0;
  margin-top: 0;
}
.regularize-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.regularize-content h2 {
  color: white;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin: 0 0 16px;
  font-weight: 800;
}
.regularize-content > p {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  margin: 0 0 32px;
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
.regularize-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
@media (min-width: 640px) {
  .regularize-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.regularize-item {
  background: rgba(255,255,255,0.15);
  padding: 24px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}
.regularize-item h3 {
  color: white;
  margin: 0 0 8px;
  font-size: 1rem;
}
.regularize-item p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
}
.regularize-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
@media (min-width: 640px) {
  .regularize-buttons {
    flex-direction: row;
  }
}
.regularize-buttons .btn {
  padding: 16px 32px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
}
.regularize-buttons .btn:first-child {
  background: white;
  color: #991b1b;
}
.btn-secondary {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 3px solid white;
}

/* Serviços */
.servicos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .servicos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .servicos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.servico-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(2,6,23,.06);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.servico-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2,6,23,.1);
}
.servico-img {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.servico-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.servico-card h3 {
  font-size: 1.3rem;
  margin: 0 0 12px;
  color: var(--ink);
}
.servico-card > p {
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.6;
}
.servico-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
  flex-grow: 1;
}
.servico-lista li {
  color: var(--ink);
  font-size: 0.9rem;
}
.servico-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

/* Blog */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.blog-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.blog-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.blog-img {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  background: #f3f4f6;
}
.blog-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-content {
  padding: 24px;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.blog-meta span {
  font-size: 0.85rem;
  color: #2563eb;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.blog-meta time {
  font-size: 0.85rem;
  color: #6b7280;
}
.blog-content h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
}
.blog-content > p {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}
.blog-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

/* ===== Mobile Optimizations ===== */
@media (max-width: 767px) {
  section {
    padding: 30px 0;
  }
  .plano-section,
  .regularize-section {
    padding: 30px 0;
  }
  .plano-grid {
    gap: 24px;
  }
  .regularize-grid {
    gap: 16px;
  }
  .blog-grid {
    gap: 24px;
  }
}

@media (max-width: 479px) {
  .plano-title,
  .regularize-content h2 {
    font-size: 1.3rem;
  }
  .plano-subtitle {
    font-size: 0.95rem;
  }
  .plano-valor {
    font-size: 2rem;
  }
  .servico-card,
  .blog-card {
    padding: 16px;
  }
  .hero-image img {
    border-radius: 12px;
  }
  .kpi {
    padding: 12px;
  }
}









.quote{ margin:0; }
.q-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.avatar{
  width:40px; height:40px; border-radius:8px; object-fit:contain; background:#fff;
  border:1px solid var(--line); padding:4px;
}
.quote p{ margin:6px 0 0; }


/* === Testimonials Slider === */
.testi-slider{ position:relative; }
.testi-track{
  display:flex; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.testi-track{ scrollbar-width:none; }
.testi-track::-webkit-scrollbar{ display:none; }

.testi-slide{
  scroll-snap-align:center;     /* fica estável ao parar */
  flex:0 0 88%;                 /* 1 por tela (mobile) */
}
@media(min-width:720px){ .testi-slide{ flex:0 0 48%; } }   /* 2 por tela */
@media(min-width:1024px){ .testi-slide{ flex:0 0 32%; } }  /* 3 por tela */

.testi-nav{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-top:10px;
}
.testi-prev,.testi-next{
  height:40px; min-width:40px; padding:0 12px; border-radius:10px; line-height:1; font-weight:800;
}
.testi-dots{ display:flex; gap:6px; }
.testi-dot{
  width:8px; height:8px; border-radius:50%;
  background:#CBD5E1; opacity:.9;
}
.testi-dot.is-active{ background:var(--brand); }

/* reaproveita estilos dos cards de depoimentos */
.quote{ margin:0; }
.q-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.avatar{
  width:40px; height:40px; border-radius:8px; object-fit:contain; background:#fff;
  border:1px solid var(--line); padding:4px;
}
.quote p{ margin:6px 0 0; }