/*
 * Ajuste para telas grandes (monitores 2K/4K, MacBook em "Mais espaço", ultrawide).
 * Abaixo de 1921px nada muda.
 *
 * 1) Escala: o tamanho base (1rem) cresce a partir de 16px em 1920x1080 até 38.4px em
 *    3840x2160 (2.4x). Como larguras, textos e espaçamentos estão em rem, tudo cresce junto
 *    e o conteúdo passa a ocupar ~80% da largura em vez de ~67%. A conta é contínua a partir
 *    de 1920px (sem "pulo") e usa o menor fator entre largura e altura, para ultrawide não
 *    ficar desproporcional. Teto de 48px (telas 5K/6K).
 *
 * 2) Altura das seções: em tela grande, "cada seção ocupa a tela inteira" (min-h-screen)
 *    deixa faixas vazias. Só o hero (primeira seção) mantém a altura de tela; as demais
 *    passam a ter a altura do próprio conteúdo + o padding que já têm.
 */
/*
 * 3) Modo compacto: desktop com pouca altura útil (ex.: Full HD com escala do Windows em
 *    125%/150%, que o navegador enxerga como ~1536x730 / ~1280x590, ou notebooks 1366x768).
 *    O tamanho base diminui com a altura (16px a partir de 800px de altura) para o conteúdo
 *    caber na tela, com piso de 12px para manter a leitura confortável.
 */
@media (min-width: 1024px) and (max-width: 1920px) and (max-height: 799px) {
    html {
        font-size: clamp(12px, 100vh / 50, 16px);
    }
}

@media (min-width: 1921px) {
    html {
        font-size: clamp(16px,
                min(16px + (100vw - 1920px) * 0.011667,
                    16px + (100vh - 1080px) * 0.020741),
                48px);
    }

    /* Ícones Material sem classe de tamanho: o Google Fonts fixa 24px; aqui viram 1.5rem */
    .material-symbols-outlined:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="xl"]):not([class*="text-["]) {
        font-size: 1.5rem;
    }

    section[class*="min-h-"]:not(:first-of-type),
    section[class*="h-screen"]:not(:first-of-type) {
        min-height: 0 !important;
        height: auto !important;
    }
}