/*
  Ajustes responsivos compartilhados pelos dois temas.
  As regras começam em 1080px para preservar o layout de computador.
*/

@media (max-width: 1080px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header {
    gap: 12px;
    padding-inline: 24px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
    margin-left: 0;
  }

  .theme-toggle {
    margin-left: auto;
  }

  .home-hero,
  .page-hero,
  .home-hero > *,
  .page-hero > *,
  .chart-card,
  .comparison-card,
  .comparison-side,
  .comparison-index,
  .impact-column,
  .quiz {
    min-width: 0;
  }

  .home-hero {
    min-height: auto;
  }

  h1,
  h2,
  h3,
  p,
  a,
  strong,
  small {
    overflow-wrap: break-word;
  }
}

@media (max-width: 900px) {
  .shell {
    width: min(100% - 40px, var(--shell));
  }

  .page-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
    padding-block: 64px 48px;
  }

  .page-hero > aside {
    min-height: auto;
    padding: 20px;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
    background: linear-gradient(180deg, rgba(103, 232, 249, .035), transparent);
  }

  .chart-grid,
  .opinion-section,
  .disorder-intro,
  .diagnosis-note,
  .limits-section,
  .safety-panel,
  .download-grid {
    grid-template-columns: 1fr;
  }

  .opinion-section,
  .disorder-intro,
  .limits-section,
  .safety-panel {
    gap: 32px;
  }

  .criteria-grid,
  .theory-grid {
    grid-template-columns: 1fr 1fr;
  }

  .criteria-grid article:last-child,
  .theory-grid article:last-child {
    grid-column: 1 / -1;
  }

  .context-grid {
    grid-template-columns: 1fr;
  }

  .context-grid article {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line) !important;
  }

  .context-grid article:last-child {
    border-bottom: 0 !important;
  }

  .dual-signal {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dual-bridge {
    min-height: 50px;
  }

  .dual-bridge span {
    writing-mode: initial;
  }

  .diagnosis-note .source-note {
    grid-column: auto;
  }

  .audit-list {
    grid-template-columns: 1fr;
  }

  .audit-list article:last-child {
    grid-column: auto;
  }

  .safety-panel {
    padding-block: 42px;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 64px;
  }

  .shell {
    width: min(100% - 28px, var(--shell));
  }

  .site-header {
    height: var(--header-height);
    gap: 8px;
    padding-inline: 14px;
  }

  .brand {
    gap: 8px;
    margin-right: auto;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .theme-toggle,
  .mobile-menu summary {
    width: 40px;
    min-height: 40px;
    height: 40px;
  }

  .mobile-menu nav {
    top: 48px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }

  .home-hero {
    gap: 36px;
    padding-block: 52px;
  }

  .hero-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
    line-height: .98;
  }

  .hero-copy > p {
    margin-top: 20px;
  }

  .hero-actions {
    margin-top: 26px;
  }

  .hero-dashboard {
    padding: 14px;
  }

  .dashboard-main {
    padding-block: 18px;
  }

  .signal-strip {
    scrollbar-width: none;
  }

  .signal-strip::-webkit-scrollbar {
    display: none;
  }

  .section {
    padding-block: 60px;
  }

  .section-title {
    margin-bottom: 28px;
  }

  .section-title h2 {
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .page-hero {
    gap: 28px;
    padding-block: 54px 42px;
  }

  .page-hero h1 {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
    overflow-wrap: anywhere;
  }

  .page-hero > div > p {
    font-size: .95rem;
    line-height: 1.65;
  }

  .page-hero > aside {
    min-height: auto;
  }

  .chart-card {
    padding: 20px 16px;
  }

  .card-heading {
    margin-bottom: 24px;
  }

  .donut-pair {
    grid-template-columns: 1fr;
  }

  .donut-pair .donut {
    max-width: 175px;
  }

  .bar-label {
    align-items: flex-end;
  }

  .stats-grid,
  .compact-stats {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .compact-stats .stat-card {
    min-height: 180px;
    padding: 24px;
  }

  .thesis-panel {
    padding-inline: 24px;
    margin-bottom: 70px;
  }

  .impact-column {
    padding: 24px 18px;
  }

  .impact-list > div {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .criteria-grid,
  .theory-grid {
    grid-template-columns: 1fr;
  }

  .criteria-grid article:last-child,
  .theory-grid article:last-child {
    grid-column: auto;
  }

  .comparison-card {
    grid-template-columns: 1fr;
  }

  .comparison-index {
    grid-row: auto;
  }

  .comparison-side {
    grid-column: auto;
  }

  .quiz {
    padding: 22px 16px;
  }

  .question-list fieldset > p,
  .choice-group {
    margin-left: 0;
  }

  .choice-group {
    grid-template-columns: 1fr;
  }

  .choice-group button {
    width: 100%;
  }

  .quiz-actions {
    gap: 8px;
  }

  .references-list li {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .references-list p {
    font-size: .78rem;
  }

  .download-card {
    min-height: 150px;
    padding: 22px;
  }

  .site-footer {
    gap: 28px;
    padding: 48px 20px;
  }
}

@media (max-width: 480px) {
  .brand small {
    display: none;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .theme-toggle,
  .mobile-menu summary {
    width: 38px;
    min-height: 38px;
    height: 38px;
  }

  .eyebrow {
    font-size: .6rem;
    letter-spacing: .1em;
  }

  .hero-copy h1 {
    font-size: clamp(2.65rem, 15vw, 3.35rem);
  }

  .dashboard-topline i {
    display: none;
  }

  .dashboard-balance {
    grid-template-columns: 1fr;
  }

  .dashboard-balance > div {
    min-height: 58px;
  }

  .dashboard-balance span {
    font-size: .55rem;
  }

  .dashboard-balance strong,
  .dashboard-balance .balance-center strong {
    font-size: 1rem;
  }

  .story-path li {
    grid-template-columns: 30px minmax(0, 1fr) 32px;
  }

  .page-hero {
    padding-block: 50px 38px;
  }

  .section {
    padding-block: 52px;
  }

  .chart-card {
    padding-inline: 14px;
  }

  .meter-values {
    grid-template-columns: 1fr 2fr 1fr;
    font-size: .75rem;
  }

  .meter-values strong {
    font-size: 1.3rem;
  }

  .quiz-header h2 {
    font-size: 2.2rem;
  }

  .question-list legend {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    font-size: .95rem;
  }

  .question-list legend b {
    padding-top: 4px;
  }

  .comparison-side,
  .comparison-index,
  .method-steps li,
  .theory-grid article,
  .audit-list article {
    padding: 22px;
  }

  .opinion-meter {
    padding: 20px 12px;
  }

  .context-orbit {
    width: 170px;
  }
}