/* ==========================================================
   Mobile Styles para Páginas Públicas (Landing Pages)
   Reduz espaçamento entre header e conteúdo do hero em mobile
   ========================================================== */

/* ===== NOTEBOOKS E TELAS PEQUENAS (768px - 1366px) ===== */
@media (min-width: 768px) and (max-width: 1366px) {
    /* Reduzir tamanho dos títulos no hero */
    .text-5xl,
    .text-6xl,
    .md\:text-5xl,
    .md\:text-6xl,
    .lg\:text-5xl,
    .lg\:text-6xl {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }

    .text-4xl,
    .md\:text-4xl,
    .lg\:text-4xl {
        font-size: 2rem !important;
    }

    .text-3xl,
    .md\:text-3xl {
        font-size: 1.5rem !important;
    }

    .text-2xl,
    .md\:text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl,
    .md\:text-xl {
        font-size: 1.1rem !important;
    }

    /* Reduzir padding das sections */
    .py-16,
    .py-20,
    .py-24,
    .md\:py-16,
    .md\:py-20,
    .md\:py-24,
    .lg\:py-16,
    .lg\:py-20,
    .lg\:py-24 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .py-12,
    .md\:py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Hero section mais compacto */
    section:first-of-type {
        padding-top: 0.5rem !important;
        padding-bottom: 1rem !important;
    }

    /* Cards menores */
    .p-8,
    .md\:p-8,
    .lg\:p-8 {
        padding: 1.25rem !important;
    }

    .p-6,
    .md\:p-6 {
        padding: 1rem !important;
    }

    /* Gap menor entre elementos */
    .gap-8,
    .md\:gap-8,
    .lg\:gap-8 {
        gap: 1.5rem !important;
    }

    .gap-12,
    .md\:gap-12,
    .lg\:gap-12 {
        gap: 2rem !important;
    }

    /* Margem inferior menor */
    .mb-8,
    .md\:mb-8 {
        margin-bottom: 1.5rem !important;
    }

    .mb-12,
    .md\:mb-12 {
        margin-bottom: 2rem !important;
    }

    /* Login/Registro - ajustes para notebook */
    .min-h-screen.flex.items-start.justify-center {
        min-height: auto !important;
        padding-top: 0.5rem !important;
        padding-bottom: 1rem !important;
    }

    /* Sidebar de benefícios menor */
    .min-h-screen .rounded-2xl.p-12 {
        padding: 1.25rem !important;
    }

    .min-h-screen .text-4xl {
        font-size: 1.35rem !important;
    }

    .min-h-screen .text-lg {
        font-size: 0.9rem !important;
    }

    .min-h-screen .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }

    /* Form mais compacto */
    .min-h-screen .space-y-4 > * + * {
        margin-top: 0.5rem !important;
    }

    /* Título da página auth */
    .min-h-screen .text-center.mb-8,
    .min-h-screen .mb-8 {
        margin-bottom: 1rem !important;
    }

    .min-h-screen h1.text-3xl {
        font-size: 1.5rem !important;
    }

    /* Ícones menores */
    .min-h-screen .p-3 {
        padding: 0.5rem !important;
    }

    .min-h-screen .w-6 {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

@media (max-width: 767px) {
    /* ===== MARGENS LATERAIS 16px EM TODO O SITE ===== */
    /* Override para classes Tailwind de padding horizontal */
    .px-4,
    .px-6,
    .px-8,
    .sm\:px-4,
    .sm\:px-6,
    .sm\:px-8,
    .container,
    .container.mx-auto {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Header específico */
    header .container,
    header > div,
    header.sticky .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Sections e containers internos */
    section .container,
    section > div > .container,
    main .container,
    main section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Max width containers - full width no mobile */
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ===== ESPAÇAMENTOS VERTICAIS ===== */
    /* Hero sections - reduzir padding vertical no mobile */
    section:first-of-type {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Main LP: remover min-h-screen no mobile */
    section.min-h-screen {
        min-height: auto !important;
    }

    /* Reduzir padding dos containers hero no mobile */
    section:first-of-type .container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* ===== PÁGINAS DE LOGIN/REGISTRO ===== */
    /* Reduzir padding em mobile */
    .min-h-screen.flex.items-start.justify-center {
        min-height: auto !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Container de auth - remover espaçamento excessivo */
    .min-h-screen .max-w-6xl,
    .min-h-screen .max-w-md {
        padding-top: 0 !important;
    }

    /* Título da página de login/registro */
    .min-h-screen h1 {
        margin-top: 0 !important;
    }

    /* Reduzir margin-bottom do título */
    .min-h-screen .text-center.mb-8 {
        margin-bottom: 1rem !important;
    }
}