/* =============================================================
   MOBILE OPTIMIZATIONS
   Ajustes finos para telas < 768px e < 540px.
   Carregar SEMPRE depois de components.css e pages/*.css
   ============================================================= */

/* -----------------------------------------------------------
   1. Reduzir spacing entre headings e conteúdo no geral
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  /* Stack vertical de seções fica mais apertado */
  :root {
    --section-py: clamp(var(--space-lg), 6vw, var(--space-2xl));
    --section-py-sm: clamp(var(--space-md), 4vw, var(--space-xl));
  }

  /* Container reduz padding lateral */
  .container,
  .container-narrow,
  .container-wide {
    padding-inline: var(--space-md);
  }

  /* Reveal sem animação pesada em mobile, só aparece */
  .reveal {
    transform: none;
  }

  /* Cards genéricos */
  .card { padding: var(--space-md); }
}

/* -----------------------------------------------------------
   2. HOME — Hero, problem-cards, stack
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  .hero {
    padding-block: var(--space-xl) var(--space-lg);
  }
  .hero__grid {
    gap: var(--space-lg);
  }
  /* Visual da trama menor em mobile */
  .hero__visual {
    max-width: 280px;
  }
  .hero__sub {
    margin-top: var(--space-md);
  }
  .hero__ctas {
    margin-top: var(--space-lg);
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .hero__ctas .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }

  /* Cards de problema */
  .problem-card {
    padding: var(--space-md);
    gap: var(--space-sm);
  }
  .problem-card__icon { width: 32px; height: 32px; }
  .problem-card__text { font-size: var(--fs-body); }

  /* Cost cards (Pipeline custa caro) */
  .cost-card { padding: var(--space-lg); }
  .cost-card__title { font-size: var(--fs-h3); }
  .cost-card__divider { margin: var(--space-sm) auto; }

  /* Travas (3 lugares) — numerais menores */
  .trap { padding: var(--space-lg) 0; gap: var(--space-md); }
  .trap__num { font-size: 4rem; }
  .trap__title { font-size: var(--fs-h3); }
  .trap__desc { font-size: var(--fs-body); margin-top: var(--space-2xs); }

  /* Statement dramático */
  .statement {
    padding-block: var(--space-2xl);
  }

  /* Sistemas grid */
  .systems-grid {
    margin-top: var(--space-lg);
    gap: var(--space-sm);
  }
  .system-card {
    padding: var(--space-md);
    min-height: auto;
  }
  .system-card__name { font-size: var(--fs-h3); margin-top: var(--space-xs); }
  .system-card__desc { font-size: var(--fs-caption); margin-top: var(--space-xs); }
  .system-card__arrow { margin-top: var(--space-sm); }

  /* Diagrama da máquina mais compacto */
  .machine { margin-top: var(--space-lg); }
  .machine__row-label { padding: var(--space-sm) var(--space-md); }
  .machine__row-content { padding: var(--space-sm) var(--space-md); font-size: var(--fs-caption); }
  .machine__layer { padding: var(--space-sm); }
  .machine__layer-desc { font-size: 0.75rem; }
  .machine__pipeline-bar { padding: var(--space-xs); font-size: var(--fs-caption); }

  /* Comparativo — espaço entre cards reduzido */
  .compare-grid { margin-top: var(--space-lg); gap: var(--space-sm); }
  .compare-col__head { padding: var(--space-sm); }
  .compare-col__body { padding: var(--space-md); }
  .compare-col__list { gap: var(--space-2xs); margin-bottom: var(--space-md); }
  .compare-col__list li { font-size: var(--fs-caption); }

  /* Diferenciais */
  .diff-grid { margin-top: var(--space-lg); gap: var(--space-sm); }
  .diff-card { padding: var(--space-lg); gap: var(--space-md); }
  .diff-card__num { font-size: 3rem; }
  .diff-card__title { font-size: var(--fs-body-lg); }

  /* Certificação Lemlist */
  .cert {
    padding: var(--space-lg);
    margin-top: var(--space-lg);
  }
  .cert__title { font-size: var(--fs-h2); }
  .cert__desc { font-size: var(--fs-body); margin-top: var(--space-sm); }
  .cert__highlights { margin-top: var(--space-md); gap: var(--space-2xs) var(--space-md); }

  /* Stack de parceiros — cells menores em mobile */
  .stack-cell {
    min-height: 168px;
    padding: var(--space-md) var(--space-sm);
    gap: var(--space-2xs);
  }
  .stack-cell__logo { height: 56px; margin-bottom: var(--space-2xs); }
  .stack-cell img { max-height: 56px; }
  .stack-cell__label { font-size: var(--fs-caption); }
  .stack-cell__desc { font-size: 0.75rem; line-height: 1.35; }

  /* Para quem é */
  .fit-grid { margin-top: var(--space-lg); gap: var(--space-sm); }
  .fit-col { padding: var(--space-lg); }
  .fit-col__title { font-size: var(--fs-body-lg); margin-bottom: var(--space-md); }
  .fit-col__list { gap: var(--space-sm); }
  .fit-col__list li { font-size: var(--fs-body); }

  /* CTA final */
  .final-cta {
    padding-block: var(--space-2xl);
  }
  .final-cta__promises { margin-top: var(--space-md); }
  .final-cta__pill {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--fs-body);
    margin-top: var(--space-md);
  }
  .final-cta__small { margin-top: var(--space-sm); font-size: 0.75rem; }
}

