/* Reglas compartidas para todas las páginas y sus contenidos de ancho variable. */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 0; }
body { width: 100%; }
main, nav, footer, section, article, header, aside { min-width: 0; max-width: 100%; }
main { padding-inline: clamp(16px, 3vw, 28px) !important; }
main > header { padding-inline: clamp(20px, 4vw, 40px); padding-bottom: 28px; }
main :is(.grid, .flex, .inline-flex) > * { min-width: 0; }
main :is(h1,h2,h3,h4,p,li,a,strong,span), footer { overflow-wrap: anywhere; }
main h1 { font-size: clamp(1.8rem, 1.05rem + 3.2vw, 3.4rem) !important; line-height: 1.18 !important; }
main h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem) !important; line-height: 1.25; }
main h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem) !important; line-height: 1.3; }
main img, main video, main svg { max-width: 100%; }
main :is(a,button).whitespace-nowrap { white-space: normal; text-align: center; }
nav > div, nav > div > div { min-width: 0; max-width: 100%; }
nav > div > a { max-width: 100%; }
nav .brand-logo { width: clamp(110px, 22vw, 160px); flex-shrink: 0; }
nav > div > a > div { min-width: 0; }
nav a { overflow-wrap: anywhere; }
.formula-card { min-width: 0; padding: clamp(16px, 3vw, 28px); }
.metric-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.metric-heading > :is(h3,strong) { flex: 1 1 230px; min-width: 0; }
.metric-heading > span { flex: 0 1 auto; max-width: 100%; white-space: normal; }
.math-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding-block: 14px; font-size: clamp(.875rem, .8rem + .3vw, 1.125rem); }
.math-scroll .katex-display { margin: 0; padding: 6px 2px; text-align: start; }
.math-scroll .katex-display > .katex { text-align: start; white-space: nowrap; }
.katex, .katex * { overflow-wrap: normal; }
.math-scroll:focus-visible { outline-offset: -3px; }
.formula-hint { display: none; font: 12px/1.6 var(--font-professional); margin-top: 6px; }
.math-scroll.has-overflow + .formula-hint { display: block; }
.difficulty-weights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.difficulty-weights > span { margin-left: 0 !important; white-space: nowrap; }
.formula-card :is(.katex-display,.math-scroll) { max-width: 100%; }
@media(max-width: 700px) {
  nav { position: relative !important; }
  nav > div { gap: 14px; }
  nav > div > div.flex { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  nav > div > div a { display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1.35; padding: 9px; }
  .formula-card .metric-heading { flex-direction: column; align-items: flex-start; }
  .metric-heading > :is(h3,strong) { flex: initial; }
  .fokito-companion { flex-wrap: wrap; }
  .fokito-companion p { flex-basis: 180px; }
  .preview-controls > span { flex-basis: 100%; line-height: 1.5; }
  footer > div > div { min-width: 0; max-width: 100%; }
}
@media(max-width: 380px) {
  main { padding-inline: 12px !important; }
  .home-game-grid { grid-template-columns: minmax(0,1fr); }
  main > :is(header,section):not(.game-catalog), .game-detail { padding-inline: 16px; }
  .preview-tabs { flex-direction: column; }
}