/* 1. Hacemos que el HEADER (el rectángulo de fondo) sea blanco y de extremo a extremo */
    #main-header {
        position: sticky !important; /* Cambiamos de fixed a sticky para que no flote sobre el contenido */
        background-color: white !important; /* Fondo blanco sólido */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* Sombra para separar del formulario */
        color: #1f2937 !important; /* Forzamos texto oscuro */
        height: auto !important; /* Que se ajuste al contenido */
    }

    /* 2. Reducimos la altura del NAV-WRAPPER (de h-32 a algo más sutil para esta página) */
    #nav-wrapper {
        height: 80px !important; /* Altura más elegante para un formulario */
        width: 100% !important;
        max-width: 80rem !important; /* Equivalente a max-w-7xl */
        margin: 0 auto !important;
    }

    /* 3. Forzamos que los textos del menú sean oscuros */
    .nav-link-pro span {
        color: #1f2937 !important; /* Gris oscuro para que resalte en el blanco */
    }

    /* 4. Ajustamos el tamaño del logo para que no se vea gigante en esta página */
    #main-logo {
        height: 70px !important; 
        filter: brightness(0) saturate(100%) invert(31%) sepia(94%) html-color(rgb(4, 120, 87)); 
        /* El filtro opcional de arriba es si quieres que el logo se vea verde esmeralda */
    }

    /* 5. Quitamos el espacio que deja el header fixed */
    body {
        padding-top: 0 !important;
    }



    /* Aplicamos a todo el documento */
    * {
        font-family: 'Inter', sans-serif !important;
    }

    /* Estilo para las indicaciones pequeñas (las que quieres que se vean distintas) */
    .indicacion-pequena {
        font-size: 10px;
        letter-spacing: 0.05em;
        color: #9ca3af; /* Gris suave */
        font-weight: 400;
        text-transform: uppercase;
    }
    
    /* Para que el título resalte pero con la misma letra */
    h1 {
        letter-spacing: 0.1em; /* Un poco más de espacio entre letras lo hace fino */
    }