/* -----------------------------------------------------------
   3. PÁGINAS DE SISTEMA — hero, fluxo, stack, deliverables, connect
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  .sys-hero {
    padding-block: var(--space-xl) var(--space-lg);
  }
  .sys-hero__name { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .sys-hero__subname { font-size: var(--fs-body-lg); }
  .sys-hero__def {
    font-size: var(--fs-body);
    margin-top: var(--space-md);
  }
  .sys-hero__ctas {
    margin-top: var(--space-lg);
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .sys-hero__ctas .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }

  .sys-section-header { margin-bottom: var(--space-lg); }
  .sys-section-header__title { font-size: var(--fs-h2); }
  .sys-section-header__lead { font-size: var(--fs-body); margin-top: var(--space-sm); }

  /* Problem section em pages de sistema */
  .sys-problem__quote {
    font-size: var(--fs-h3);
    padding-left: var(--space-md);
  }

  /* Fluxo de etapas */
  .flow__step { padding: var(--space-md); gap: var(--space-2xs); }
  .flow__step-title { font-size: var(--fs-body); }
  .flow__step-desc { font-size: 0.75rem; }

  /* Stack do sistema */
  .sys-stack { gap: var(--space-sm); }
  .sys-stack__item { padding: var(--space-md); gap: var(--space-2xs); }
  .sys-stack__logo { height: 48px; }
  .sys-stack__logo img { max-height: 48px; }
  .sys-stack__name { font-size: var(--fs-body-lg); }
  .sys-stack__role { font-size: var(--fs-caption); }

  /* Deliverables */
  .deliverables { gap: var(--space-sm); }
  .deliverable { padding: var(--space-md); gap: var(--space-2xs); }
  .deliverable__check { width: 28px; height: 28px; font-size: var(--fs-body); }
  .deliverable__title { font-size: var(--fs-body); }
  .deliverable__desc { font-size: var(--fs-caption); }

  /* Connect cards */
  .connect-grid { gap: var(--space-sm); }
  .connect-card { padding: var(--space-md); gap: var(--space-2xs); }
  .connect-card__name { font-size: var(--fs-body-lg); }
  .connect-card__hint { font-size: var(--fs-caption); }

  /* CTA final do sistema */
  .sys-cta { padding-block: var(--space-2xl); }
}

