/* ============================================================
   CardUp Homepage — Modern Design System
   Applies to sections below the hero banner.
   Does NOT touch hero, header, footer, or main.css classes.
   ============================================================ */

/* ---------- Shared tokens ---------- */
.hm-section        { padding: 80px 0; }
.hm-section--white { background: #ffffff; }
.hm-section--grey  { background: #f8fafc; }

.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hm-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}

.hm-title {
  font-size: 2.15rem;
  font-weight: 800;
  color: #1a1f36;
  line-height: 1.22;
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.hm-sub {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.7;
  margin: 0;
}

/* ---------- Hero extension for stat overlap ---------- */
.hero1 { padding-bottom: 170px; }

/* ---------- Stat bar ---------- */
.hm-stats {
  margin-top: -110px;
  padding: 0 0 48px;
  background: transparent;
  position: relative;
  z-index: 2;
}
.hm-stat-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  padding: 32px 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
}
.hm-stat-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.hm-stat-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #2563eb;
  flex-shrink: 0;
}
.hm-stat-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1f36;
  margin: 0 0 5px;
}
.hm-stat-body {
  font-size: .88rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* ---------- About ---------- */
.hm-about {
  padding: 80px 0;
  background: #f8fafc;
}
.hm-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.hm-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 14px;
}
.hm-check-list li:last-child { margin-bottom: 0; }
.hm-check-bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: .6rem;
  color: #2563eb;
}

