/* M24 · proposta de aplicação para SITE W18 · 12/09/2026.
   Carregar DEPOIS de /assets/style.css. Acrescentar m24 ao main das quatro
   páginas. Sem regras de :root, header, nav, footer, Studio ou autenticação.
   Tokens conferidos em SITE 0b0ac7b:site/assets/style.css. */

.site-clean .m24 .m24-wrap {
  width: 100%; max-width: 76rem; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.site-clean .m24 .m24-section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-clean .m24 .m24-section > .m24-wrap { display: block; }
.site-clean .m24 .m24-hero { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--cor-papel-escuro); }
.site-clean .m24 :is(.m24-hero, .m24-hero > .m24-wrap, .m24-section, .m24-section > .m24-wrap)::before,
.site-clean .m24 :is(.m24-hero, .m24-hero > .m24-wrap, .m24-section, .m24-section > .m24-wrap)::after { display: none; }
.site-clean .m24 .m24-hero > .m24-wrap { display: block; }
.site-clean .m24 .m24-hero h1 {
  max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: 1.1; font-weight: 720; text-wrap: balance;
}
.site-clean .m24 .m24-hero .lead { max-width: 58ch; margin-bottom: 0; font-size: clamp(1.125rem, 1rem + .35vw, 1.375rem); }
.site-clean .m24 .m24-heading { max-width: var(--medida); margin-bottom: var(--esp-6); }
.site-clean .m24 .m24-heading h2 {
  max-width: 29ch; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.4375rem);
  line-height: 1.18; font-weight: 680; text-wrap: balance;
}
.site-clean .m24 :is(.m24-copy, .m24-card p, .m24-route p, .m24-source p) {
  max-width: var(--medida); font-size: var(--t-base); line-height: 1.7;
  text-align: start; text-align-last: start; text-wrap: pretty;
  hyphens: none; overflow-wrap: break-word;
}
/* Decisão 3 de Tiago (26/09/2026): justificado só na prosa longa acima de 480 px;
   cartões, rotas, resultados, notas e a coluna de contato ficam alinhados à esquerda. */
@media (min-width: 481px) {
  .site-clean .m24 :is(.m24-copy, .m24-source p):not(:where(:is(.m24-contact-context, .v-card, .v-faixa, .nota, aside) *)) {
    text-align: justify; hyphens: auto; hyphenate-limit-chars: 7 3 3;
  }
}
.site-clean .m24 :is(.m24-contact) > * { min-width: 0; }
.site-clean .m24 .m24-meta {
  display: block; margin-bottom: var(--esp-3); color: var(--v-rotulo-cor, var(--cor-marca));
  font: 500 var(--t-mini)/1.4 var(--fonte-mono); letter-spacing: .12em; text-transform: uppercase;
}
.site-clean .m24 .m24-actions { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; margin-top: var(--esp-5); }
.site-clean .m24 .m24-actions .botao { white-space: normal; text-align: center; min-height: 48px; }
.site-clean .m24 .m24-text-link { color: var(--cor-marca); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }

/* Contato: grade 5/7 com form de leitura ampla; campos só dividem acima de 720. */
.site-clean .m24 .m24-contact { display: grid; grid-template-columns: 1fr; gap: var(--esp-6); align-items: start; }
.site-clean .m24 .m24-contact-context { max-width: var(--medida-curta); }
.site-clean .m24 .m24-form {
  min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--cor-filete); border-top: 4px solid var(--cor-marca);
  border-radius: 12px; background: var(--cor-papel); box-shadow: var(--sombra);
  font-family: var(--fonte-corpo); font-size: var(--t-base);
}
.site-clean .m24 .m24-fields { display: grid; grid-template-columns: 1fr; gap: var(--esp-5); }
.site-clean .m24 .m24-form > .m24-help { margin: 0 0 var(--esp-5); }
.site-clean .m24 .m24-field { min-width: 0; }
.site-clean .m24 .m24-field label { display: block; margin-bottom: var(--esp-2); font-weight: var(--peso-medio); line-height: 1.5; }
.site-clean .m24 .m24-field label span { font-weight: var(--peso-normal); }
.site-clean .m24 .m24-field :is(input, textarea) {
  width: 100%; min-width: 0; min-height: 48px; padding: .75rem;
  border: 1px solid var(--cor-filete-forte); border-radius: var(--raio);
  background: var(--cor-papel); color: var(--cor-tinta);
  font-family: var(--fonte-corpo); font-size: max(1rem, var(--t-base)); line-height: 1.5;
}
.site-clean .m24 .m24-field textarea { min-height: 10rem; resize: vertical; }
.site-clean .m24 .m24-field :is(input, textarea):focus-visible { outline: var(--anel-foco); outline-offset: var(--anel-foco-recuo); box-shadow: none; }
.site-clean .m24 .m24-field [aria-invalid="true"] { border: 2px solid var(--cor-erro); }
.site-clean .m24 :is(.m24-help, .m24-privacy) { display: block; margin: var(--esp-2) 0 0; font-size: var(--t-menor); line-height: 1.6; color: var(--cor-tinta-suave); text-align: start; }
.site-clean .m24 .m24-error:not(:empty) { display: block; margin-top: var(--esp-2); color: var(--cor-erro); font-size: var(--t-menor); font-weight: var(--peso-medio); line-height: 1.6; }
.site-clean .m24 .m24-error:empty { display: none; }
.site-clean .m24 .m24-privacy { margin-top: var(--esp-5); }
.site-clean .m24 .m24-feedback {
  margin: var(--esp-4) 0 0; padding: var(--esp-4); border: 1px solid var(--cor-filete-forte);
  border-radius: var(--raio); font-size: var(--t-base); line-height: 1.6; text-align: start;
}
.site-clean .m24 .m24-feedback:empty { display: none; }
.site-clean .m24 .m24-feedback[data-state="success"] { border-color: var(--cor-sucesso); color: var(--cor-tinta); background: var(--cor-sucesso-lavado); }
.site-clean .m24 .m24-feedback[data-state="error"] { border-color: var(--cor-erro); color: var(--cor-tinta); background: var(--cor-erro-lavado); }
.site-clean .m24 .m24-form[aria-busy="true"] { cursor: progress; }

/* Metodologia: mesma gramática de comparação, sem alturas fixas ou ordem CSS. */

/* Fontes: cada origem tem uma faixa completa; nunca três cards estreitos. */
.site-clean .m24 .m24-index { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin: 0 0 var(--esp-6); }
.site-clean .m24 .m24-index a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: var(--esp-2) var(--esp-4); border: 1px solid var(--cor-filete-forte); border-radius: var(--raio); color: var(--cor-marca); font-size: var(--t-base); line-height: 1.5; text-decoration: underline; text-underline-offset: .2em; }
.site-clean .m24 .m24-family { scroll-margin-top: 7rem; }
.site-clean .m24 .m24-family + .m24-family { margin-top: var(--esp-7); }

@media (min-width: 721px) {
  .site-clean .m24 .m24-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-clean .m24 .m24-field--wide { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
  .site-clean .m24 .m24-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 3vw, 3rem); }
  .site-clean .m24 .m24-hero > .m24-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-7); }
  .site-clean .m24 .m24-hero > .m24-wrap > .versalete { grid-column: 1 / -1; }
  .site-clean .m24 .m24-hero h1 { grid-column: 1; grid-row: 2 / span 4; }
  .site-clean .m24 .m24-hero > .m24-wrap > :not(h1):not(.versalete) { grid-column: 2; }
}
@media (max-width: 720px) {
  .site-clean .m24 .m24-actions .botao { width: 100%; }
  .site-clean .m24 .m24-hero h1 { max-width: 22ch; }
  .site-clean .m24 .m24-contact-context { max-width: none; }
  .site-clean .m24 .m24-form { padding-inline: var(--esp-4); }
}