/* -----------------------------------------------------------
   4. SOBRE — manifest, ciclo, diff cards
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  .sobre-hero {
    padding-block: var(--space-xl) var(--space-lg);
  }
  .sobre-hero__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .sobre-hero__lead { font-size: var(--fs-body); margin-top: var(--space-md); }

  .manifest__quote { font-size: var(--fs-h3); }
  .manifest__body { margin-top: var(--space-lg); gap: var(--space-sm); }
  .manifest__body p { font-size: var(--fs-body); }

  .cycle { gap: var(--space-md); margin-top: var(--space-lg); }
  .cycle__step { padding: var(--space-lg); gap: var(--space-sm); }
  .cycle__step-title { font-size: var(--fs-h3); }

  .sobre-diff-grid { margin-top: var(--space-lg); gap: var(--space-sm); }
  .sobre-diff-card { padding: var(--space-lg); gap: var(--space-md); }
  .sobre-diff-card__num { font-size: 3rem; }
  .sobre-diff-card__title { font-size: var(--fs-body-lg); }

  .sobre-stack__cell {
    min-height: 168px;
    padding: var(--space-md) var(--space-sm);
    gap: var(--space-2xs);
  }
  .sobre-stack__logo { height: 56px; }
  .sobre-stack__cell img { max-height: 56px; }
  .sobre-stack__label { font-size: var(--fs-caption); }
  .sobre-stack__desc { font-size: 0.75rem; line-height: 1.35; }

  .sobre-cta { padding-block: var(--space-2xl); }
  .sobre-cta__title { font-size: var(--fs-h2); }
}

/* -----------------------------------------------------------
   5. INSIGHTS — posts grid, author block, newsletter
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  .insights-hero {
    padding-block: var(--space-xl) var(--space-lg);
  }
  .insights-hero__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .insights-hero__lead { font-size: var(--fs-body); margin-top: var(--space-md); }

  .post-card__body { padding: var(--space-md); gap: var(--space-sm); }
  .post-card__title { font-size: var(--fs-body-lg); }
  .post-card__excerpt { font-size: var(--fs-caption); }

  .author-block { padding: var(--space-md); gap: var(--space-sm); }
  .author-block__avatar { width: 56px; height: 56px; font-size: var(--fs-body-lg); }
  .author-block__name { font-size: var(--fs-body-lg); }
  .author-block__role { font-size: var(--fs-caption); }

  .newsletter { padding: var(--space-lg); }
  .newsletter__title { font-size: var(--fs-h2); }
  .newsletter__body { font-size: var(--fs-body); }
}

/* -----------------------------------------------------------
   6. DIAGNÓSTICO — form fields tighter
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  .diag-hero {
    padding-block: var(--space-xl) var(--space-lg);
  }
  .diag-grid { gap: var(--space-lg); }
  .diag-promise__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .diag-promise__lead { font-size: var(--fs-body); margin-top: var(--space-md); }
  .diag-promise__list { gap: var(--space-sm); margin-top: var(--space-lg); }
  .diag-promise__num { width: 28px; height: 28px; }
  .diag-promise__badges { margin-top: var(--space-lg); gap: var(--space-sm); }

  .diag-form { padding: var(--space-lg); }
  .diag-field { margin-bottom: var(--space-sm); }
  .diag-input,
  .diag-select,
  .diag-textarea { padding: var(--space-xs) var(--space-sm); }
  .diag-submit { padding: var(--space-sm) var(--space-md); font-size: var(--fs-body); margin-top: var(--space-sm); }
  .diag-form__legal { margin-top: var(--space-sm); }

  .diag-expect { gap: var(--space-md); margin-top: var(--space-lg); }
  .diag-expect__step { padding: var(--space-md); }
  .diag-expect__step-title { font-size: var(--fs-body); margin-top: var(--space-2xs); }
  .diag-expect__step-desc { font-size: var(--fs-caption); margin-top: var(--space-2xs); }
}

/* -----------------------------------------------------------
   7. LEGAL pages — TOC e conteúdo mobile
   ----------------------------------------------------------- */

@media (max-width: 768px) {
  .legal { padding-block: var(--space-xl); }
  .legal__header { padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); }
  .legal__title { font-size: clamp(2rem, 9vw, 2.75rem); }
  .legal__meta { margin-top: var(--space-md); gap: var(--space-md); }
  .legal__content h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
  .legal__content h3 { margin-top: var(--space-md); }
  .legal__content p { margin-bottom: var(--space-sm); }
  .legal__content { font-size: var(--fs-body); }
}

/* -----------------------------------------------------------
   8. Telas muito pequenas (< 480px)
   ----------------------------------------------------------- */

@media (max-width: 480px) {
  /* Reduz tipografia hero ainda mais */
  .hero__title,
  .sys-hero__name,
  .sobre-hero__title,
  .insights-hero__title,
  .diag-promise__title,
  .legal__title {
    font-size: 2rem;
    line-height: 1.05;
  }

  /* Hambúrguer alinhado */
  .nav { height: 60px; }
  .nav__brand img { height: 22px; }
  .nav-mobile { inset: 60px 0 0 0; }

  /* Container ainda mais compacto */
  .container,
  .container-narrow,
  .container-wide {
    padding-inline: var(--space-sm);
  }

  /* Stacks 1 coluna em vez de 2 já desde 480px */
  .stack-grid,
  .sobre-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cookie banner full-width sem margem lateral */
  .cookie-banner {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0