/* ---------- Use cases ---------- */
.hm-use-section { padding: 80px 0; background: #ffffff; }

.hm-use-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  padding: 32px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.hm-use-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.hm-use-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #2563eb;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.hm-use-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1f36;
  margin: 0 0 10px;
}
.hm-use-body {
  font-size: .84rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
/* hm-use-link removed — use section uses a single CTA button below the grid */

/* ---------- Software Pricing ---------- */
.hm-pricing-section { padding: 80px 0; background: #f8fafc; }

.hm-plan-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  padding: 36px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.hm-plan-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.hm-plan-card--featured {
  border-color: #2563eb;
  box-shadow: 0 4px 28px rgba(37,99,235,.13);
}
.hm-plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 4px 16px;
  border-radius: 99px;
  white-space: nowrap;
}
.hm-plan-name {
  font-size: .75rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0 0 10px;
}
.hm-plan-price {
  font-size: 2.7rem;
  font-weight: 800;
  color: #1a1f36;
  line-height: 1;
  margin: 0 0 6px;
}
.hm-plan-price span {
  font-size: .95rem;
  font-weight: 500;
  color: #9ca3af;
}
.hm-plan-tagline {
  font-size: .84rem;
  color: #6b7280;
  margin: 8px 0 24px;
  line-height: 1.55;
}
.hm-plan-divider {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 0 0 22px;
}
.hm-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.hm-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  color: #374151;
  line-height: 1.55;
  margin-bottom: 11px;
}
.hm-plan-features li:last-child { margin-bottom: 0; }
.hm-plan-features li i {
  color: #2563eb;
  font-size: .68rem;
  margin-top: 4px;
  flex-shrink: 0;
}
.hm-plan-cta-wrap { margin-top: 28px; }
.hm-plan-cta {
  display: block;
  text-align: center;
  background-color: #0E38B1;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: .93rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.4s;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hm-plan-cta:hover { background-color: #3059CE; color: #fff; transform: translateY(-4px); }
.hm-plan-cta--outline {
  background: transparent;
  color: #374151;
  border: 2px solid #e5e7eb;
}
.hm-plan-cta--outline:hover {
  background: #f9fafb;
  color: #1a1f36;
  border-color: #d1d5db;
  transform: translateY(-2px);
}

/* Unify button shape across homepage — same radius/padding as Encomendar Cartões */
.hero1 .theme-btn1,
.hm-about .theme-btn1 {
  border-radius: 12px;
  padding: 13px 22px;
}
/* Header nav buttons */
.header-area .theme-btn1 {
  border-radius: 12px;
  padding: 11px 20px;
}
/* CTA section buttons (footer strip) — rounder and shorter */
.cta .cta-btn1,
.cta .cta-btn2 {
  border-radius: 12px;
  padding: 13px 22px;
}

/* ============================================================
   Static Pages — sp- design system
   ============================================================ */

/* Page hero */
.sp-hero {
  background: #eef1f8;
  padding: 130px 0 60px;
  text-align: center;
  border-bottom: 1px solid #dde2f0;
}
.sp-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1a1f36;
  margin: 0 0 14px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.sp-hero-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: #6b7280;
}
.sp-hero-crumb a {
  color: #374151;
  text-decoration: none;
  transition: color .15s;
}
.sp-hero-crumb a:hover { color: #2563eb; }
.sp-hero-crumb i { font-size: .65rem; opacity: .7; }

/* Content wrapper */
.sp-content { padding: 80px 0; background: #ffffff; }
.sp-content--grey { background: #f8fafc; }

/* Prose */
.sp-prose {
  font-size: .95rem;
  color: #374151;
  line-height: 1.75;
}
.sp-prose p { margin: 0 0 16px; }
.sp-prose ul, .sp-prose ol { padding-left: 1.4rem; margin: 0 0 16px; }
.sp-prose li { margin-bottom: 6px; }
.sp-prose strong { color: #1a1f36; }
.sp-prose h3 { font-size: 1.08rem; font-weight: 700; color: #1a1f36; margin: 0 0 12px; }
.sp-prose .terms-section h3,
.sp-prose .privacy-section h3 { margin-top: 36px; }

/* FAQ category label */
.sp-faq-cat {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #2563eb;
  margin: 40px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-faq-cat::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
.sp-faq-cat:first-child { margin-top: 0; }

/* Accordion */
.sp-accordion .accordion-item {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sp-accordion .accordion-button {
  font-size: .95rem;
  font-weight: 700;
  color: #1a1f36;
  background: #ffffff;
  border-radius: 14px !important;
  padding: 18px 22px;
  box-shadow: none !important;
}
.sp-accordion .accordion-button:not(.collapsed) {
  background: #eff6ff;
  color: #2563eb;
}
.sp-accordion .accordion-body {
  font-size: .9rem;
  color: #374151;
  line-height: 1.7;
  padding: 12px 22px 20px;
  background: #ffffff;
}

/* Info cards */
.sp-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  padding: 28px 24px;
}
.sp-card--green { border-color: #86efac; background: #f0fdf4; }
.sp-card--blue  { border-color: #bfdbfe; background: #eff6ff; }
.sp-card--amber { border-color: #fcd34d; background: #fffbeb; }
.sp-card--neutral { border-color: #e5e7eb; background: #f8fafc; }
.sp-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 16px;
}
.sp-card-icon--green  { background: #dcfce7; color: #059669; }
.sp-card-icon--blue   { background: #dbeafe; color: #2563eb; }
.sp-card-icon--amber  { background: #fef3c7; color: #d97706; }
.sp-card-icon--red    { background: #fee2e2; color: #dc2626; }
.sp-card-title { font-size: 1rem; font-weight: 700; color: #1a1f36; margin: 0 0 8px; }
.sp-card-body  { font-size: .85rem; color: #6b7280; line-height: 1.65; margin: 0; }

/* Step circle */
.sp-step {
  width: 52px; height: 52px;
  background: #eff6ff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 1rem; font-weight: 800; color: #2563eb;
}

/* Contact info items */
.sp-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}
.sp-contact-item:last-child { border-bottom: none; }
.sp-contact-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #eff6ff;
  display: flex; align-items: center; justify-content: center;
  color: #2563eb; font-size: 1rem; flex-shrink: 0;
}
.sp-contact-label {
  font-size: .72rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .07em; margin: 0 0 4px;
}
.sp-contact-value { font-size: .95rem; color: #1a1f36; font-weight: 500; margin: 0; }
.sp-contact-value a { color: #1a1f36; text-decoration: none; }
.sp-contact-value a:hover { color: #2563eb; }

/* CTA box */
.sp-cta-box {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 20px;
  padding: 36px 32px;
  text-align: center;
}
.sp-cta-box p { font-size: 1rem; color: #374151; margin: 0 0 20px; }

/* Responsive */
@media (max-width: 991px) {
  .sp-hero { padding: 110px 0 48px; }
  .sp-hero-title { font-size: 1.8rem; }
  .sp-content { padding: 60px 0; }
}
@media (max-width: 576px) {
  .sp-hero { padding: 100px 0 40px; }
  .sp-hero-title { font-size: 1.45rem; }
  .sp-content { padding: 48px 0; }
}

/* ---------- Copyright area vertical breathing ---------- */
.footer1 .copyright-area .coppyright p,
.footer1 .copyright-area .coppyright.right-area {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ---------- Footer breathing ---------- */
.footer1 > .container > .row > [class*='col'] {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .hero1 { padding-bottom: 130px; }
  .hm-stats { margin-top: -80px; padding-bottom: 36px; }
  .hm-section,
  .hm-about,
  .hm-use-section,
  .hm-pricing-section { padding: 60px 0; }
  .hm-title { font-size: 1.85rem; }
}
@media (max-width: 576px) {
  .hero1 { padding-bottom: 100px; }
  .hm-stats { margin-top: -60px; padding-bottom: 28px; }
  .hm-section,
  .hm-about,
  .hm-use-section,
  .hm-pricing-section { padding: 48px 0; }
  .hm-title { font-size: 1.55rem; }
  .hm-stat-card { padding: 20px 16px; gap: 13px; }
  .hm-plan-card { padding: 28px 20px; }
  .hm-use-card { padding: 26px 20px; }
  .footer1 > .container > .row > [class*='col'] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}