/* ============================================================
   SoulSyn — Essência · Responsive Overrides
   Base: desktop (1440px). Overrides para tablet e mobile.
   ============================================================ */

/* ─── Safety net: previne overflow horizontal ─── */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg { max-width: 100%; }

/* ============================================================
   TABLET (≤ 1279px)
   ============================================================ */
@media (max-width: 1279px) {
  .ss-nav { padding: 24px 48px; gap: 24px; }
  .ss-section { padding: 100px 48px; }
  .ss-section--first { padding: 60px 48px 80px; }
  .ss-cta-final { padding: 140px 48px 100px; }
  .ss-footer { padding: 32px 48px 40px; }

  .ss-h1     { font-size: 64px; }
  .ss-h2     { font-size: 52px; }
  .ss-h2--lg { font-size: 56px; }
  .ss-h2--cta { font-size: 72px; }
  .ss-diff-h3 { font-size: 64px; }
  .ss-manifesto-line { white-space: normal; }

  .ss-manifesto-p { font-size: 52px; width: auto; max-width: 100%; }
  .ss-dropcap     { font-size: 100px; }
  .ss-manifesto-fechamento { font-size: 28px; }
}

/* ============================================================
   TABLET PEQUENO / MOBILE GRANDE (≤ 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .ss-nav { padding: 20px 32px; }
  .ss-section { padding: 96px 32px; }
  .ss-section--first { padding: 48px 32px 64px; }
  .ss-cta-final { padding: 120px 32px 80px; }
  .ss-footer { padding: 28px 32px 36px; }

  /* esconde links inline, mostra hamburger */
  .ss-nav-links { display: none; }
  .ss-hamburger { display: inline-flex; }

  .ss-nav-cta { padding: 8px 14px; font-size: 12px; }

  /* todos os grids 2-col viram 1-col (cobre flex E grid) */
  .ss-hero-grid,
  .ss-manifesto-grid,
  .ss-manifesto-body,
  .ss-product-grid,
  .ss-diff-row,
  .ss-basic-grid,
  .ss-thiago-grid,
  .ss-faq-grid,
  .ss-section-header,
  .ss-section-header--flex {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .ss-section-header > *,
  .ss-section-header--flex > * { width: 100%; max-width: 100%; min-width: 0; }

  /* mock e cards de Diferenciais — full-width */
  .ss-diff-visual { width: 100%; max-width: 100%; justify-self: stretch; }
  .ss-diff-visual > div { width: 100%; max-width: 100%; }
  .ss-dialog-mock { width: 100%; }
  .ss-diff-row--reverse .ss-diff-visual { order: 0; justify-self: stretch; }
  .ss-diff-row--reverse > div:nth-child(2) { order: 1; }

  /* product cards continuam 2-col */
  .ss-product-cards { grid-template-columns: 1fr 1fr; }

  /* hero mandala bg — não vaza */
  .ss-hero-mandala-bg { inset: 0; transform: scale(0.85); }
  .ss-hero-visual { width: 100%; }
  .ss-hero-app { max-width: 100%; width: 320px; margin: 0 auto; }

  /* Essência mandala full-width centralizada */
  .ss-product-mandala { width: 100%; max-width: 480px; margin: 0 auto; }

  /* princípios viram coluna única, sem borda lateral */
  .ss-principles-grid { grid-template-columns: 1fr; }
  .ss-principle,
  .ss-principle:nth-child(odd),
  .ss-principle:nth-child(even) {
    border-right: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* thiago portrait full-width */
  .ss-thiago-portrait { width: 100%; height: auto; aspect-ratio: 380 / 480; }

  /* footer empilha */
  .ss-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ============================================================
   MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {
  .ss-nav { padding: 16px 20px; gap: 12px; }
  .ss-section { padding: 72px 20px; }
  .ss-section--first { padding: 40px 20px 56px; }
  .ss-cta-final { padding: 96px 20px 72px; }
  .ss-footer { padding: 24px 20px 32px; }

  /* esconde CTA do header */
  .ss-nav-cta { display: none; }

  .ss-nav-brand img { height: 34px; }
  .ss-nav-essencia { font-size: 18px; padding-left: 10px; }

  /* hero */
  .ss-h1 { font-size: 44px; line-height: 1.02; }
  .ss-hero-lede p { font-size: 17px; }
  .ss-hero-ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .ss-hero-ctas > a { justify-content: center; }

  /* trust marks — mantém 3 colunas com type menor */
  .ss-hero-trust { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ss-hero-trust__k { font-size: 10px; letter-spacing: 0.15em; margin-left: 0; }
  .ss-hero-trust__v { font-size: 14px; margin: 6px 0 0; width: auto; }

  /* manifesto */
  .ss-h2 { font-size: 36px; }
  .ss-h2--lg { font-size: 40px; }
  .ss-h2--cta { font-size: 44px; }
  .ss-diff-h3 { font-size: 56px; }
  .ss-manifesto-p { font-size: 36px; line-height: 1.1; }
  .ss-manifesto-line { font-size: 36px; }
  .ss-dropcap { font-size: 72px; padding-right: 10px; }
  .ss-manifesto-fechamento { font-size: 22px; }

  /* product cards 1-col */
  .ss-product-cards { grid-template-columns: 1fr; }

  /* basic ficha — linhas empilhadas */
  .ss-ficha { padding: 28px 24px; }
  .ss-ficha__row { grid-template-columns: 1fr; gap: 8px; }

  .ss-cta-final__lede { font-size: 17px; }
  .ss-footer__meta { flex-direction: column; gap: 8px; }
}

/* ─── extra small (≤ 380px) — type extra compacta ─── */
@media (max-width: 380px) {
  .ss-h1 { font-size: 38px; }
  .ss-manifesto-p, .ss-manifesto-line { font-size: 30px; }
  .ss-dropcap { font-size: 60px; }
  .ss-diff-h3 { font-size: 44px; }
  .ss-h2--cta { font-size: 36px; }
}