/* ═══════════════════════════════════════════════════════════
   SUBMISSÃO — Estilos específicos
   ═══════════════════════════════════════════════════════════ */

/* ══ HERO TITLE ══════════════════════════════════════════ */
.hero-title-section {
  padding: 48px 64px 0;
  text-align: center;
}

.sub-hero-title {
  font-family: 'Sarabun', sans-serif;
  font-size: 60px;
  font-weight: 800;
  color: var(--c-black);
  line-height: 1.1;
}
.sub-hero-title span { color: var(--c-amber); }

.hero-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--c-grey);
  line-height: 2;
  max-width: 864px;
  margin: 0 auto;
}


/* ══ PLAN CARDS ══════════════════════════════════════════ */
.plan-cards-section {
  padding: 40px 64px 64px;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.plan-card {
 height: 100%;
    width: 100%;
  border-radius: 24px;
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.10);
  flex-shrink: 0;
}

/* ─ Card light (Artigo) ─ */
.plan-card.light { background: #fff; }

.plan-badge-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 4px 12px;
  width: fit-content;
}

.plan-card.light .plan-name {
  font-family: 'Sarabun', sans-serif;
  font-size: 28px; font-weight: 800;
  color: var(--c-navy); line-height: 1.1; letter-spacing: -1.12px;
}
.plan-card.light .plan-desc {
  font-family: 'Sarabun', sans-serif;
  font-size: 14px; font-weight: 400;
  color: #666; letter-spacing: -0.42px;
}
.plan-card.light .plan-price {
  font-family: 'Sarabun', sans-serif;
  font-size: 32px; font-weight: 700;
  color: var(--c-navy); letter-spacing: -1.28px; line-height: 1;
}
.plan-card.light .feature-text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--c-navy); letter-spacing: -0.42px;
}
.plan-card.light .btn-plan {
  background: var(--c-navy); color: #fff; border: none;
  border-radius: 12px; padding: 12px 24px; width: 100%;
  font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: -0.48px;
  box-shadow: 8px 8px 35px 0 rgba(239,174,35,.20);
}
.plan-card.light .btn-plan:hover { background: #0e1f3a; }
.plan-card.light .link-alt {
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400;
  color: #606060; letter-spacing: -0.42px; text-align: center; text-decoration: none;
}
.plan-card.light .link-alt:hover { text-decoration: underline; }

/* ─ Card dark (Manuscrito) ─ */
.plan-card.dark { background: var(--c-navy); }

.plan-badge-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-amber);
  color: var(--c-navy);
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.08px; text-transform: uppercase;
  border-radius: 10px; padding: 4px 12px; width: fit-content;
}

.plan-card.dark .plan-name {
  font-family: 'Sarabun', sans-serif;
  font-size: 28px; font-weight: 800;
  color: var(--c-white); line-height: 1.1; letter-spacing: -1.12px;
}
.plan-card.dark .plan-desc {
  font-family: 'Sarabun', sans-serif;
  font-size: 14px; font-weight: 400;
  color: #a9a9a9; letter-spacing: -0.42px;
}
.plan-card.dark .plan-price {
  font-family: 'Sarabun', sans-serif;
  font-size: 32px; font-weight: 700;
  color: var(--c-white); letter-spacing: -1.28px; line-height: 1;
}
.plan-card.dark .plan-price-from {
  font-family: 'Sarabun', sans-serif;
  font-size: 15.48px; font-weight: 700;
  color: var(--c-white); letter-spacing: -0.96px;
  align-self: flex-end; margin-bottom: 2px;
}
.plan-card.dark .feature-text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--c-white); letter-spacing: -0.42px;
}
.plan-card.dark .btn-plan {
  background: var(--c-amber); color: var(--c-navy); border: none;
  border-radius: 12px; padding: 12px 24px; width: 100%;
  font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: -0.48px;
  box-shadow: 8px 8px 35px 0 rgba(239,174,35,.20);
}
.plan-card.dark .btn-plan:hover { background: #d4920e; }
.plan-card.dark .link-alt {
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400;
  color: var(--c-white); letter-spacing: -0.42px; text-align: center; text-decoration: none;
}
.plan-card.dark .link-alt:hover { text-decoration: underline; }

/* Feature list */
.feature-list { display: flex; flex-direction: column; gap: 16px; }

/* Plan structure */
.plan-specs { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.plan-info { display: flex; flex-direction: column; gap: 16px; }
.plan-header { display: flex; flex-direction: column; gap: 4px; }
.plan-price-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; }
.plan-actions { display: flex; flex-direction: column; gap: 16px; align-items: center; }


/* ══ WHY SECTION ═════════════════════════════════════════ */
.sub-why-section { padding: 0 64px 64px; }

.why-box {
  background: var(--c-blue-bg);
  border-radius: 24px;
  padding: 48px 24px;
  text-align: center;
}
.why-box h2 {
  font-family: 'Sarabun', sans-serif;
  font-size: 42px; font-weight: 800;
  color: var(--c-black); margin-bottom: 16px;
}
.why-box p.subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 20px; font-weight: 500;
  color: var(--c-grey); line-height: 2;
  max-width: 990px; margin: 0 auto 32px;
}

.stat-mini-card {
  background: var(--c-white);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 8.69px 8.69px 38px 0 rgba(26,26,26,.04);
}
.stat-mini-card .num {
  font-family: 'Sarabun', sans-serif;
  font-size: 40px; font-weight: 600;
  color: var(--c-black); line-height: 1;
}
.stat-mini-card .lbl {
  font-family: 'Poppins', sans-serif;
  font-size: 18px; font-weight: 400;
  color: var(--c-grey); line-height: 2.2;
}


/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .hero-title-section,
  .plan-cards-section,
  .sub-why-section { padding-left: 32px; padding-right: 32px; }
  .plan-card { width: 100%; max-width: 527px; }
  .plan-cards-section { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .sub-hero-title { font-size: 38px; }
  .why-box h2 { font-size: 28px; }
  .hero-title-section,
  .plan-cards-section,
  .sub-why-section { padding-left: 20px; padding-right: 20px; }
}