/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 🎨 planos.css – Padrão claro/azul CONSART (site público)             ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Paleta CONSART (claro) */
:root{
  /* Azul institucional */
  --brand:#0057b7;       /* azul CONSART */
  --brand-2:#0088ff;     /* azul claro de apoio */
  --brand-3:#3aa2ff;     /* azul destaque leve */

  /* Base/Tipografia/Line */
  --bg:#ffffff;
  --bg-alt:#f7faff;      /* fundo muito claro p/ seções */
  --surface:#ffffff;     /* cards */
  --surface-2:#eef5ff;   /* toques sutilmente azuis */
  --text:#1f2a44;        /* título/texto principal */
  --muted:#5e6a7a;       /* texto secundário */
  --line:#e7ecf2;        /* divisórias/bordas */

  /* Estados */
  --ok:#17b26a;

  /* Dimensões/efeitos */
  --radius:16px;
  --shadow:0 10px 28px rgba(22, 36, 80, .08);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 15% -15%, rgba(0,136,255,.08), transparent 60%),
    radial-gradient(760px 360px at 95% -10%, rgba(0,87,183,.08), transparent 65%),
    var(--bg);
  line-height:1.55;
}

/* Containers */
/* Containers (mais largos para não cortar cards) */
.sv-container, .container{
  width: min(1480px, 96%);
  margin: 28px auto;
}

/* Herói / cabeçalho da página */
.site-header{text-align:center;margin:24px auto 12px}
.title{font-size:42px;margin:0 0 6px;letter-spacing:.2px}
.subtitle{color:#3c4b63;margin:0 0 14px}

/* Toggle Mensal/Anual (idêntico ao padrão do site) */
.billing-toggle{
  display:inline-flex;gap:12px;align-items:center;margin:8px 0 14px;
  padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  background:linear-gradient(180deg,#fff,#f5f8ff);
  box-shadow:0 2px 8px rgba(16, 39, 84, .05);
}
.economy-badge,.economize{
  color:var(--brand);font-weight:600;border:1px solid var(--line);
  padding:2px 6px;border-radius:999px;margin-left:4px;background:#edf6ff
}
.switch{position:relative;width:54px;height:28px;display:inline-block}
.switch input{display:none}
.slider{position:absolute;inset:0;background:#e8eef9;border-radius:999px;transition:.25s;border:1px solid var(--line)}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.switch input:checked + .slider{background:#d7e9ff;border-color:#c8defa}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* Botões de categoria (na página principal/abas) */
.category-links{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:14px auto 6px;
}
.category-links .btn{
  background:#fff; color:#17416b; border:1px solid var(--line);
  padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; transition:.2s;
  box-shadow:0 6px 14px rgba(16,39,84,.06)
}
.category-links .btn:hover{border-color:#b7c9e6; transform:translateY(-1px)}
.category-links .btn:focus-visible{outline:3px solid rgba(0,136,255,.35); outline-offset:2px}
.category-links .btn.primary{
  background:linear-gradient(180deg,#e8f5ff,#d9efff); color:#0a3a66; border-color:#bfe1ff;
}

/* Seções */
.panel{margin-top:18px}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Cards de Planos — TODOS NA MESMA LINHA (scroll horizontal)        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.cards{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 24px;

  width: 100%;
  padding: 24px 24px 60px;   /* ⬅️ MAIS PADDING LATERAL */
  overflow-x: auto;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;  /* ⬅️ evita começar “colado” na borda */
  scroll-padding-right: 24px; /* ⬅️ evita terminar “colado” na borda */

  -webkit-overflow-scrolling: touch;
}

/* cada card encaixa ao rolar */
.cards > .card{
  scroll-snap-align: start;
}

/* scrollbar elegante (desktop) */
.cards::-webkit-scrollbar{
  height:10px;
}
.cards::-webkit-scrollbar-track{
  background:transparent;
}
.cards::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#dbe9ff,#c7ddff);
  border-radius:999px;
  border:2px solid transparent;
  background-clip: padding-box;
}

/* Desktop muito largo: tenta caber sem scroll */
@media (min-width: 1600px){
  .cards{
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x:hidden;
    justify-content:center;
  }
}

/* Card */
.card{
  width:100%;
  max-width:320px;             /* mantém consistência visual */
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.card-popular,.card.popular{outline:2px solid rgba(0,136,255,.35)}
.badge{
  position:absolute;top:14px;right:14px;font-size:.75rem;
  background:#edf6ff;border:1px solid #cfe6ff;color:#0a588c;
  padding:2px 8px;border-radius:999px;font-weight:700;letter-spacing:.3px
}
/* Título do plano */
.card-head h2,
.card h3{
  margin: 0 0 6px;
  font-size: 1.15rem;        /* ⬅️ reduz o tamanho */
  line-height: 1.25;         /* ⬅️ melhor quebra */
  font-weight: 800;
  letter-spacing: .2px;
}

.card-head p,.card small{color:#4c5e78;margin:0}

/* Preço */
.price{margin:14px 0 12px}
.price .price-main,.price .value{font-size:26px;font-weight:800;color:#0a2f53}

.price .per,.price .period{color:#5c6d86;margin-left:6px}
.save,.note{color:#0a7fc6;margin-top:6px}
.trial{color:#2d7c46;margin-top:6px}

/* Recursos / Limites */
.features{margin:14px 0 18px;padding:0;list-style:none}
.features li{margin:8px 0;color:#263b56}
.limits{border-top:1px dashed var(--line);padding-top:10px;margin-top:8px}
.limit-row{display:flex;justify-content:space-between;margin:6px 0;color:#2b3f5a}

/* CTA */
.cta{display:flex;gap:8px;margin-top:14px}
.cta a,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(180deg,#fdfefe,#eef5ff);
  color:#133a63;font-weight:700;text-decoration:none;transition:.2s
}
.cta a:hover{border-color:#b7c9e6}
.cta a.primary,.btn.primary{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#ffffff;border-color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.12)
}

/* FAQ + rodapé */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;box-shadow:var(--shadow)}
.site-footer{display:flex;justify-content:center;padding:24px 0;border-top:1px solid var(--line);background:var(--bg-alt);color:#3e4d64}